Страница товара

Страница товара Slate объединяет фотографии, цену, выбор варианта, условия покупки и подробные сведения. Она доступна при подключённом Shop-Script; конфигурация сайта без магазина может обходиться без товарных страниц. Сами товары, артикулы, остатки и услуги задаются в приложении «Магазин», а тема определяет их расположение и оформление.

Начните с одного характерного товара: с несколькими фотографиями, вариантами и заполненными характеристиками. На нём проще оценить макет, чем на карточке с единственной ценой и пустым описанием.

Макет и состав страницы

В разделе «Страница товара → Макет и галерея» поле «Тип макета» предлагает три колонки или две колонки с широким фото. В трёхколоночном представлении фотография, блок покупки и сведения о товаре располагаются отдельно. При двух колонках фотография становится крупнее, а покупка и сведения идут одной колонкой рядом с ней. Поле «Название товара» ставит заголовок над всей страницей или внутри колонки покупки; в обоих случаях название выводится один раз.

Состав центральной и правой колонок настраивается списками. Можно менять порядок и включать нужные части: название, рейтинг, выбор артикула, услуги, краткое описание, характеристики, ссылки на маркетплейсы и соцсети, уведомление и другие доступные блоки. Вместо стандартного блока можно вывести свой: создайте блок в приложении «Сайт → Блоки» и впишите его код в поле «Свой блок». Пустые блоки не оставляют рамок и промежутков, а пустая правая колонка не занимает место. Если выбран вид названия «В колонке», сохраните блок «Название» в её составе; для товара с вариантами сохраните «Выбор артикула». Блоки, которым требуется отдельный плагин, работают при наличии и включении этого плагина.

По умолчанию первым в правой колонке стоит «Карточка покупки»: цена, наличие, количество, кнопки покупки и преимущества в одной рамке. Её можно перенести в центральную колонку тем же списком. Что показывать внутри карточки — бейджи, наличие, преимущества — выбирается в «Страница товара → Блоки товара → Карточка покупки». Галерея и правая колонка могут оставаться на месте, пока покупатель прокручивает страницу; для этого есть настройки «Галерея следует за прокруткой» и «Правая колонка следует за прокруткой».

Над товаром может стоять строка меню товара: оценка со ссылкой на отзывы, видео, «В избранное», «Сравнить», бейджи, бренд и «Поделиться». Она расположена под названием и включается в «Страница товара → Верхняя строка и панель покупки → Навигация по товару» настройкой «Показывать меню товара»; в списке «Состав меню» меняется порядок и можно добавить ссылки на описание, характеристики, отзывы и подборки или свой блок из «Сайт → Блоки». Ссылка на раздел открывает нужную вкладку и прокручивает к ней.

На телефоне и планшете по умолчанию включён отдельный состав: сначала фото, затем название, цена, артикул, выбор варианта, наличие и остальные включённые блоки. Порядок и видимость задайте в «Мобильная версия → Карточка товара → Состав страницы товара»: флажок «Свой состав на телефоне» и список «Состав». Если выключить флажок, используется состав компьютера. Там же отдельно включаются меню товара, кнопки «В избранное» и «Сравнить», бейджи и состав расширенного окна товара. Кнопка покупки по умолчанию закреплена снизу с первого экрана.

Посадочная страница товара

Для особого товара предусмотрен вид «Посадочная». Первый экран содержит фото, название, цену, выбор варианта и покупку, а ниже во всю ширину идут блоки темы — так же, как на обычной странице сайта. Под блоками остаются отзывы о товаре. Корзина, варианты и отзывы работают как на обычной товарной странице.

Обычно посадочную включают у одного товара, а не у всего ассортимента:

1. В «Магазине» у товара добавьте дополнительный параметр variant__product_layout=02-landing.
2. Создайте у товара опубликованную подстраницу с адресом landing и разместите в её тексте блоки темы. Скрытую подстраницу тема не показывает.
3. Откройте товар и проверьте первый экран, блоки и отзывы.

Тот же параметр у категории делает посадочными все её товары, а поле «Вид страницы товара» в «Страница товара → Макет и галерея» — все товары магазина. Другой адрес подстраницы и скрытие отзывов задаются дополнительными параметрами товара; они перечислены в статье «Глобальные и дополнительные параметры». Если подстраница не найдена, товар показывается обычной страницей с описанием и отзывами.

Фотографии и варианты товара

«Вид галереи» предлагает ленту — большое фото с миниатюрами — или плитку со всеми фотографиями сразу. Галерея сочетается с любым макетом. Можно выбрать расположение миниатюр, пропорции фотографий и способ их размещения внутри кадра. Число видимых миниатюр регулируется; остальные фотографии открываются кнопкой «+N» на последней миниатюре.

Клик по фотографии открывает просмотр поверх страницы: миниатюры, счётчик, листание кнопками, клавишами и свайпом. Фото можно увеличить колесом мыши или щипком на телефоне и перемещать внутри окна. После закрытия галерея остаётся на последнем просмотренном кадре. Если у товара указано видео и его показ включён, в галерее появляется видеослайд; видео открывается в этом же просмотре. Выбор артикула может переключить галерею на его фотографию, если такая фотография назначена в магазине.

