Тема: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.
Добрый день.
Вообщем как-то при продаже маек потребовалось сделать модуль, который выводил бы для фильтров разные в графическом виде. Да так чтобы можно было мышкой ткнуть и выбрался цвет и соответственно применялся фильтр.
Вот решение.
1. Качаем модуль цветов здесь.
2. Закидываем содержимое в папку modules
3. Устанавливаем модуль в админке Веб-сайт -> Настройка модулей. (Ищем Справочник цветов). Ссылка не установлен будет красным цветом
4. После установки обновляем кэш.
5. В меню появится "Цвета" в меню "Магазин".
Алгоритм добавления такой:
1. Создаём характеристику цвет в "Товары"->"Характеристики"
2. Заполняем значения характеристики и сохраняем. Например Красный Синий и т.д.
3. Идём к редактированию товара и выставляем у него значение характеристики цвет.
4. После заполнения значениями характеристики цвет товаров, идём в "Магазин" -> "Цвета". Нажимаем добавить цвет.
5. Указываем название точно равное Варианту цвета. Например "Красный" и собсвенно указываем красный цвет ему. И т.д. Создав палитру.
Работа с шаблонами:
Теперь необходимо вывести наше решение в фильтрах.
Для этого копируем шаблон из
/modules/catalog/view/blocks/sidefilters/filters.tpl
в
/templates/Ваша тема/moduleview/catalog/blocks/sidefilters/
И меняем его примерно так:
{addjs file="history.min.js" basepath="common"}
{addjs file="{$mod_js}jquery.filter.js" basepath="root"}
{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{*Подгружаем цвета*}
<form method="GET" class="filters" action="{urlmake f=null bfilter=null p=null}">
<div class="side-left">
<div class="overlay"></div>
<div class="properties" data-base-url="{urlmake f=null p=null}">
{foreach from=$prop_list item=item}
{foreach from=$item.properties item=prop}
{if $prop.title == 'Цвет'}
<div class="block block-colors" data-filter-id="{$prop.id}">
<div class="separator-text">ЦВЕТ</div>
<div class="separator"> </div>
<ul>
{foreach from=$prop->getAllowedValues() key=key item=value}
<li {if isset($filters[$prop.id]) && in_array($value, $filters[$prop.id])}class="checked"{/if} data-filter-value="{$value}">
<div class="selected"></div>
<a href="?f[{$prop.id}][]={$value}" class="filter color{if $value=='Разноцвет'} multicolor{/if}" style="background-color:{$colors.colors[$value].color}" title="{$value}"></a>
<input type="checkbox" {if is_array($filters[$prop.id]) && in_array($value, $filters[$prop.id])}checked{/if} name="f[{$prop.id}][]" value="{$value}" style="display:none;"/>
</li>
{/foreach}
</ul>
</div>
{else}
<div class="block block-select" data-filter-id="{$prop.id}">
<div class="separator-text">{$prop.title}</div>
<div class="separator"> </div>
<ul>
{assign var=prop_values value=$prop->getAllowedValues()}
{if $prop.title=='Скидка %' && $prop_values}
{php}unset($prop_values[0]);{/php}
{/if}
{foreach from=$prop_values key=key item=value name=i}
{if !($prop.title=='Скидка %' && $value==0)}
<li {if isset($filters[$prop.id]) && in_array($value, $filters[$prop.id])}class="checked"{/if} data-filter-value="{$value}">
<a class="filter checkbox" href="?f[{$prop.id}][]={$value}">{$value}</a>
<input type="checkbox" {if is_array($filters[$prop.id]) && in_array($value, $filters[$prop.id])}checked{/if} name="f[{$prop.id}][]" value="{$value}" style="display:none;"/>
</li>
{/if}
{/foreach}
</ul>
</div>
{/if}
{/foreach}
{/foreach}
<input type="submit" value="Применить" class="onemore submitFilter" style="display:none;">
</div>
</div>
</form>
<script>
$(function() {
$(function() {
$('.side-left').productFilter({
targetList : '.updatable' //Div в который будет обновлён
});
});
$(window).bind('new-content', function() {
$('.side-left .overlay').hide();
});
$('.filter').on('click',function() {
var wrap = $(this).closest('li');
$(wrap).toggleClass('checked');
if ($(wrap).hasClass('checked')){
$('input',wrap).prop('checked',true).change();
}else{
$('input',wrap).prop('checked',false).change();
}
return false;
});
});
</script>Сохраняем.
Теперь поправим CSS добавив стили нашим цветам. Например добавив в style.css
.block-colors ul .selected {
border: 2px solid #dd0080;
bottom: -2px;
display: none;
left: -4px;
position: absolute;
right: -2px;
top: -4px;
}
.block-colors ul .checked .selected {
display: block;
}
.block-colors ul {
list-style: none outside none;
margin: 0 18px;
overflow: hidden;
padding: 0;
}
.block-colors ul li {
background: none repeat scroll 0 0 #ececec;
float: left;
height: 24px;
margin: 5px;
position: relative;
width: 24px;
}
.block-colors ul .selected {
border: 2px solid #dd0080;
bottom: -2px;
display: none;
left: -4px;
position: absolute;
right: -2px;
top: -4px;
}
.block-colors ul .checked .selected {
display: block;
}
.block-colors ul li a {
box-shadow: 0 0 3px silver;
left: -1px;
position: relative;
top: -1px;
}
