Общие данные и элементы
Элементы дизайна и верстки
Такие стандартные возможности, как добавление товаров в корзину, пересчет корзины с использованием 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 |
Удаление товара из корзины при клике по данному элементу Дополнительные атрибуты элемента
|
||||||||||
| .cart-count-changer |
Поле с вводом количества товаров Дополнительные атрибуты элемента
|
||||||||||
| #order_delivery_id |
ID. Выпадающий список выбора способа доставки Элементы списка (option) имеют следующие атрибуты
|
||||||||||
| .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 |
Добавление в корзину по клику Обязательные атрибуты
Дополнительные атрибуты
|
Полная версия
{* Если указывается ссылка без 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 |
Добавление в избранное по клику Атрибуты
|
||||||
| .wishlist-delete |
Удаление из избранного Атрибуты
|
||||||
| .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>