FENOM'енальный курс. Часть 8. Выводим цвета и размеры товара, добавляем их в корзину.

Данный урок будет задевать не только конкретные опции, а вообще все опции в целом. Логика их добавления примерно одинакова. Для цвета мы будем использовать платный компонент 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-форма и ее элементы.