Jump to content

Faceted search - Price slider not a slider


Recommended Posts

Hello again, i couldn't find a solution other than buying a module. I'm using the faceted price slider but here is what it looks like: http://imgur.com/mGcABB2.png

Not only it's not a slider but it's a big list of ranges which are not needed at all and also the price range does not include taxes as i set up in the module settings. 

 

P.S. i still have issues with this site not showing properly, am i the only one?

Link to comment
Share on other sites

sure

 

Prestashop 1.7.2

example page: https://colosishop.com/it/12-orologi

 

configurazion 1: http://imgur.com/JKLxgVM

configuration 2: http://imgur.com/2pGvONk

 

so the name of the filter is "filter by product price (slider)" but on the right it says "list of ranges" and i can't change it to a slider.

 

on the example page you can try to check the "10-42€" range and you will see some items that costs 44,90 are shown too.

 

Let me know if you need any more info

Link to comment
Share on other sites

Is "peso del prodotto" the weight?

 

Seems like you use a module to show a second finer price filter after choosing the first. Or is it a new function in Prestashop 1.7?

 

The tax problem is the same in my older Prestashop, it's discussed here:

 

https://www.prestashop.com/forums/topic/544108-layered-navigation-blockproduct-price-filter-working-with-price-with-tax/

Link to comment
Share on other sites

"peso del prodotto" means product weight

 

Faceted search should be the only module i'm using for filtering, not sure if there is any difference with 1.6

 

For the tax thing that post looks like it's related to 1.6 but i'll try to see if that line of code is the same

Link to comment
Share on other sites

  • 4 weeks later...

Hi guys, I'm using Presta 1.7.2 (in this version, lot of bugs I've found in 1.7.1 where solved) from lot of searches I've done I've found out that Faceted search in Presta 1.7 has a common problem, found out by lot of users (there are a different discussion thread unsolved about this): the filter by Price that only show ranges with radio buttons, make ranges that doesn't make sense.

For escample, I've prices of: 6,99 € 9,99 € 14,99 € 19,99 € 24,99 € 29,99 € and so on and my ranges are: 14-15 € 19-20€ 24-25€ and so on, so as result I've lot of unuseful ranges, they should by for escample 10-20 , 20-30 and so.

 

The problem was there in Presta 1.7.1 and with 1.7.2 has not been solved, it's an issue of the Faceted Search module (so it's not necessary to update all Presta, but only this module) , it's an algorithm problem I think.

 

So I don't think that we can solve this just by changing some code rows, but something has to be totally rewritten. 

 

We should ask the Prestashop Team to develop a new updated version of this module, how can we do that?

  • Like 4
Link to comment
Share on other sites

  • 4 months later...
  • 4 weeks later...
  • 3 weeks later...
  • 2 weeks later...
  • 1 month later...
  • 8 months later...
  • 2 months later...
  • 2 weeks later...

this price slider above definitely does not work (my currency is other than euro) how to uninstall it? There is no new module to uninstall and after deleting modules/tc_pricefilter folder the "module" is still active.

Link to comment
Share on other sites

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>

 

Edited by sidney712 (see edit history)
Link to comment
Share on other sites

On 5/10/2019 at 7:30 PM, sidney712 said:

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>

 

I tried the code above, but it shows only OK button and a input field. No slider. Is it the full code?

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
  • 3 months later...

I see where the error is. 

In the themes/classic/templates/_partials/javascript.tpl file the jquery is loaded in last few files. I just shifted it to up before all the js files are included in the same file and the price filter worked. 

The error that I was getting in the console was $(...).slider is not a function 

slider is a function of jquery ui , it must be loaded only after jquery, whereas in the default javascript.tpl file it was the opposite.

 

jquery.PNG

filer.PNG

Edited by razorsharpshady (see edit history)
Link to comment
Share on other sites

  • 1 year later...
On 2/22/2019 at 10:23 AM, ehtsham said:

same problem, V 1.7 price slider not working .. show radio buttons

https://motorcycleshop.pk/17-motorcyle-helmets

 

 

On 8/22/2017 at 3:22 AM, apicedda said:

sure

 

Prestashop 1.7.2

example page: https://colosishop.com/it/12-orologi

 

configurazion 1: http://imgur.com/JKLxgVM

configuration 2: http://imgur.com/2pGvONk

 

so the name of the filter is "filter by product price (slider)" but on the right it says "list of ranges" and i can't change it to a slider.

 

on the example page you can try to check the "10-42€" range and you will see some items that costs 44,90 are shown too.

 

Let me know if you need any more info

How did you solve this issue? i see a working sliders on your pages, so can you advise anything?

Edited by jdernt (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...