1 Отредактировано Закусило Александр (14.03.2016 15:19:23)

Тема: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Добрый день.
Вообщем как-то при продаже маек потребовалось сделать модуль, который выводил бы для фильтров разные в графическом виде. Да так чтобы можно было мышкой ткнуть и выбрался цвет и соответственно применялся фильтр.
Вот решение.
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">&nbsp;</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">&nbsp;</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;
}

2

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Модуль также можно устанавливать из панели администратора с помощью кнопки "Добавить модуль" в разделе Веб-сайт->Настройка модулей.

Повысить оценку Понизить оценку

3

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

модуль через встроенный инсталятор не устанавливается

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

модуль через встроенный инсталятор не устанавливается

Опишите процесс как устанавливали

5

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Александр пишет:

модуль через встроенный инсталятор не устанавливается

Опишите процесс как устанавливали

настройка модуля> добавить модуль> выбрал архив > все. Какая то ошибка не помню уже.

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

А можно такой же модуль только с выбором размера одежды/обуви?

Повысить оценку Понизить оценку

7 Отредактировано Александр (26.11.2014 18:47:11)

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Вячеслав пишет:

А можно такой же модуль только с выбором размера одежды/обуви?

Вы можете адаптировать как этот модуль под себя, так и использовать стандартные многомерные комплектации с их скриптами. Например так. Выводить характеристики нужные вам. При клике Вы просто обрабатываете данные характеристики собирая значения (Например размер и цвет). Выпадающие списки в многомерных комплектациях вы скрываете. После выбора размеров, в выпадающих списках меняете значение в зависимости от того что выбрано. Например как это было недавно сделано вот здесь http://medpodium-ru.1gb.ru/catalog/bluzony/

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Александр пишет:

Вы можете адаптировать как этот модуль под себя, так и использовать стандартные многомерные комплектации с их скриптами. Например так. Выводить характеристики нужные вам. При клике Вы просто обрабатываете данные характеристики собирая значения (Например размер и цвет). Выпадающие списки в многомерных комплектациях вы скрываете. После выбора размеров, в выпадающих списках меняете значение в зависимости от того что выбрано. Например как это было недавно сделано вот здесь http://medpodium-ru.1gb.ru/catalog/bluzony/

Большое спасибо за ответ. С многомерными комплектациями я что-то протупил, с ними еще не разбирался.
PS: только не совсем понял как скрыть выпадающие списки.

Повысить оценку Понизить оценку

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Вячеслав пишет:
Александр пишет:

Вы можете адаптировать как этот модуль под себя, так и использовать стандартные многомерные комплектации с их скриптами. Например так. Выводить характеристики нужные вам. При клике Вы просто обрабатываете данные характеристики собирая значения (Например размер и цвет). Выпадающие списки в многомерных комплектациях вы скрываете. После выбора размеров, в выпадающих списках меняете значение в зависимости от того что выбрано. Например как это было недавно сделано вот здесь http://medpodium-ru.1gb.ru/catalog/bluzony/

Большое спасибо за ответ. С многомерными комплектациями я что-то протупил, с ними еще не разбирался.
PS: только не совсем понял как скрыть выпадающие списки.

Сделайте в стилях им display:none; Вот и всё.

10

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

А вы не могли бы поподробней описать в какую часть filters.tpl добавить или заменить ваш код? Я не очень силен в программировании.

11 Отредактировано Александр (04.03.2015 12:19:02)

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Sergey T. пишет:

А вы не могли бы поподробней описать в какую часть filters.tpl добавить или заменить ваш код? Я не очень силен в программировании.

Так я же в первом посте привёл код filters.tpl.

Смотрите туда где начинается.

{if $prop.title == 'Цвет'}

В фильтрах просто перебираются фильтры подготовленные от блок контроллера фильтров (/modules/catalog/controller/block/sidefilters.inc.php), и там где идёт список перебираются доступные характеристики.
Я в коде проверяю имя этой характеристики. Если это цвет, то тогда применяю код, который выводит эти блоки с задним фоном. Также обратите внимание на начало этого кода, а именно:

