Элементы дизайна и верстки

Такие стандартные возможности, как добавление товаров в корзину, пересчет корзины с использованием JS и Ajax (без перезагрузки страницы), выбор вариантов товара, всплывающие окошки форм и т.п. уже реализованы в платформе Дигистр. Все это находится в файле скриптов digistr.js, который нужно подключить к своим макетам.

Чтобы все созданные функции работали в вашей теме, нужно добавить соответствующие классы, идентификаторы и атрибуты для HTML элементов страницы.

Отображение цен в валюте сайта

Необходимо создать элемент, с id равным «shop-cart-currency» и параметрами для форматирования цен: format, name, decimals, dsep, tsep. Так скрипты получат информацию, как форматировать цены. Это используется при динамических пересчетах цен (при обновлении количества товара в корзине, например). Чаще всего, это код добавляется возле корзины или в подвале сайта.

<span id="shop-cart-currency" format="{$document.Currency.format}" name="{$document.Currency.sign|default:$document.Currency.name}" decimals="{$document.Currency.decimals}" dsep="{$document.Currency.dsep}" tsep="{$document.Currency.tsep}"></span> 

 

Блок корзины

Следующие классы используются для работы блока корзины.

.cart-count Количество товаров в корзине
.cart-count-label Подпись к количеству (товаров, товар, товара)
.cart-price Отформатированная сумма корзины в валюте сайта
.cart-ajax Перезагружаемый блок, который обновляется при добавлении товара в корзину.
Используется для «маленькой корзины» со списком товаров.
<a href="{url action='shop.cart.index'}" class="dropdown-toggle" data-toggle="dropdown">
  <span class="icon"><i class="fa fa-shopping-cart"></i></span>
  <span class="cart-value">
	  <span class="count cart-count">{$document.Cart.count|default:0}</span>
	  —
	  <span class="count cart-price">{$document.Cart.price_site_format|default:0}</span>
  </span>
</a>
<div class="dropdown-menu cart-ajax">
	{* Текущее состояние корзины *}
	{include file='blocks/cart.tpl'}
</div>

 

Содержание корзины

.cart-isempty Блок, который показывается, когда корзина пуста (нет товаров)
.cart-isnotempty Блок для непустой корзины
.cart-delete

Удаление товара из корзины при клике по данному элементу

Дополнительные атрибуты элемента
productid ID удаляемого товара
delete Селектор для динамического удаления элемента со страницы, например, класс строки
.cart-count-changer

Поле с вводом количества товаров

Дополнительные атрибуты элемента
productid ID удаляемого товара
price Цена товара в валюте сайта без форматирования
productlimit Сколько товаров есть на складе (чтобы нельзя было заказать больше)
update Селектор обновляемой суммы, куда будет записано «итого», равное произведению цены товара на его количество
#order_delivery_id

ID. Выпадающий список выбора способа доставки

