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

Шаблон MAGAZINE вы можете скачать по ссылке.

Данный урок будет задевать не только конкретные опции, а вообще все опции в целом. Логика их добавления примерно одинакова. Для цвета мы будем использовать платный компонент msOptionsColor из modstore.pro.


Начнем непосредственно с выбора цвета. Для активации вкладки “Цвета” у товаров, нам необходимо перейти в системные настройки и задать значение для ключа msoptionscolor_working_templates – идентификатор шаблона товара. Должно получиться примерно как на скриншоте:


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


Теперь у нас должна быть активна вкладка “Цвета” у товаров с шаблоном, имеющим id 11 ( в моем случае). Предлагаю вам выбрать товар, жертву экспериментов, на котором мы с вами будем проводить опыты. Сразу напомню, что мы еще будем реализовывать размеры товаров, поэтому желательно выбрать такой товар, где есть и то и другое. Например, кроссовки:


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


Заметили появившуюся вкладку цвета? Сейчас мы с вами будем с ней работать. Только перед тем как приступить заполните цвета и размеры так же как у меня на скриншоте выше. Заполнили? Отлично! Открываем вкладку цвета и видим, какие именно опции нам необходимо отредактировать:


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


Кликаем “редактировать” и заполняем соотношение цвета текстового и цвета визуального:


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

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


Отлично! Все получилось и цвета можно выводить в карточке товара. За это у нас отвечает сниппет 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-форма и ее элементы.

Оцените статью:

Проголосовало: 28

Комментарии ()

  1. Дмитрий 10 марта 2019, 02:44 # 0
    По ссылке приведенной Вами, для тестирования, данный компонент отсутствует, к сожалению…
    1. Алексей 29 апреля 2019, 16:30(Комментарий был изменён) # 0
      \
      1. Петропавловский Артем 29 апреля 2019, 17:00 # 0
        Нужно модернизировать скрипт вот так:
        <?php
        if(!$id){
            $id = $modx->resource->id;
        }
        
        $pdoTools = $modx->getService("pdoTools");
        $product = $modx->getObject("msProduct", $id);
        if ($product){
        	$sizes = $product->get("size");
        	if(count($sizes)){
        		asort($sizes);
        		$row['options'][] = $sizes;
        		$res = $pdoTools->getChunk("@FILE chunks/tpl_sizes.tpl", $row);
        		//$modx->setPlacegolder("sizes", $res);
        		return $res;
        	}
        }
        
        И тогда его можно будет вызвать вот так:
        {$_modx->runSnippet("@FILE snippets/get_sizes.php", ['id' => $id])}
        То есть в параметр «id» передавать идентификатор интересующего нас ресурса.

      Написать комментарий

      Наши клиенты

      Многие компании уже доверяют нам. Будьте в их числе!

      Хотите реализовать проект?

      Контакты

      Напишите нам - мы расскажем вам много интересного!


      Пермь, ул. Крупской 34, офис 510