Вывод параметров блока многоуровневой навигации раскрывающимся списком
Модуль многоуровневой навигации — очень полезная вещь в Prestashop, потому что с его помощью можно организовать фильтрацию товаров по всем возможным параметрам: цене, категории, производителю, атрибутам и характеристикам. Вместе с тем, когда параметров фильтрации очень много, они образуют довольно длинную простыню, что конечно не совсем удобно для восприятия клиентом. Уменьшить размер области выбора параметров фильтрации можно конечно просто сократив количество этих параметров, но это половинчатый выход, ведь чем проще клиенту отсортировать и найти нужный товар, тем лучше для продаж. Поэтому лучше всего скрыть эти параметры в раскрывающихся блоках, подобно тому как скрываются подкатегории в блоке категорий.
Самое интересное, что эта возможность присутствует в исходном коде модуля, но она отключена.
Итак, прежде всего в файле /themes/текущий шаблон/modules/blocklayered/blocklayered.tpl
находим этот код и активируем его убрав тэги <!— и —> и немного модифицировав. Было:
|
1 2 3 |
<!--<span class="layered_close"> <a href="#" data-rel="ul_layered_{$filter.type}_{$filter.id_key}"></a> </span>--> |
Стало:
|
1 2 3 |
<span class="layered_close"> <a href="#" rel="ul_layered_{$filter.type}_{$filter.id_key}"> </a> </span> |
Теперь у нас появляется возможность открывать и закрывать фильтры, как показано на рисунке:
Далее, для общности стиля с блоком категорий изменим чекбоксы разделов фильтра на пиктограммы «+» и «-«. Открываем файл /themes/текущий шаблон/css/modules/blocklayered/blocklayered.css
Заменяем в нем этот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#layered_block_left .layered_close { float: right; padding-right: 5px; } #layered_block_left span.layered_close a, #layered_block_left span.layered_close a { display: block; height: 13px; width: 13px; text-decoration: none; text-indent: -5000px; background: url(img/icon/less.gif) no-repeat 2px 2px; } #layered_block_left span.closed a { background: url(img/icon/more.gif) no-repeat 2px 2px; } |
На этот:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.layered_subtitle_heading { color: #333; } #layered_block_left .layered_close { display: block; text-align: center; text-decoration: none; float: right; } #layered_block_left .layered_close a:hover, #layered_block_left .layered_close a:focus { text-decoration: none; outline: none; } #layered_block_left .layered_close a:after { font-family: "FontAwesome"; content: "\f068"; padding-right: 5px; vertical-align: middle; color: #000; text-decoration: none; } #layered_block_left .closed a:after { font-family: "FontAwesome"; content: "\f067"; padding-right: 5px; vertical-align: middle; color: #000; text-decoration: none; } |
Возможность открывать и закрывать фильтры появилась, однако они все равно оказываются открытыми при заходе на страницу! А ведь нужно сэкономить место. Чтобы блоки фильтров были закрытыми по умолчанию, необходимо отредактировать файл /themes/текущий шаблон/js/modules/blocklayered/blocklayered.js
В этом файле ищем функцию openCloseFilter()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function openCloseFilter() { $(document).on('click', '#layered_form span.layered_close a', function(e) { if ($(this).html() == '<') { $('#'+$(this).data('rel')).show(); $(this).html('v'); $(this).parent().removeClass('closed'); } else { $('#'+$(this).data('rel')).hide(); $(this).html('<'); $(this).parent().addClass('closed'); } e.preventDefault(); }); } |
и модернизируем ее следующим образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function openCloseFilter() { $('#layered_block_left ul').hide(); $('#layered_form span.layered_close').addClass('closed'); $(document).on('click', '#layered_form span.layered_close a', function(e) { if ($(this).parent('span.layered_close').hasClass('closed')) { $('#'+$(this).attr('rel')).show(); $(this).parent().removeClass('closed'); } else { $('#'+$(this).attr('rel')).hide(); $(this).parent().addClass('closed'); } e.preventDefault(); }); } |
Теперь списки параметров получается изначально закрытым и их можно открывать по мере необходимости, что собственно и было нужно.
Добавить комментарий