Jump to content

Edit History

sidney712

sidney712

jQuery UI slider for price filter. It's my temporary solution. I use it with my theme based on Classic.
In this file
  sitename/themes/classic/templates/catalog/_partials/facets.tpl

after the string

  {if $facet.widgetType !== 'dropdown'}

insert this

{if $facet.type == 'price'}
  <div class="slider-range-wrapper">
    <p>
      <input type="text" id="amount" readonly>
      <a id="submitprice">
        <button class="btn btn-secondary">OK</button>
      </a>
    </p>
    <div id="slider-range" data-type="{$facet.type}" data-quantity="{$filter.magnitude}" data-min-value="{$facet.properties.min}" data-max-value="{$facet.properties.max}"></div>
  </div>
{/if}

and at the end of the file add this script

  <script type="text/javascript">
    $('#search_filters').ready(function() {
      var langShop = prestashop.language.iso_code;
      var langPrice = $('.slider-range-wrapper').parent().children('.facet-title')[0].innerHTML;
      var pageURLIndex = -1;
      var sliderPrice = function() {
        var minValue = $('#slider-range').data('min-value');
        var maxValue = $('#slider-range').data('max-value');
        $('#slider-range').slider({
          range: true,
          min: minValue,
          max: maxValue,
          values: [minValue, maxValue],
          slide: function(event, ui) {
            $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign);
          },
          stop: function(event, ui) {
            pageURLIndex = window.location.href.indexOf("?");
            $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign);
            $('#submitprice').attr("href", window.location.href + ((pageURLIndex === -1) ? '?q=' : '/') + langPrice + '-' + prestashop.currency.sign + '-' + $('#slider-range').slider('values', 0) + '-' + $('#slider-range').slider('values', 1));
          }
        });
        $('#amount').val($('#slider-range').slider('values', 0) + ' ' + prestashop.currency.sign + ' - ' + $(' #slider-range').slider('values', 1) + ' ' + prestashop.currency.sign);
      };
      sliderPrice();
    });
  </script>

 

sidney712

sidney712

jQuery UI slider for price filter. It's my temporary solution. I use it with my theme based on Classic.
In this file
  sitename/themes/classic/templates/catalog/_partials/facets.tpl

after the string

  {if $facet.widgetType !== 'dropdown'}

insert this

{if $facet.type == 'price'}
  <div class="slider-range-wrapper">
    <p>
      <input type="text" id="amount" readonly>
      <a id="submitprice">
        <button class="btn btn-secondary">OK</button>
      </a>
    </p>
    <div id="slider-range" data-type="{$facet.type}" data-quantity="{$filter.magnitude}" data-min-value="{$facet.properties.min}" data-max-value="{$facet.properties.max}"></div>
  </div>
{/if}

and at the end of the file add this script

  <script type="text/javascript">
    $('#search_filters').ready(function() {
      var langShop = prestashop.language.iso_code;
      switch (langShop) {
        case 'fr':
          langPrice = 'Prix';
          break;
        case 'ru':
          langPrice = 'Цена';
          break;
        case 'uk':
          langPrice = 'Ціна';
          break;
        default:
          langPrice = 'Price';
      }
      var pageURLIndex = -1;
      var sliderPrice = function() {
        var minValue = $('#slider-range').data('min-value');
        var maxValue = $('#slider-range').data('max-value');
        $('#slider-range').slider({
          range: true,
          min: minValue,
          max: maxValue,
          values: [minValue, maxValue],
          slide: function(event, ui) {
            $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign);
          },
          stop: function(event, ui) {
            pageURLIndex = window.location.href.indexOf("?");
            $('#amount').val(ui.values[0] + ' ' + prestashop.currency.sign + ' - ' + ui.values[1] + ' ' + prestashop.currency.sign);
            $('#submitprice').attr("href", window.location.href + ((pageURLIndex === -1) ? '?q=' : '/') + langPrice + '-' + prestashop.currency.sign + '-' + $('#slider-range').slider('values', 0) + '-' + $('#slider-range').slider('values', 1));
          }
        });
        $('#amount').val($('#slider-range').slider('values', 0) + ' ' + prestashop.currency.sign + ' - ' + $(' #slider-range').slider('values', 1) + ' ' + prestashop.currency.sign);
      };
      sliderPrice();
    });
  </script>

 

×
×
  • Create New...