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.