{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{*Подгружаем цвета*}

Т.е. мы переменной $colors возвращаем массив из заполненных нами цветов в админке из блок контроллера \Colors\Controller\BlockValues.

Вывести значения этой переменной можно так:

<pre>
{var_dump($colors)}
</pre>

А дальше просто смотрите алгоритм.
Попробуйте, если что ещё подскажу.

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Ну что? Получается?

13 Отредактировано Sergey T. (06.03.2015 17:30:55)

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Если честно, корявенько. И дело даже не в стилях... Или все-таки в стилях. Видимо не допонял саму структуру filters.tlp.

Вот filters.tpl

{addjs file="jquery.formstyler.min.js"}
{addjs file="jquery.slider.min.js"}
{addjs file="history.min.js" basepath="common"}
{addjs file="{$mod_js}jquery.filter.js" basepath="root"}
{*Подгружаем цвета*}
{modulegetvars name="\Colors\Controller\BlockValues" var="colors"}
{*Подгружаем цвета*}

<section class="filterSection">
    <div class="loadOverlay"></div>
    <a href="#" class="onemoreEmpty blackHover filterToggle rs-parent-switcher" data-cookie-id="sideFilter" data-on-text="развернуть расширенный фильтр">свернуть расширенный фильтр</a>
    <form method="GET" class="filters" action="{urlmake f=null bfilter=null p=null}">
        {if $param.show_cost_filter}
            <div class="filter typeInterval">
                <h4>{t}Цена{/t}:</h4>
                <table class="fullwidth fromToLine">
                    <tr>
                        <td>{t}от{/t}</td>
                        <td class="p50"><input type="text" class="textinp fromto" name="bfilter[cost][from]" value="{$basefilters.cost.from}" data-start-value=""></td>
                        <td>{t}до{/t}</td>
                        <td class="p50"><input type="text" class="textinp fromto" name="bfilter[cost][to]" value="{$basefilters.cost.to}" data-start-value=""></td>
                        <td>{$prop.unit}</td>
                    </tr>
                </table>
            </div>
        {/if}
        {if $param.show_brand_filter && count($brands)>1}
            <div class="filter typeMultiselect">
                <h4>{t}Производитель{/t}:</h4>
                <ul>
                    {foreach $brands as $brand}
                    <li>
                        <input type="checkbox" {if is_array($basefilters.brand) && in_array($brand.id, $basefilters.brand)}checked{/if} name="bfilter[brand][]" value="{$brand.id}" class="cb" id="cb_{$brand.id}_{$smarty.foreach.i.iteration}">
                        <label for="cb_{$brand.id}_{$smarty.foreach.i.iteration}">{$brand.title}</label>
                    </li>
                    {/foreach}
                </ul>
            </div>
        {/if}
        {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">&nbsp;</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">&nbsp;</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">
        <a href="{urlmake f=null p=null bfilter=null}" class="onemore cleanFilter{if empty($filters) && empty($basefilters)} hidden{/if}">очистить фильтр</a>
        
        <script type="text/javascript">
            $(function() {
                $('.filter .cb, .filter .yesno').styler();
                $('.typeInterval .pluginInput').each(function() {
                    var $this = $(this);
                    
                    var fromTo = $this.siblings('.fromToLine').hide();
                    
                    $this.jslider( $.extend( $(this).data('slider'), { callback: function(value) {
                        var values = value.split(';');
                        $('input[name$="[from]"]', fromTo).val(values[0]);
                        $('input[name$="[to]"]', fromTo).val(values[1]);
                        $this.trigger('change');
                    }})
                    );
                    
                    $('input[name$="[from]"], input[name$="[to]"]', fromTo).change(function() {
                        var from = $('input[name$="[from]"]', fromTo).val();
                        var to = $('input[name$="[to]"]', fromTo).val();
                        $this.jslider('value', from, to);
                    });

                });
            });
        </script>  

        <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>      
    </form>
</section>

Хотя может быть проблема и в стилях. У меня выходит следующее в цветах:
http://i59.fastpic.ru/big/2015/0306/91/79ee4002a682ae321263fbcd38bf8691.jpg

И следующее в обычных фильтрах:
http://i65.fastpic.ru/big/2015/0306/7c/13d9ca4cfea058ef5120b275e6c6b97c.jpg

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Дело в стилях. 100%.
Даже это видно из скриншотов. Стили, которые вы просто скопировали перемешались с уже существующими в системе стилями.
Для отображения фильтров в шаблона из которых вы переделываете используется jquery плагин formstyler, который как раз и стилизует все галочки, делая их <span> и отслеживает нажатие.
Проинспектируйте с помощью firefox и можете сами всё увидеть.
Что касается вашего случая(первая картинка). Вам надо эти галочки скрыть. Например поместив их в скрытый контейнер <div>. Т.к. цвет это обыкновенная ссылка, то вам надо будет просто отловить нажатие на эту ссылку с помощью javascript и затем вызывать у checkbox событие change. Например, если вы используете jquery, то это может выглядеть примерно так.

<script type="text/javascript">
  $(document).ready(function(){ //Когда DOM готов
       $(".block-colors a").on('click',function(){ //Нажатие на ссылку с цветами 
           var parent = $(this).closest('li'); //Обращаемся к лижайшему <li>, он будет родителем от которого искать детей
           var chk = $("input[type='checkbox']",parent); //получили нашу галку
           chk.prop('checked',!chk.prop('checked')); //Сменим состояние галки
           chk.change(); //Сгенерируем событие, что галка изменилась.
       });
  });
</script>

Примерно так.
Вообщем надо немного покопать. Если Вы не сможете самостоятельно выполнить, то лучше обратится к более сильному программисту, либо к нам в платную поддержку. Там небольшие и не долгие изменения.

15

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

1. Качаем модуль цветов здесь.

Ссылка не рабочая

Повысить оценку Понизить оценку

16

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

https://yadi.sk/d/vW-DGpcT3W5L9g

17

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Этот модуль уже не актуален. Вся фильтрация по цветам есть в ReadyScript нативно. Нужно создать характеристику с типом цвет и все.

Повысить оценку Понизить оценку

18

Re: Модуль позволяющий выбирать цвет на сайте и применять фильтр по цвету.

Возможно у кого то старая версия RS.
А так да, необходимость отпала.