Filter with slider

Hello,

There is no such feature in JBZoo.

But, since these values are integers and it seems that the range is not very big, there is a workaround.

First, make this field as a repeatable text element:

Also, copy the Element ID somewhere (in the Notepad, for example), we'll need it later.

Then fill the whole range for you products one-by-one:


Go to the configuration of your item templates (full, teaser etc.) and change separator to 'span':


Now open the files of these templates and find where the position of this element is rendered. For example, the file for a teaser template of 'product' item type is here:

media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product/teaser.php

And the code that we are looking for is this:

<?php echo $this->renderPosition('properties', array('style' => 'list')); ?>

Now change it like this:

<?php echo $this->renderPosition('properties', array('style' => 'jbblock', 'tag' => 'li')); ?>

This will add needed classes to the 'li'.

Now add this CSS to your template:

.element-ce4d0a13-cbde-4ab0-89d1-f396593f3f92 span {
    display: none;
}
.element-ce4d0a13-cbde-4ab0-89d1-f396593f3f92 span:first-of-type, .element-ce4d0a13-cbde-4ab0-89d1-f396593f3f92 span:last-of-type {
    display: inline;
}
.element-ce4d0a13-cbde-4ab0-89d1-f396593f3f92 span:first-of-type:after {
    content: ' - ';
}
.element-ce4d0a13-cbde-4ab0-89d1-f396593f3f92 span:last-of-type:after {
    content: 'F';
}

But replace ce4d0a13-cbde-4ab0-89d1-f396593f3f92 with Element ID that you copied before. The only problem with this is that it will not work in Internet Exporer 8 and below.

Configure a filter accordingly and it's done.

Сообщение отредактировал Kess: 30 April 2014 - 00:27