Элементы списка (option) имеют следующие атрибуты
price Цена доставки в валюте сайта без форматирования
priceispcnt Указана ли цена в процентах (1 или 0)
pcnt Сумма в основной валюте, которая указана в свойствах доставки (используется как процент надбавки, в случае priceispcnt=1)
freefrom Сумма в валюте сайта без форматирования, при которой доставка бесплатна
showfields Необходимые поля в форме заказа
.cart-delivery-price Отформатированная сумма доставки в валюте сайта
{* Класс pr{$item.id} для удаления строки при удалении товара *}
{ foreach from=$document.Cart.products item=item name=i }
	<tr class="pr{$item.id} {cycle name=ci values='even,odd'} {if $smarty.foreach.i.first}first{elseif $smarty.foreach.i.last}last{/if}">
		<!-- фото -->
		<td>
			{ if !empty($item.Product.photo) }
				<a href="{ $item.Product.url }" class="product-image">{photo _crop=1 _width=100 _height=100 _id=$item.Product.id src=$item.Product.photo title=$item.Product.name alt=$item.Product.name folder=product}</a>
			{ /if }
		</td>
		<!-- название -->
		<td>
			<a href="{ $item.Product.url }">{ $item.Product.name }</a>
			{if !empty($item.ProductVariant.name)}<br>{$item.ProductVariant.name}{/if}
		</td>
		<!-- цена -->
		<td>{ $item.price_site_format }</td>
		<!-- количество -->
		<td>
			{* Класс cart-count-changer с атрибутами для автоматического обновления количества товаров *}
			{if !$_params.shop_checkstock || $item.stock}
				<input name="data[order][product][{ $item.id }]" class="form-control cart-count-changer" type="text" value="{ $item.qty }" price="{ $item.price_site }" productid="{ $item.id }" {if $_params.shop_checkstock}productlimit="{$item.stock}"{/if} update=".pv{$item.id}">
			{else}
				Нет<br><small>на складе</small>
			{/if}
		</td>
		<!-- итого -->
		{* Класс pv{$item.id}, куда запишется итого, как указано в .cart-count-changer атрибуте update *}
		<td><span class="pv{$item.id}">{ $item.total_site_format }</span></td>
		<!-- удалить -->
		{* Класс cart-delete с атрибутами удаления товара и его строки *}
		<td><a class="cart-delete" href="{url action='shop.cart.delete'}/{ $item.id }" productid="{ $item.id }" delete=".pr{$item.id}"><i class="fa fa-trash"></i></a></td>
	</tr>
{ /foreach }
<tr>
	<td colspan="4" class="ta-r">
		{* ID order_delivery_id для динамического обновления способа доставки и полей формы. *}
		{if !empty($delivery[1].Delivery) || ($delivery && $_params.shop_show_one_delivery)}
			<select class="select" id="order_delivery_id" name="data[order][delivery_id]">
				{foreach from=$delivery item=item}
					<option value="{$item.Delivery.id}" price="{$item.Delivery.price_site}" priceispcnt="{$item.Delivery.price_is_pcnt}" pcnt="{$item.Delivery.price}" {if $item.Delivery.free_from_active && $item.Delivery.free_from}freefrom="{$item.Delivery.free_from_site}"{/if} showfields="{$item.Delivery.show_fields}">
						{$item.Delivery.name}{if $item.Delivery.free_from_active && $item.Delivery.free_from} (бесплатно от {$item.Delivery.free_from_site_format}){/if}
					</option>
				{/foreach}
			</select>
		{/if}
	</td>
	<td class="ta-c">
		{* Класс cart-delivery-price для динамической стоимости доставки *}
		<span class="cart-delivery-price">{if !$delivery[0].Delivery.price_site || ($delivery[0].Delivery.free_from_active && ($document.Cart.price_site >= $delivery[0].Delivery.free_from_site))}бесплатно{else}{if $delivery[0].Delivery.price_is_pcnt}{$delivery[0].Delivery.price}%{else}{$delivery[0].Delivery.price_site}{/if}{/if}</span>
	</td>
	<td></td>
</tr>
<tr>
	<td colspan="4" class="ta-r">
		<b>Итого:</b>
	</td>
	<td class="ta-c">
		<b><span class="cart-price">{ $document.Cart.price_site_format }</span></b>
	</td>
	<td></td>
</tr>

 

Добавление в корзину

Кнопки добавления в корзину, избранное и сравнение могут иметь два состояния: товар уже добавлен в соответствующий список или еще не добавлен. Поэтому создается два элемента: первый добавляет товар в список, второй – удаляет. Во время добавления или удаления товаров меняется их видимость на странице (скрываются или показываются соответствующие элементы).

Для корзины часто достаточно только добавления в корзину.

.addtocart

Добавление в корзину по клику

Обязательные атрибуты
productid ID товара, модификации или комплекта
productprice Цена в валюте сайта без форматирования

Дополнительные атрибуты
count Селектор для количества добавляемого товара в корзину. Обычно используется только в карточке товара и является полем для ввода числа.
productlimit Сколько товаров на складе, чтобы нельзя было указать количество больше указанного
show Селектор показываемого элемента (например, показать кнопку добавленного в корзину состояния)
hide Селектор элемента, который нужно скрыть со страницы (например, кнопку добавления, когда показана кнопка добавленного состояния)

