Данный урок будет задевать не только конкретные опции, а вообще все опции в целом. Логика их добавления примерно одинакова. Для цвета мы будем использовать платный компонент msOptionsColor из modstore.pro.
Начнем непосредственно с выбора цвета. Для активации вкладки “Цвета” у товаров, нам необходимо перейти в системные настройки и задать значение для ключа msoptionscolor_working_templates – идентификатор шаблона товара. Должно получиться примерно как на скриншоте:
Теперь у нас должна быть активна вкладка “Цвета” у товаров с шаблоном, имеющим id 11 ( в моем случае). Предлагаю вам выбрать товар, жертву экспериментов, на котором мы с вами будем проводить опыты. Сразу напомню, что мы еще будем реализовывать размеры товаров, поэтому желательно выбрать такой товар, где есть и то и другое. Например, кроссовки:
Заметили появившуюся вкладку цвета? Сейчас мы с вами будем с ней работать. Только перед тем как приступить заполните цвета и размеры так же как у меня на скриншоте выше. Заполнили? Отлично! Открываем вкладку цвета и видим, какие именно опции нам необходимо отредактировать:
Кликаем “редактировать” и заполняем соотношение цвета текстового и цвета визуального:
Отлично! Все получилось и цвета можно выводить в карточке товара. За это у нас отвечает сниппет msOptionsColor, который мы вызываем в шаблоне на месте наших цветов товара:
{$_modx->runSnippet('msOptionsColor', [ 'options' => 'color', 'tpl' => '@FILE chunks/color_product.tpl' ])}
И, конечно, нужно создать чанк color_product.tpl:
{foreach $colors as $name => $color} <div class="product-color"> <div class="sub-title">Выберите цвет:</div> <div class="colors"> {foreach $color as $row index=$index} <div class="item form-check form-check-inline"> <input class="form-check-input" type="radio" name="options[{$name}]" value="{$row.value}" {$index ? '' : 'checked'}> {if $row.pattern?} <div> <img alt="" title="{$row.value}" class="img-rounded" style="background-image:url({$row.pattern});width:25px;height:25px;"> </div> {else} <div> <img alt="" title="{$row.value}" class="img-rounded" style="background-color:#{$row.color};width:25px;height:25px;"> </div> {/if} </div> {/foreach} </div> </div> {/foreach}
Отлично! Цвета мы вывели. Приступим к размерам?
Для вывода размеров я использую сниппет getsizes, который производит сортировку значений размеров. Тут тоже важно заметить, что постоянно возникает проблема с сортировкой опций. Сниппет getsizes:
<?php $id = $modx->resource->id; $pdoTools = $modx->getService('pdoTools'); $product = $modx->getObject("msProduct", $id); $sizes = $product->get("size"); if(count($sizes)){ asort($sizes); $row['options'][] = $sizes; $res = $pdoTools->getChunk('@FILE chunks/size_product.tpl', $row); $modx->setPlaceholder("sizes", $res); }
И, конечно, чанк size_product.tpl (обратите внимание как он вызван в API):
{foreach $options as $name => $values} {foreach $values as $value => $val} <span class="pick-size-class {if $value == 0}active{/if}"> <input class="hidden" type="radio" name="options[size]" value="{$val}" id="size[{$val}]" required {$value ? '' : 'checked'}/>{$val} </span> {/foreach} {/foreach}
Как вы успели заметить данный сниппет сортирует опции и выставляет плейсхолдер sizes, который мы можем обработать в шаблоне:
{'@FILE snippets/getsizes.php' | snippet : []} {if $_modx->getPlaceholder('sizes')?} <div class="product-size"> <div class="sub-title">Выберите размер (<a href="#" data-toggle="modal" data-target="#sizetable">уточнить</a>):</div> {$_modx->getPlaceholder('sizes')} </div> {/if}
Блок размеров был написан недостаточно красиво, кто улучшит его и напишет в комментариях свое решение, ждет бонус от меня, конечно, если ваше решение будет иметь право на жизнь.
А теперь вернемся с вами к нашей задаче. В начале статьи я написал, что мы затронем не только конкретные опции, а вообще опции в целом, как их выводить и принцип их работы. Пожалуй, до следующего урока я оставлю данный вопрос открытым, а вам предлагаю посмотреть на сходства размеров и цветов, так же увидеть в чем их различия. Дам маленькую подсказку: HTML-форма и ее элементы.
И тогда его можно будет вызвать вот так:
То есть в параметр «id» передавать идентификатор интересующего нас ресурса.