Урок 53. Шаблон вид товара в каталоге

Основная цель

Основная цель блоков с товарами в каталоге - показать пользователю, что это именно тот товар, который он ищет (или может быть интересен/выгоден), а также предоставить возможность узнать больше или добавить его в корзину.

Исходя из этого, можно сформировать список вопросов посетителя, на которые потребуется ответить:

Некоторые вопросы затрагивались в прошлом уроке.

Задачи

Для страницы каталога существует ряд задач, выполнение которых поможет повлиять на итоговую величину конверсии:

Шаблон

Вспоминаем урок 46. Товар в интернет магазине может располагаться на разных страницах. В этом уроке мы настроим вид товара одинаковый для всех страниц:

Вернемся к уроку 11, чтобы понять, как можно расположить товары на странице каталога:

Блоки с товарами располагаются в $BODY$ страниц каталога (или других). При этом они обернуты в div с id="goods_cont" и div с class="goods-list". При этом каждый товар обернут в div с классом .list-item. Чтобы стало понятнее, взгляните на изображение:

И код:

<-- Начало $BODY$ -->
<div id="goods_cont">
 <div class="goods-list">
 <-- Блок с товаром №1 -->
 <div class="list-item" id="..."> Код товара №1 из шаблона "Вид товара в каталоге" </div>
 <-- Блок с товаром №2 -->
 <div class="list-item" id="..."> Код товара №2 из шаблона "Вид товара в каталоге" </div>
 ...
 </div>
</div>
<-- Окончание $BODY$ -->

В случаях, когда в настройках указано, что товары должны выводиться в 2 и более колонки, верстка меняется на табличную с атрибутом width для ячеек td.

Чтобы перейти к управлению шаблоном вид товаров в каталоге: Панель управления - Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите соответствующий шаблон (он обозначен зеленым цветом):

Обратите внимание, шаблоны, которые обозначены зеленым цветом представляют из себя часть страницы. Они не должны содержать тегов html и body, так как встраиваются в уже существующую страницу. Пример шаблона:

Перейдем к решению наших задач.

Чтобы выделить область с товарами, нужно использовать CSS, а именно Панель управления - Дизайн - Управление дизайном (шаблоны). На открывшейся странице в блоке "Интернет магазин" выберите "Таблицы стилей (CSS)". В ней добавьте или исправьте строку для класса .goods-list. Можно выделить цвет фона с помощью background-color, установить border или задать отступ с помощью margin. Пример:

.goods-list {
 background-color: #e5e5e5;
 margin: 20px;
}

Отделить товары друг от друга поможет класс .list-item. Например:

.list-item {
 border: 1px solid #cccccc;
 margin: 20px;
}

Чтобы представить большие четки фотографии используйте в шаблоне $PHOTO$ или $THUMB$. Задать размеры этих изображений сможете в Панель управления - Интернет-магазин - Настройки модуля. Пролистайте до пункта "Настройка загрузчика изображений":

Сделать изображения ссылкой можно так:

<a href="$ENTRY_URL$" title="Купить $NAME$" >
 <img src="$THUMB$" alt="$NAME$"/>
</a>

Покажите только нужную информацию с помощью переменных товара. Это могут быть производитель $BRAND$ или дополнительное поле $OTHER1$.

Добавить цену для сравнения можно за счет $PRICE_OLD_RAW$. Делается так:

<? $PRICE_OLD_RAW$?>
 <p>Старая цена $PRICE_OLD$</p>
<?endif?>
<p> Наша цена $PRICE$ </p>

Когда протестируете свой каталог и решите добавить кнопку "В корзину" на страницы категорий, помните, что это должен быть $2BASKET$ или $2BASKET_Q$. При использовании опций товара размещайте в шаблоне $OPTIONS$ (урок про опции).

Ознакомьтесь с переменными, которые действуют в шаблоне. В целом для блока товара действуют все переменные, которые можно задать для товара (как это делается, я говорил в 10-ом уроке).

Вот некоторые переменные, о которых ранее не упоминалось:

• $STOCK$ и $STOCK_TOTAL$ - используются для скрытия тех товаров, которых нет в наличии. Пример: <?$STOCK$?>Вид товара в каталоге<?endif?>;
• $ENTRY_URL$ - ссылка на товар. Используется для кнопок "Подробнее", изображений и текстовых ссылок;
• $BLOCK_PREF$ - переменная, которая обозначает место вывода товара. Пример: код <?$BLOCK_PREF$ = 'all'?>Сообщение<?endif?> покажет "Сообщение" на странице всех товаров ("all"), но при этом на других страницах в блоках товаров не выведет ничего;
• $BUY_NOW$ - кнопка "Купить сейчас". Не рекомендуется использовать для блоков товаров в каталоге, т.к. после нажатия добавляет товар в корзину и переадресовывает на страницу оформления заказа. Хорошо работает для страниц дорогих товаров (об этом в следующем уроке);
• $IS_IN_BASKET$ - сообщает о том, что данный товар уже добавлен в корзину. Пример: <?if $IS_IN_BASKET$?>Товар уже в корзине<?endif?>;
• $2WISHLIST$, $IS_IN_WISHLIST$ - переменные для работы со списком желаний.