Полная версия

{* Если указывается ссылка без JS, то нужен nofollow *}
{* Где-то рядом с кнопкой есть <input class="pc{$item.Product.id}"> для количества *}
{if $item.CatalogStatus.is_orderable || empty($item.CatalogStatus.alias)}
	<a href="{url action='shop.cart.add'}/{$item.Product.id}/1" rel="nofollow"
		class="addtocart tc{$item.Product.id} {if !empty($document.Cart.ids) && in_array($item.Product.id, $document.Cart.ids)}d-none{/if}"
		show=".ic{$item.Product.id}"
		hide=".tc{$item.Product.id}"
		productid="{$item.Product.id}"
		productprice="{$item.Product.price_site}"
		count=".pc{$item.Product.id}"
		{if $_params.shop_checkstock}productlimit="{$item.Product.stock}"{/if}>
		В корзину
	</a>
	{* Второе состояние - переход в корзину по ссылке *}
	<a href="{url action='shop.cart.index'}" rel="nofollow"
		class="incart ic{$item.Product.id} {if empty($document.Cart.ids) || !in_array($item.Product.id, $document.Cart.ids)}d-none{/if}">
		<span>В корзине →</span>
	</a>
{/if}

Обычный способ

{if $item.CatalogStatus.is_orderable || empty($item.CatalogStatus.alias)}
	<a href="{url action='shop.cart.add'}/{$item.Product.id}/1" rel="nofollow"
		class="addtocart tc{$item.Product.id} {if !empty($document.Cart.ids) && in_array($item.Product.id, $document.Cart.ids)}d-none{/if}"
		productid="{$item.Product.id}"
		productprice="{$item.Product.price_site}">
		В корзину
	</a>
{/if}

Дополнительно на странице товара используются атрибуты count и productlimit.

 

Добавление в избранное и сравнение

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

.wishlist-add

Добавление в избранное по клику

Атрибуты
productid ID товара, модификации или комплекта
show Селектор показываемого элемента
hide Селектор скрываемого элемента
.wishlist-delete

Удаление из избранного

Атрибуты
productid ID товара, модификации или комплекта
show Селектор показываемого элемента
hide Селектор скрываемого элемента
.wishlist-hide Вспомогательный класс, который добавляет display:none в стили элемента и таким образом скрывает неактивное состояние элемента

С помощью атрибутов show и hide обеспечивается показ соответствующего состояния товара в списке (добавлен или нет).

Аналогично для сравнения используются классы compare-add, compare-delete, compare-hide с атрибутами productid, show и hide.

{if m('wishlist')}
	<a title="В избранное" class=" {if in_array($item.Product.id, $document.WishList.ids)}wishlist-hide{/if} wishlist-add twls{$item.Product.id}" productid="{$item.Product.id}" show=".twlh{$item.Product.id}" hide=".twls{$item.Product.id}"><i class="fa fa-heart"></i></a>
	<a title="Удалить из избранного" class="{if !in_array($item.Product.id, $document.WishList.ids)}wishlist-hide{/if} wishlist-delete twlh{$item.Product.id}" productid="{$item.Product.id}" show=".twls{$item.Product.id}" hide=".twlh{$item.Product.id}"><i class="fa fa-heart"></i></a>
{/if}

{if m('compare')}
	<a title="Сравнить" class="{if in_array($item.Product.id, $document.CompareList.ids)}compare-hide{/if} compare-add tcmps{$item.Product.id}" productid="{$item.Product.id}" show=".tcmph{$item.Product.id}" hide=".tcmps{$item.Product.id}"><i class="fa fa-compress"></i></a>
	<a title="Удалить из сравнения" class="{if !in_array($item.Product.id, $document.CompareList.ids)}compare-hide{/if} compare-delete tcmph{$item.Product.id}" productid="{$item.Product.id}" show=".tcmps{$item.Product.id}" hide=".tcmph{$item.Product.id}"><i class="fa fa-compress"></i></a>
{/if}

