Issue
on the left and right side of my slider are the states (numbers/price) from and until how much you can search Products (Price-Slider /Price-Filter). But the numbers are static, so If I use the slider then the numbers stay the same... I would like the numbers to change with the slider. How I can connect the numbers with my Slider?
Please see here (yellow marked)->SliderStates
Here the HTML Info of my filter:
<form action="https://entdeckepreise.de/filter/produktfilter/" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group">
<label for="price7068" class="control-label">Nach Preis</label>
<div class="slide">
<span>1</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 0%;"></div>
<div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
<div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 € - 4721 €</div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 0%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 47.2047%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">4721</div>
</div>
</div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
data-value="1,4721" style="display: none;">
<span>10000</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="product_rating4028" class="control-label">Nach Bewertung</label>
<div class="slide">
<span>0</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 20%;"></div>
<div class="slider-selection" style="left: 20%; width: 80%;"></div>
<div class="slider-track-high" style="right: 0px; width: 0%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 Sterne - 5 Sterne</div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 20%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 100%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">5</div>
</div>
</div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
data-slider-value="[0,5]" data-value="1,5" style="display: none;">
<span>5</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="marke2417" class="control-label">Nach Marke</label>
<select id="marke2417" name="marke[]" class="form-control" multiple="">
<option value="msi">MSI</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="kategorie5529" class="control-label">Nach Kategorie</label>
<select id="kategorie5529" name="kategorie" class="form-control">
<option value="">Kategorie wählen</option>
<option value="automotorrad">Auto & Motorrad</option>
<option value="babykinderwelt">Baby & Kinderwelt</option>
<option value="computersoftware">Computer & Software</option>
<option value="druckerscanner"> Drucker & Scanner</option>
<option value="3ddruckerk"> 3D-Drucker</option>
</select>
<div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
name="orderby" value="">
<div class="form-group form-group-block">
<a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
<button type="submit" class="btn btn-at">
Filtern </button>
</div>
<div class="clearfix"></div>
Also my Price-Slide-PHP-Code:
// values & steps
$values = at_field_database_min_max_value( $this->name, 'product' );
if ( isset( $this->field['min_value'] ) && $this->field['min_value'] != false ) $values->min = $this->field['min_value'];
if ( isset( $this->field['max_value'] ) && $this->field['max_value'] != false ) $values->max = $this->field['max_value'];
$steps = at_field_step_value( $values->min, $values->max, '', $this->name );
?>
<div class="form-group">
<label for="<?php echo $this->id; ?>" class="control-label"><?php echo $title ?></label>
<div class="slide">
<span><?php echo $values->min; ?></span>
<input id="<?php echo $this->id; ?>" name="<?php echo $this->name; ?>" data-slider-label="<?php echo apply_filters( 'at_filter_price_label', ' ' . at_get_default_currency( true ) ); ?>" type="text" class="bt-slider" value="<?php if ( $this->value ) {
echo $this->value;
} ?>" data-slider-min="<?php echo $values->min; ?>" data-slider-max="<?php echo $values->max; ?>" data-slider-step="<?php echo $steps; ?>" data-slider-value="[<?php if ( $this->value ) {
echo $this->value;
} else {
echo $values->min . ',' . $values->max;
} ?>]">
<span><?php echo $values->max; ?></span>
</div>
<?php echo( $instruction ? '<span class="filter-instruction">' . $instruction . '</span>' : '' ); ?>
<div class="clearfix"></div>
</div>
Solution
Replace the script i provided you before by this:
let filterForm = document.querySelector("form.filterform");
if (null !== filterForm) {
let waitS = setInterval(wait_sliders, 200);
function wait_sliders() {
if (null !== filterForm.querySelector(".slider-handle")) {
// Listen new values
let slides = filterForm.querySelectorAll('.slide');
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === "attributes") {
let values = mutation.target.value.split(',');
let spans = mutation.target.closest('.slide').querySelectorAll('span');
spans[0].innerText = values[0];
spans[spans.length - 1].innerText = values[1];
}
});
});
slides.forEach(slide => {
let el = slide.querySelector('.bt-slider');
observer.observe(el, { attributes: true });
});
filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) => {
let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
for (let i = 0; i < event.length; i++) {
e.addEventListener(event[i], (e) => {
filterForm.querySelector('button[type="submit"]').click();
});
}
}),
filterForm.querySelector('button[type="submit"]').click();
clearInterval(waitS);
}
}
}
Answered By - Younes Bennour
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.