Filtro Preços
Os filtros de preços servem para fazer a dinamização da média dos valores cadastrados nos produtos de determinada categoria, possibilitando assim uma filtragem precisa de valores, facilitando a pesquisa do cliente pela vitrine da loja. O código abaixo pode ser utilizado para fazer a inserção desse filtro em forma de slider.
<div class="price-slider-wrapper">
<div class="example">
<div id="nonlinear"></div>
<div class="box-price-range">
<span class="example-val" id="lower-value">
R${{number_format($priceMin, 2, ',', '.')}}
</span>
<input type="text" class="hide example-val" canopus-showcase-infinite-scroll-price-min/>
</div>
<div class="box-price-range tar">
<span class="example-val" id="upper-value">
R${{number_format($priceMax, 2, ',', '.')}}
</span>
<input type="text" class="hide example-val" canopus-showcase-infinite-scroll-price-max/>
</div>
@push('afterPageScripts')
// script do slider de preço - plugin nouislider
<script>
var nonLinearSlider = document.getElementById('nonlinear');
noUiSlider.create(nonLinearSlider, {
connect: true,
behaviour: 'tap',
start: [{{$priceMin}}, {{$priceMax}}],
range: {
//
'min': [{{$priceMin}}],
'max': [{{$priceMax}}]
}
});
</script>
<script>
var nodes = [
document.getElementById('lower-value'), // 0
document.getElementById('upper-value') // 1
];
nonLinearSlider.noUiSlider.on('update', function(values, handle, unencoded, isTap, positions) {
var parent = nodes[handle].parentElement;
$(parent).find('input').val(values[handle]);
nodes[handle].innerHTML = values[handle];
});
</script>
@endpush
</div>
</div>
{$priceMax}} utilizado para exibir o preço mínimo cadastrado na respectiva categoria.
canopus-showcase-infinite-scroll-price-min atributo do plugin canopus, utilizado para identificar filtros de preço mínimo. Se configurado corretamente, ao atualizar o valor do elemento (preferencialmente <input>) a vitrine é atualizada considerando o novo limite de preço.
{$priceMax}} utilizado para exibir o preço máximo cadastrado na respectiva categoria.
@push('afterPageScripts') utilizado para fazer a execução de um determinado script após o browser carregar outros scripts indexados na página. @endpush finaliza a execução.
Comentários
0 comentário
Por favor, entre para comentar.