Часто в верстке кнопки добавления в избранное и сравнения созданы элементом <span> или <a>. При смене видимости этих элементов на странице с помощью show()/hide() в jQuery их свойство display меняется на inline. Но в верстке изначальное состояние равно inline-block. Так кнопки добавленного в корзину товара искажаются. Чтобы этого избежать, нужно менять стиль на корректный. Для этого в файлы скриптов нужно добавить следующие строки.

jQuery(document).ready(function($)
{
	/* Корректное отображение для span при добавлении в избранное и сравнение */
	$('.wishlist-add, .wishlist-delete, .compare-delete, .compare-add').click(function(){
		$( $(this).attr('show') ).css({'display' : 'inline-block'});
	});
});

 

Быстрый просмотр

Для быстрого просмотра нужно указать ссылку на страницу товара с URL параметром «?quickview=1». Чтобы ссылка открывалась во всплывающем окошке, вместо отдельной страницы, нужно добавить ей класс «quick-view-button». Сам шаблон для быстрого просмотра должен быть «catalog/quickview.tpl».

{if m('quickview')}
	<a class="quick-view-button" href="{ $item.Product.url }?quickview=1">Быстрый просмотр</a>
{/if}

 

Всплывающие формы заказа звонка, быстрой покупки и т.п.

Чтобы показать всплывающее окно с формой, необходимо добавить элементу класс «user-request». В атрибуте type указывается, какую форму нужно показать. Доступны следующие значения.

preorder Предзаказ *
quickbuy Быстрая покупка (создает новый заказ) *
product Быстрый заказ (только заявка с названием товара) *
bargain Торг по цене *
decrease Уведомление о снижении цены *
callback Заказ звонка
sendidea Предложение идеи
quickfeedback Обратная связь
messagetotop Сообщение руководству
pricerequest Запрос прайса
consultant Заявка на консультацию

Для типов, отмеченных звездочкой *, требуется атрибут productid – ID товара для которого отправляется заявка.

Дополнительные атрибуты boxwidth и boxheight позволяют указать произвольные размеры для формы. Это может понадобиться, если размеры полей формы и кнопка отправки сильно отличаются от стандартных и форма не вмещается в окно.

{if m('callback')}<a class="dashed user-request" type="callback" boxwidth="320" boxheight="500">Заказать звонок</a>{/if}
{if m('quickbuy')}<a class="dashed user-request" type="quickbuy" productid="{$document.Product.id}">Купить в 1 клик</a>{/if}

Класс dashed подчеркивает пунктиром ссылку.

 

Поиск

Дополнительные классы и элементы используются для поиска с автодополнением. Для обычного поиска такие классы не требуются.

Для простого автодополнения используется класс «search-autocomplete-input» для поля ввода запроса.

<form action="{url action='catalog.catalog.search'}" method="get">
	<input name="filter[q]" class="{if m('autocomplete')}search-autocomplete-input{/if}" type="search" placeholder="Поиск по каталогу...">
	<button class="search-submit"><i class="fa fa-search"></i></button>
</form>

Для расширенного автодополнения используется класс «ajaxsearch-input» для поля ввода. Также необходимо добавить элемент с id равным «ajaxsearch-result» для отображения результатов поиска. Этот элемент, вместе с полем ввода нужно обернуть в класс «ajaxsearch-area» чтобы спозиционировать показ результатов поиска возле поля ввода.

<form action="{url action='catalog.catalog.search'}" method="get" class="ajaxsearch-area">
	<input name="filter[q]" class="{if m('autocomplete.pro')}ajaxsearch-input{/if}" type="search" placeholder="Поиск по каталогу...">
	<button class="search-submit"><i class="fa fa-search"></i></button>
	{if m('autocomplete.pro')}<div id="ajaxsearch-result"></div>{/if}
</form>

Попробуйте 14 дней все бесплатно

.digistr.ru Придумать другой адрес
Свой домен можно добавить после регистрации
Пароли для магазина придут на этот e-mail
Секундочку, пожалуйста, магазин создается...
Как найти прибыльную нишу для магазина?
Приходите на бесплатный вебинар!