Layered navigation slider on attributes

[Darius Webdevelopers]

Layered navigation block has options for price and weight - slider. Can anybody tell how to make slider for attributes. Attributes has numerical values.

Edited July 24, 2012 by E=mc^2 (see edit history)

[Cvalya]

I'm interesting too! For features in me case.

[Alex Simonchik BelVG]

Hi,

 

I think this is not trivial task, but you can look Blocklayared::getFilterBlock() function. There is the place where module choose slider type

 

Regards

[Amazzing]

You can do that on template level. No need to modify php.

Here is a basic example of slider, used for a group of attributes.

Group id: 6
Attribute type: Radio button

go to blocklayered.tpl, find the following loop: {foreach from=$filters item=filter}.

Just before ending this loop (...{/foreach}) insert the following code, modified according to your needs

{if $filter.id_key == 6}
  <div class="yourslider_value"></div>
  <div class="layered_slider yourslider"></div>
  <script type="text/javascript">
    $('#ul_layered_id_attribute_group_6').hide();
    var filter = {$filter|json_encode};
    var sliderVals = new Array();
    var sliderMax = 0;
    var sliderValue = 0;
    for (var i in filter.values){                       
      sliderMax++;
      sliderVals[sliderMax] = filter.values[i]['name'];
      if (filter.values[i].hasOwnProperty('checked')){
        sliderValue = sliderMax;
        $('.yourslider_value').html(sliderVals[sliderValue]);
      }
    }                           
    $('.layered_slider.yourslider').slider({
      max: sliderMax,
      values: [sliderValue],                              
      slide: function( event, ui ) {
        stopAjaxQuery();
        $('#ul_layered_id_attribute_group_6 input[type="checkbox"]').each(function(i){
          if (i+1 == ui.values[0])
            $(this).prop('checked',true);
          else
            $(this).prop('checked',false);
        })
        if (ui.values[0] > 0)
          $('.yourslider_value').html(sliderVals[ui.values[0]]);
        else
          $('.yourslider_value').html('Text when no filters are selected');
        },
        stop: function () {
          reloadContent();
        },
        create: function() {
          if (sliderValue == 0)
            $('.yourslider_value').html('Text when no filters are selected');
        }
    });
  </script>
{/if} 

This is a very basic slider example, just to give you an inspiration. I used it on one of my projects. You can improve/edit/modify it according to your needs

upd: tested on PS 1.5.6.0. 

Edited June 14, 2014 by Amazzing (see edit history)

[dename]

subscribing!

[mar.kazlauskas]

 

  $('#ul_layered_id_attribute_group_6').hide();
  
  $('#ul_layered_id_attribute_group_6 input[type="checkbox"]').each(function(i){
        

Hi,

thank You very much - it really works, but i cant understand what value need to use instead of  '#ul_layered_id_attribute_group_6'.

Where can I find value of ul_layered_id_attribute_group_6?

Now slider is displayed, but does not filter content on change...

 

Could you please advise me?

 

Thanks

[Logixor]

Hi everyone, 2 years later

 

@Amazzing, could you please give some more light for your solution please.

 

I was trying to accomplish this but unfortunately it's not working for me.

 

Please, if you don't mind, check the code below and the comments that I have aggregated and if you can give an answer to that.

 

Thanks in advance to anyone that might respond my question and shed some more light here.

 

PS: Also I have noticed that in the "blocklayered.tpl" file the loop {foreach from=$filters item=filter} appears 3 times, so in which of the loops do we add this code?

{if $filter.id_key == 6} /////? Does the "filter.id_key" stands for the attribute group number or not? And if not how to determine this number here?
  <div class="yourslider_value"></div>  /////? Is this value a random value? How do I define this value, do I just put a name here, like "Speed" for example? */
  <div class="layered_slider yourslider"></div> /////? "yourslider"? , is this the same as "yourslider_value" from above? If not, what should it be? */
  <script type="text/javascript">
    $('#ul_layered_id_attribute_group_6').hide(); /////? Do we change only the number in "#ul_layered_id_attribute_group_6" or the whole thing? My attribute group is 14, does it have to be "#ul_layered_id_attribute_group_14" */
    var filter = {$filter|json_encode};
    var sliderVals = new Array();
    var sliderMax = 0;
    var sliderValue = 0;
    for (var i in filter.values){                       
      sliderMax++;
      sliderVals[sliderMax] = filter.values[i]['name'];
      if (filter.values[i].hasOwnProperty('checked')){
        sliderValue = sliderMax;
        $('.yourslider_value').html(sliderVals[sliderValue]);
      }
    }                           
    $('.layered_slider.yourslider').slider({
      max: sliderMax,
      values: [sliderValue],                              
      slide: function( event, ui ) {
        stopAjaxQuery();
        $('#ul_layered_id_attribute_group_6 input[type="checkbox"]').each(function(i){
          if (i+1 == ui.values[0])
            $(this).prop('checked',true);
          else
            $(this).prop('checked',false);
        })
        if (ui.values[0] > 0)
          $('.yourslider_value').html(sliderVals[ui.values[0]]);
        else
          $('.yourslider_value').html('Text when no filters are selected');
        },
        stop: function () {
          reloadContent();
        },
        create: function() {
          if (sliderValue == 0)
            $('.yourslider_value').html('Text when no filters are selected');
        }
    });
  </script>
{/if}

Edited May 28, 2016 by Logixor (see edit history)