Настройка «Фото нескольких размеров» позволяет браузеру загружать фото подходящего размера, и на телефоне страница открывается быстрее. Для неё в настройках изображений магазина нужны миниатюры 400x0, 750x0 и 970x0 либо создание миниатюр по запросу. Если таких размеров нет, выключите настройку.

«Чёткие фото на экранах высокой плотности» добавляет фото шириной 1300 пикселей для Retina-экранов и большинства телефонов: без него главное фото на таких экранах слегка размыто. По умолчанию настройка выключена. Включайте её, только если магазин отдаёт такой размер — предел размера изображения в конфигурации магазина должен быть не меньше 1300 пикселей, иначе фото не загрузятся.

Варианты товара зависят от его настройки в Shop-Script: покупатель выбирает артикул или сочетание характеристик. В «Страница товара → Блоки товара → Выбор артикула» задаётся, показывать значения кнопками или выпадающим списком, как отмечать недоступные сочетания и показывать ли фото артикула. При выборе пересчитываются связанные с вариантом сведения, включая цену, скидку и доступность, а включённая по умолчанию настройка «Менять адрес страницы при выборе» добавляет к адресу ?sku= с номером выбранного артикула. Такой адрес можно скопировать из адресной строки и отправить покупателю: товар откроется с этим вариантом. Проверьте каждый продаваемый вариант, особенно если у него отличаются остаток или изображение.

Фото артикула для товаров с выбором по названию показывается одним из способов: без фото, маленьким фото в кнопке («Мини») или карточками по 3 или 4 в ряд. Карточка — это плитка с фото варианта, названием и ценой; если у товара включены единицы измерения, под ценой видна цена за единицу, например «125 ₽/шт.» у упаковки из 12 бутылок. У варианта со старой ценой на карточке появляется плашка «Выгода N%». Если у варианта нет своего фото, на карточке будет главное фото товара. На телефоне карточки стоят по две в ряд.

Блок «Группы товаров (плагин)» включается в списке «Центральная колонка → Состав». Тема оформляет его так же, как выбор артикула: текстовые группы — плашками, фото и цвета — плитками, над группой — подпись «Название: значение». Вид группы (фото, цвета или текст) задаётся в самом плагине. Если в плагине ограничена высота блока, лишние строки сворачиваются под кнопку «Показать все».

Цена, скидка и бонусы

Процент скидки можно включить независимо в четырёх местах:

• на фото — «Страница товара → Блоки товара → Бейджи товара → Показывать процент скидки на фото товара»;
• бейджем в карточке покупки — «Показывать процент скидки бейджем в карточке покупки» в той же группе;
• рядом с ценой — «Блоки товара → Цены и единицы измерения → Показывать процент скидки рядом с ценой»;
• в строке под названием — «Верхняя строка и панель покупки → Бейджи в строке под названием → Показывать процент скидки в строке под названием».

Скидка на фото по умолчанию выключена; остальные три места включены. Процент в фиксированной панели при прокрутке включается ещё одним флажком — «Процент скидки» в её группе. Стандартные бейджи, выгода в деньгах и начисляемые бонусы тоже включаются отдельно. Для фото, карточки покупки, выгоды и бонусов на телефоне есть свои флажки в «Мобильная версия → Карточка товара → Бейджи».

Цена на странице товара учитывает выбранные дополнительные услуги: если покупатель отметил, например, подарочную упаковку за 200 ₽, цена товара 1 000 ₽ меняется на 1 200 ₽, а старая цена — на сумму со старой ценой и той же услугой. Это стоимость одной штуки вместе с услугами; при смене варианта услуги цена пересчитывается по его стоимости, при снятии отметки возвращается к цене артикула. Та же цена стоит в фиксированной панели покупки. Если у артикула цена 0 и платных услуг не выбрано, вместо цены выводится текст из настройки нулевой цены.

Выгода считается как разница между старой и текущей ценой выбранного артикула. Бонусы рассчитываются по настройкам партнёрской программы «Магазина»: курсу начисления и типам товаров, за которые они начисляются. Когда покупатель переключается на артикул без скидки, плашка скидки скрывается и не оставляет пустого места.

Количество, услуги и кнопки

До добавления в корзину покупатель видит кнопку «В корзину». После добавления на её месте появляется поле количества с кнопками «−» и «+»: оно показывает, сколько этого артикула уже в корзине, и сразу меняет корзину. Уменьшение ниже минимального количества убирает товар из корзины, и кнопка возвращается.

В базовой редакции количество целое. Дробные количества и единицы измерения доступны в премиум-редакции — см. «Базовая и премиум-редакции». Минимальное количество и шаг берутся из настроек товара в «Магазине». Поддерживаются дробные значения: если товар продаётся, например, по 0,5 кг, количество меняется именно таким шагом, а рядом с числом стоит единица измерения. Когда количество отличается от одного, появляется строка «Итого» — цена с услугами, умноженная на количество. При одной штуке строки нет: услуги уже входят в цену.

