Инструкции / Плагин «Ajax фильтры» для Shop-Script

Настройка фильтрации

По каким характеристиками фильтровать товары настраивается отдельно для каждой категории.
Откройте настройки категории, включите галочку "Разрешить фильтрацию" и выберите нужные характеристики, а так же настройте порядок вывода характеристик в блоке фильтров (перетаскиванием).

Обращаем внимание, что характеристики типа текст нельзя выбрать в качестве фильтра, но можно поменять тип характеристики на выпадающий список (текст) и тогда характеристику можно будет выбрать в качестве фильтра.
Создать новые характеристики или поменять тип вы можете в настройках магазина в разделе Типы и характеристики товаров.

Фильтры от.. до.. со слайдером для числовых характеристик

Такой фильтр работает для характеристик типа значение (число, длина и т.д.), а так же диапазон значений.
Так же для его работы необходимо, чтобы ваша тема дизайна поддерживала подобные фильтры, см. ниже инструкцию для своей темы дизайна.

Сортировка значений

Значения характеристик выводятся в том порядке, в котором они заданы в админке, изменить этот порядок вы можете в настройках магазина в разделе Типы и характеристика товаров - нужно нажать справа от характеристики на шестерёнку и тогда можно будет перетаскиванием изменить порядок значений выбранной характеристики.

Настройка темы дизайна

Ниже перечислены необходимые инструкции по изменению различных тем дизайна, чтобы работали все возможности плагина.
Если вашей темы дизайна нет в списке, то попробуйте воспользоваться инструкцией для стандартных тем дизайна, если не получилось, то напишите нам на info@wa-apps.ru

Темы Купить Просто и Удобная покупка

В этих темах уже реализовано на уровне темы дизайна сворачивание характеристики со своей логикой, поэтому настройки плагина "сворачивание характеристик" в этих темах работать не будут. Если вам всё же нужна логика работы именно плагина, а не темы дизайна, то обратитесь в техподдержку info@wa-apps.ru

Если у вас возникают проблемы со сворачиванием характеристик, откройте настройки плагина и в шаблоне после строчки:
$('.filters').on('click', 'b,i', function () {
добавьте:
return;

Для того, чтобы у вас работали описания характеристик (знак вопроса справа от названия, по которому по клику открывается описание) нужно внести небольшие изменения в тему дизайна.

Купить просто - откройте файл shop.filters.html найдите там код:
<span>{$filter.name|escape}</span>
и замените на такой:
<span>{$filter.name|escape}</span>{if !empty($filter.description)} <span title="{$filter.name|escape}" data-feature-id="{$fid}" class="q"></span>{/if}
Далее ниже найдите строчку:
$('.filters2 b').not('[data-feature="price"]').click(function(){
и замените её на:
$('.filters2 b').not('[data-feature="price"]').click(function(e){
if ($(e.target).is('span.q')) {
return;
}

Удобная покупка - откройте файл sidebar.html найдите там код:
<b data-feature="{$fid}">{$filter.name|escape}
и замените на такой:
<b data-feature="{$fid}">{$filter.name|escape}{if !empty($filter.description)} <span title="{$filter.name|escape}" data-feature-id="{$fid}" class="q"></span>{/if}
Далее ниже найдите строчку:
$('.filters b').not('[data-feature="price"]').click(function(){
и замените её на:
$('.filters b').not('[data-feature="price"]').click(function(e){
if ($(e.target).is('span.q')) {
return;
}

Тема Default 2.0

Откройте файл category.html и внесите следующие изменения (выделено жирным то, что нужно добавить):

<script type="text/javascript" src="{$wa_url}wa-content/js/jquery-ui/jquery.ui.slider.min.js?v{$wa->version(true)}"></script>
{shopFiltersPlugin::display()}
{/if}

...

<div class="filter-param{if !empty($filter.collapsed) and !empty($filter.code) and !$wa->get($filter.code)} collapsed{/if}">

...

<h5><i></i><b>{$filter.name|escape}</b>{if !empty($filter.description)} <span title="{$filter.name|escape}" data-feature-id="{$fid}" class="q"></span>{/if}</h5>

Стандартные и остальные темы дизайна

Для того, чтобы работало сворачивание характеристик требуется небольшое изменение вашей темы дизайна.
Для большинства остальных тем (например, для всех стандартных) вам нужен файл category.html вашей темы дизайна для приложения магазин.
Если в файле category.html подробного кода нет, то тогда вам нужен файл sidebar.html

Вам нужно найти код {foreach $filters as $fid => $filter}
Чуть ниже найдите код <p> и замените его на:
<p{if !empty($filter.collapsed) and !empty($filter.code) and !$wa->get($filter.code)} class="collapsed"{/if}>

Еще чуть ниже, найдите код <b>{$filter.name|escape}</b> или <span>{$filter.name|escape}</span> и замените его на:
<span><i></i><b>{$filter.name|escape}</b>{if !empty($filter.description)} <span title="{$filter.name|escape}" data-feature-id="{$fid}" class="q"></span>{/if}</span>

Тема Flamingo

Во-первых, откройте файл index.html и убедитесь, что у вас там только один раз встречается код {foreach $frontend_head as $_}{$_}{/foreach}.
Если встречается несколько раз, то удалите все кроме самого первого внутри <head></head>.

Далее откройте файл category.html и найдите там код:
<p class="filtername toppadding"><b>{$filter.name|escape}</b></p>
его нужно заменить на:
<p class="filtername toppadding{if !empty($filter.collapsed) and !empty($filter.code) and !$wa->get($filter.code)} collapsed{/if}"><span><i></i><b>{$filter.name|escape}</b>{if !empty($filter.description)} <span title="{$filter.name|escape}" data-feature-id="{$fid}" class="q"></span>{/if}</span></p>

Чуть ниже найдите код:
{foreach $filter.values as $v_id => $v}
    <label class="checkbox">
    <input type="checkbox" name="{$filter.code}[]" {if in_array($v_id, (array)$wa->get($filter.code, array()))}checked{/if} value="{$v_id}"> {$v}
    </label>
{/foreach}
и замените его на:
<div{if !empty($filter.collapsed) and !empty($filter.code) and !$wa->get($filter.code)} class="collapsed"{/if}>
{foreach $filter.values as $v_id => $v}
    <label class="checkbox">
    <input type="checkbox" name="{$filter.code}[]" {if in_array($v_id, (array)$wa->get($filter.code, array()))}checked{/if} value="{$v_id}"> {$v}
    </label>
{/foreach}
</div>

Еще чуть ниже найдите:
<div class="span6">
    <input type="submit" value="[`Filter products`]" class="flamingo-1">
и замените на:
<div class="span12">
    <input type="submit" value="[`Filter products`]" class="flamingo-1">

Почти в самом конце файла category.html найдите:
<div id="product-list">
и замените на:
<div id="product-list" class="product-list">

Откройте настройки плагина и в шаблоне вывода поменяйте код:
$('.filters').on('click', 'b,i', function () {
    $(this).closest('p').toggleClass('collapsed');
    $(this).closest('p').next('div').toggleClass('collapsed');
});
на такой:
$('.filters').on('click', 'b,i', function () {
    $(this).closest('p').toggleClass('collapsed');
    $(this).closest('p').next('div').toggleClass('collapsed');
});
жирным выделено то, что нужно добавить

Если у вас возникли какие-то трудности или вопросы, просто напишите на info@wa-apps.ru, мы вам обязательно поможем!

Ajax фильтры для Shop-Script

7 дней бесплатно