3. Отображение товаров

3.1. Карточка товара

Карточки товаров отображаются под соответствующими категориями товаров. Вид карточки зависит от следующих настроек:

Рисунок 19. Карточка товара с кнопкой добавления в корзину

При нажатии на кнопку “В корзину” товар будет добавлен в корзину, откуда клиент сможет завершить оформление заказа (см. 5.2. Оформление заказа из корзины). Также срабатывает событие достижения цели Яндекс Метрики “Клик на Добавить в корзину” (см. 11.2.5.5. Идентификатор цели для Яндекс.Метрики – Клик на Добавить в корзину).

Если установлен режим “Быстрый заказ”, карточка товара будет содержать лишь кнопку “Купить”:

Рисунок 20. Карточка товара с кнопкой Купить

При нажатии на кнопку Купить товар также добавляется в корзину, но при этом дополнительно открывается форма, где клиент сразу может оставить контактные данные и оформить заказ (см. 5.1. Оформление быстрого заказ). Также срабатывает событие достижения цели Яндекс Метрики “Клик на Купить с виджета товара (при использовании режима быстрого заказа)” (см. 11.2.5.14. Идентификатор цели для Яндекс.Метрики – Клик на Купить с виджета товара (при использовании режима быстрого заказа)).

Для более подробной информации о том, как происходит обработка заказов в режимах “Через корзину” и “Быстрый заказ”, см. 11.2.8.1. Режим захвата заказов.

Основные элементы карточки товара:

C:\Users\пользователь\AppData\Local\Temp\fla333C.tmp\Snapshot.png

Рисунок 21. Карточка товара

  1. Изображение– для карточки будет использовано изображение товара, которое указано первым (см. 11.4. Управление товарами)

  2. Название

  3. Цена – указывается вместе с остальными свойствами товара (см. 11.4. Управление товарами). Валюта цен устанавливается для всех цен в магазине (см. 11.2.8.3. Валюта цен)

  4. Индикатор наличия товара на складе – см. настройки 11.2.6. Карточка товара. Если товар в наличии отображается зеленым цветом, в противоположном случае – оранжевым:

Рисунок 22. Карточка товара с индикатором На заказ

  1. Кнопка Купить либо “В корзину” – в зависимости от настройки 11.2.8.1. Режим захвата заказов (см. выше).

В зависимости от настроек родительской категории (см. 11.3. Управление категориями товаров) отображаются 3, 4 или 5 карточек товаров в строке:

Рисунок 23. 3 товара в строке

4 товара в строке:

Рисунок 24. 4 товара в строке

5 товаров в строке:

Рисунок 25. 5 товаров в строке

3.2. Страница с деталями товара

Клиент магазина может перейти на страницу с деталями товара из следующих страниц:

Основные элементы страницы с деталями товара:

C:\Users\пользователь\AppData\Local\Temp\flaE659.tmp\Snapshot.png

Рисунок 26. Страница с деталями товара

  1. Бредкрамб – показывает путь к текущему товару. Содержит ссылку на страницу категории, из которой клиент перешел на страницу товара. Если тот же товар был открыт со страницы другой категории, бредкрамб будет отображать название соответствующей категории. Также навигация по товарам в пределах категории (посредством ссылок Предыдущий товар/Следующий товар) будет осуществляться именно по товарам текущей категории. На следующем изображении тот же товар был открыт со страницы другой категории “Категория 1”:

Рисунок 27. Страница с деталями товара, открытая из категории Категория 1

  1. Название товара – устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами)

  2. Следующий/Предыдущий товар – навигация по товарам в пределах выбранной категории (см. выше). Отображает над деталями товара и под ними

  3. Изображение - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами). Если у товара несколько изображений, они будут отображаться под основным изображением (которое было добавлено первым) с полосой прокрутки. Клиент может щелкнуть на изображение – оно откроется в отдельном всплывающем окне:

Рисунок 28. Изображение товара во всплывающем окне

  1. Цена - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами)

  2. Валюта цены – устанавливается для всех цен магазина в настройках (см. 11.2.8.3. Валюта цен)

  3. Индикатор наличия товара на складе – если количество товара на складе больше нуля (количество устанавливается вместе с остальным свойствами товара - см. 11.4. Управление товарами), отображает статус “В наличии”. В противном случае отображает статус “На заказ”. Данный индикатор можно отключить в настройках – см. 11.2.6.2. Показывать индикатор статус (в наличии/на заказ) на карточке товара

  4. Купить – по аналогии с карточкой товара (см. 3.1. Карточка товара) добавляет товар в корзину и открывает форму быстрого заказа. Также срабатывает событие достижения цели Яндекс Метрики “Клик на Купить со страницы товара (при использовании режима быстрого заказа)” (см. 11.2.5.15. Идентификатор цели для Яндекс.Метрики – Клик на Купить со страницы товара (при использовании режима быстрого заказа)).

    Так же, как и для карточки товара, в зависимости от настройки 11.2.8.1. Режим захвата заказов вместо кнопки Купить может располагаться кнопки Купить и “В корзину”:

Рисунок 29. Ценник товара при режиме захвата заказов через корзину

В данном случае при нажатии Купить открывается окно оформления заказа (см. 5.2. Оформление заказа из корзины). При этом срабатывает событие достижения цели Яндекс Метрики “Клик на Заказать без корзины” (см. 11.2.5.6. Идентификатор цели для Яндекс.Метрики – Клик на Заказать без корзины)

  1. Лот - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами)

  2. Артикул - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами)

  3. Производитель - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами). После наименования производителя в скобках отображается страна производителя (если указана), которая также устанавливается в свойствах товара

  4. Описание - устанавливается вместе с остальным свойствами товара (см. 11.4. Управление товарами). Может содержать элементы форматирования: картинки, встроенные видео, шрифт, ссылки и т.п.

Заголовок страницы товара состоит из доменного имени магазина и названия товара. Для улучшения позиции страницы в поисковой выдаче можно переопределить заголовок страницы для отдельных товаров (см. 11.4. Управление товарами). Кроме заголовка HTML разметка страницы также содержит каноническую ссылку на саму себя – это улучшает вес магазина в поисковой выдаче. Для более подробной информации см. 7. SEO - оптимизация для поисковых систем.

Также в зависимости от настроек интеграции (см. 11.2.4. Интеграция) страница с деталями товара может содержать кнопки Мне нравится популярных социальных сетей: ВКонтакте, Facebook. Ниже приведен пример карточки товара с включенной интеграцией:

Рисунок 30. Пример карточки товара с включенной интеграцией

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

Рисунок 31. Добавление комментариев ВКонтакте на страницу с деталями товара