Доступность покупки определяется данными и правилами магазина. Недоступный артикул блокирует покупку; проверка учитывает остаток, минимальное количество и настройку магазина «Игнорировать остатки». Возврат к доступному артикулу снова открывает покупку.

Для товара без наличия можно подключить плагин «Ожидание поступления товара»: в «Блоки товара → Кнопка „В корзину“» выберите его в поле «Сообщить о поступлении» и укажите, показывать кнопку для отдельного артикула без остатка или только когда закончился весь товар. Текст кнопки можно заменить; пустое поле берёт подпись плагина. Если плагина нет, он выключен или не вернул кнопку, можно подключить форму «Сообщить о поступлении». Её номер указывается в «Страница товара → Блоки товара → Кнопка „В корзину“ → Форма „Сообщить о поступлении“», а сама форма создаётся в приложении «Заявки». Кнопка появляется и на странице товара, и на карточке в каталоге. Подробнее о подключении — в статье «Формы». Если ни плагин, ни форма не дают кнопки, сохраняется состояние «Нет в наличии».

«Купить в один клик» выбирается в «Страница товара → Блоки товара → Купить в один клик» и требует соответствующего установленного и включённого плагина. Одного выбора в настройке темы недостаточно, если плагина на сайте нет.

Рядом с кнопкой покупки расположены «В избранное», «Сравнить» и «Скопировать ссылку». Последняя копирует адрес товара и сообщает покупателю о результате.

Фиксированная панель покупки

В разделе «Страница товара → Верхняя строка и панель покупки → Фиксированная панель при прокрутке» задаётся закреплённая покупка:

• Показывать на компьютере — после прокрутки ниже основной кнопки название, цена и покупка закрепляются сверху вместо шапки сайта.
• Показывать на телефоне — кнопка покупки закреплена снизу на всю ширину с первого экрана; цена остаётся в содержимом товара. Если включено нижнее меню, панель располагается над ним.

На компьютере в панель можно добавить рейтинг со ссылкой на отзывы, процент скидки, выгоду в деньгах, начисляемые бонусы и кнопки «В избранное», «Сравнить» и «Скопировать ссылку». Рейтинг не показывается у товара без оценок, скидка — у артикула без скидки. Если товар уже в корзине, на телефоне в панели появляется то же поле количества с «−» и «+», а на компьютере — кнопка «В корзине», которая возвращает к основному блоку покупки.

Подробности и отзывы

Раздел «Страница товара → Сведения о товаре» отвечает за нижнюю часть страницы. Сведения можно показывать вкладками или списком подряд; длинное описание разрешается свернуть до нескольких строк. Список «Состав» задаёт порядок: описание, характеристики, отзывы, подборки, записи блога, видео, файлы, фотографии. Пустые разделы не показываются. В общий состав также входят опубликованные непустые подстраницы товара; их порядок настраивается группой «Подстраницы товара». Поле «Характеристики отдельными вкладками» принимает коды характеристик: их значения становятся самостоятельными вкладками и исключаются из общей и краткой таблицы. «Показывать характеристики в обзоре» выводит характеристики и под описанием.

Ссылки «Всё описание» у краткого описания и «Все характеристики» у кратких характеристик открывают нужную вкладку и плавно прокручивают к ней с учётом закреплённой шапки. «Скрыть ссылку „Всё описание“» находится в группе «Блоки товара → Краткое описание»; ссылка не появляется, если соответствующего раздела нет.

Характеристики выводятся в одну, две или три колонки. «Распределение по колонкам» — «Последовательно» сохраняет порядок групп, «Сбалансированно» выравнивает колонки по объёму; группа характеристик не разрывается между колонками.

Подборки «С этим товаром покупают», «Смотрите также» и «Вы смотрели» настраиваются каждая отдельно: заголовок, количество товаров, колонок в ряду, вид — сетка, слайдер или компактный список. При показе вкладками каждую подборку можно оставить во вкладках или вынести отдельным блоком под ними.

Вкладка «Фотографии» показывает альбом приложения «Фото»; в составе она по умолчанию выключена. Номер альбома задаётся у товара дополнительным параметром related_album, а для товаров без него — полем «Номер альбома, если в товаре не указан» в группе «Фотоальбом». Там же — количество снимков (от 1 до 48), 3, 4 или 5 в ряд, названия и описания. Для вкладок «Видео» и «Файлы» (плагины видео и прикреплённых файлов товара) есть свои группы: колонки и подписи видео, заголовок файлов.

В отзывах покупатель может выбрать оценку и оставить только отзывы с фотографиями; фильтр фото появляется, когда снимки есть. Кнопка «Написать отзыв» раскрывает форму и прокручивает к ней; повторное нажатие сворачивает её. Фотографии отзывов открываются в просмотре поверх страницы.

В группе «Отзывы» включаются поля «Достоинства», «Недостатки» и голосование «Отзыв был полезен?». Они появляются, когда установлен плагин «Расширение функционала», который их хранит.

Перед публикацией проверьте страницу на широком экране и телефоне: смените вариант и услугу, добавьте товар и измените количество, прокрутите страницу до появления фиксированной панели, откройте фотографию и отзывы. Затем перейдите в корзину и убедитесь, что выбранные условия покупки сохранились.