Карточка товара на Fenom MODx Revo miniShop2

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

В данном уроке у нас с вами не получится сразу реализовать карточку товара от начала и до конца. Мы сделаем только основные моменты.

За вывод галереи товара у нас отвечает сниппет msGallery. Давайте создадим для него чанк gallery_big.tpl, где у нас будут выводиться большие картинки (большой слайдер):

{if $files?}
    {foreach $files as $file}
        <!-- item -->
        <div class="item">
            <a href="{$file['url']}" data-fancybox="gal">
                <img src="{$file['url']}" alt="{$_modx->resource.pagetitle | htmlent}" itemprop="image">
            </a>
        </div>
        <!-- / item -->
    {/foreach}
{else}
<!-- item -->
<div class="item">
    <a href="{$_modx->getPlaceholder('+noimage')}" data-fancybox="gal">
        <img src="{$_modx->getPlaceholder('+noimage')}" alt="{$_modx->resource.pagetitle | htmlent}" itemprop="image">
    </a>
</div>
<!-- / item -->
{/if}

И сразу создадим чанк для маленькой галереи gallery_small.tpl:

{if $files?}
    {foreach $files as $file}
        <!-- item -->
        <div class="item">
            <img src="{$file['url']}" alt="{$_modx->resource.pagetitle | htmlent}">
        </div>
        <!-- / item -->
    {/foreach}
{else}
<!-- item -->
<div class="item">
    <img src="{$_modx->getPlaceholder('+noimage')}" alt="{$_modx->resource.pagetitle | htmlent}">
</div>
<!-- / item -->
{/if}

И блок с галереей в шаблоне карточки товара у нас принял следующий вид:

<div class="product-gallery">
	<div class="bigger">
		<div class="big-gallery owl-carousel">
			{$_modx->runSnippet('msGallery', [
				'tpl' => '@FILE chunks/gallery_big.tpl'
			])}
		</div>
		{if $_pls["vendor.logo"]}
			<img src="{$_pls["vendor.logo"]}" class="vendor" alt="{$_pls["vendor.name"]}">
		{/if}
	</div>
	<!-- small gal -->
	<div class="small-gallery owl-carousel">
		{$_modx->runSnippet('msGallery', [
			'tpl' => '@FILE chunks/gallery_small.tpl'
		])}
	</div>
	<!-- / small gal -->
</div>

Я дополнительно еще вывел логотип производителя, чтобы закончить с этой частью страницы. Вместо тега H1 вставляем знакомую нам конструкцию:

{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}

Также нам нужно вывести основные опции товара, которые мы задавали у категорий родителей. Для этого создадим чанк main_opts_product.tpl:

{foreach $options as $option}
	<div class="item inliner vam">
	  <div class="label">
		<span>{$option.caption}</span>
	  </div>
	  <div class="value">
		<span>
		{if $option.value is array}
			{$option.value | join : ', '}
			{if $option.measure_unit?}
				{$option.measure_unit}
			{/if}
		{else}
			{$option.value}
			{if $option.measure_unit?}
				{$option.measure_unit}
			{/if}
		{/if}
		</span>
	  </div>
	</div>
{/foreach}

И выведем с помошью сниппета msProductOptions вместе с другими параметрами. Я привожу вам код правой части шаблона карточки товара (цвета и размеры мы с вами пока не трогаем):

<div class="col-lg-6">
	<div class="product-description">
		<div class="description">
			<p itemprop="description">{$_modx->resource.introtext}</p>
		</div>
		<div class="characters">
			<!-- item -->
			{if $_pls['vendor.name']}
				<div class="item inliner vam">
					<div class="label">
					  <span>Производитель</span>
					</div>
					<div class="value">
					  <span>{$_pls['vendor.name']}</span>
					</div>
				</div>
			{/if}
			{if $_pls['made_in']}
				<div class="item inliner vam">
					<div class="label">
					  <span>Страна сборки</span>
					</div>
					<div class="value">
					  <span>{$_pls['made_in']}</span>
					</div>
				</div>
			{/if}
			{if $_pls['article']}
				<div class="item inliner vam">
					<div class="label">
					  <span>Артикул</span>
					</div>
					<div class="value">
					  <span>{$_pls['article']}</span>
					</div>
				</div>
			{/if}
			{$_modx->runSnippet('msProductOptions', [
				'onlyOptions' => $_modx->resource.parent | resource: 'options',
				'product' => $id,
				'tpl' => '@FILE chunks/main_opts_product.tpl'
			])}
		</div>
		<form class="ms2_form" method="post">
		<div class="addition-options">
			<div class="product-color">
				<div class="sub-title">Выберите цвет:</div>
				<div class="colors">
					<div class="item radio-inline pull-left">
						<label class="input-parent">
<input type="radio" name="options[color]" value="Розовый" checked="">
						<div>
	<img alt="" title="Розовый" class="img-rounded" style="background-color:#ee9090;width:25px;height:25px;">
</div>
					</label>
					</div>
					<div class="item radio-inline pull-left">
						<label class="input-parent">
<input type="radio" name="options[color]" value="Серый">
						<div>
	<img alt="" title="Серый" class="img-rounded" style="background-color:#c2c2c2;width:25px;height:25px;">
</div>
					</label>
					</div>
				</div>
			</div>
			<div class="product-size">
				<div class="sub-title">Выберите размер (<a href="#" data-toggle="modal" data-target="#sizetable">уточнить</a>):</div>

				<span class="pick-size-class active">
<input class="hidden" type="radio" name="options[size]" value="38" id="size[38]" required="" checked="">38</span>


				<span class="pick-size-class ">
<input class="hidden" type="radio" name="options[size]" value="40" id="size[40]" required="">40</span>


				<span class="pick-size-class ">
<input class="hidden" type="radio" name="options[size]" value="42" id="size[42]" required="">42</span>


				<span class="pick-size-class ">
<input class="hidden" type="radio" name="options[size]" value="43" id="size[43]" required="">43</span>


			</div>

		</div>
		<div class="product-form">
			<input type="hidden" name="id" value="[[*id]]">
			  <div class="row inliner vam">
				<div class="col-6">
				  <div class="qnt inliner le-quantity vam">
					<button type="button" class="btn btn--count minus">-</button>
					<input type="text" name="count" class="counter" value="1" readonly="">
					<button type="button" class="btn btn--count plus">+</button>
				  </div>
				</div>
				<div class="col-6">
				  <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
					<meta itemprop="priceCurrency" content="RUB">
					<meta itemprop="price" content="{$_pls['price'] | replace : " " : ""}.00">
					<span>{$_pls['price']} <i class="fa fa-ruble"></i></span>
				  </div>
				</div>
			  </div>
			  <div class="row inliner vam buttons">
				<div class="col-sm-4 col-6">
					<button type="submit" name="ms2_action" value="cart/add"  class="btn btn-blue btn-rounded big">В корзину</button>
				</div>
				<div class="col-sm-4 col-6">
					<a href="#" class="compare"><span>Сравнить</span></a>
				</div>
				<div class="col-sm-4 col-6">
					<a href="#" class="one-click"><span>Купить в один клик</span></a>
				</div>
			</div>
		</div>
		</form>
	</div>
</div>

Отлично! Теперь у нас заработало добавление в корзину из карточки товара, правда пока без опций (цвет и размер). На этом мы с вами пока закончим.