Создание рекомендательного блока

В этой инструкции описано создание рекомендательноного блока в аккаунте eSputnik — вариант настройки для сайтов, сделанных на базе шаблонизаторов, и проектов без ресурсов на собственную разработку.

Чтобы создать блок, зайдите в раздел “Сайт” → вкладка “Рекомендации” и кликните “Новая рекомендация”.

1. Получение рекомендаций

Выберите вкладку “Настроить внешний вид и алгоритм рекомендаций”.

2. Тип страницы

Рекомендация может быть добавлена на страницы сайта одного из типов:

• главная страница;
• страница категории;
• страница товара;
• корзина;
• страница 404;
• любая страница.

От выбора страницы, где будет выводиться блок, зависит перечень доступных алгоритмов. Например, на главной можно вывести общие рекомендации, такие как товары-бестселлеры. Или персональные рекомендации, если пользователь заходит на сайт не первый раз и уже собрана его история просмотров. На странице товара доступны другие алгоритмы: товары, которые вы смотрели; похожие товары; с этим товаром покупают и т. д.

Для настройки рекомендаций на страницах конкретного типа кликните по нему в предложенном списке. Если тип не выбрать и нажать внизу кнопку “Далее”, то по умолчанию откроются настройки для главной страницы.

3. Источник данных

После выбора страницы показа вам открывается список возможных видов рекомендаций, которые вы можете использовать для нее. Также можно добавить кастомные правила фильтрации.

4. Название

После того как выбрана страница для размещения блока рекомендаций и алгоритм, по которому он будет формироваться, задайте название для блока. Так его будет проще найти в общем списке. Добавьте описание, чтобы сразу понимать, какая логика была заложена при создании данной рекомендации.

5. Внешний вид

На данном шаге настраивается внешний вид блока, который состоит из:

1) заголовка, который будет отображаться на сайте;

2) подборки рекомендаций в виде карточек товара.

Заголовок отображается над блоком. Его задача – привлечь внимание пользователей и рассказать, какие товары в нем представлены. Пропишите его в соответствующей строке.

Следующий шаг – выбор визуального оформления блока и товаров нем. Можно выбрать один из представленных готовых видов или загрузить свой HTML-код с CSS-стилями и JS-настройками.

Создание блока в стиле вашего сайта

Чтобы в доступных внешних видах у вас появился блок в стиле вашего сайта, загрузите его в разделе “Сайт” → “Рекомендации” → “Внешний вид”.

При клике на кнопку “Новый внешний вид” откроется редактор кода, где можно настроить блок рекомендаций в своем дизайне. Настройки вносятся на вкладках HTML, CSS и JS.

HTML

Рекомендовано добавлять только содержимое тега body во вкладку HTML.

Если вы используете шаблон с ограниченной шириной, убедитесь, что на вашем сайте достаточно места.

Для вывода данных используется динамический контент Velocity.

Для отображения заголовка добавьте class с обращением к $!recom.header, пример:

$!recom.header

Все контейнеры рекомендаций нужно вставить внутрь цикла, пример:

#foreach( $!product in $!products )

//recommendation container

#end

Для обращения к переменным источника, например "названия", нужно обращаться через структуру $!product.name. Список стандартных переменных выводится в подсказке, если начать вносить $!pr, обращение ко всем остальным (кастомным) полям фида происходит через tags_ Пример:

$!product.tags_oldprice

С помощью velocity можно задать условие отображения значения, например отображать элемент только если значение поля равняется или не равняется заданному значению. Например, если поле Description из фида не пустое, для отображения кнопки "Описание" поместите её структуру в:

#if ($!product.descr != '')
$!product.get('descr')

#end

Пример пересчёта стоимости товара с учетом старой и новой цены:

#set($saleDiff = $product.tags_oldprice – $product.price)

#if($saleDiff > 0)

– $saleDiff грн.

#end

Пример отображения рейтинга продукта как 1-5 звезд (обязательно должно быть поддержано в CSS):

#set($filled = '') #set($notFilled = '') #set($start = 1) #set($end = 5) #set($range = [$start..$end]) #foreach($i in $range) #if ($i <= $product.tags_rating) $filled #end #if ($i > $product.tags_rating) $notFilled #end #end

CSS

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

.es-productsContainer--link

Если этого недостаточно, нужно усилить вес селектора за счет промежуточного класса, например:

.es-productsContainer.es-productsContainer--link

При создании новой таблицы стилей используйте какое-либо оглавление. Это поможет вам быстро найти нужные фрагменты кода, когда его будет много. Например:

/* Container styles start */

Если вам нужно создать одно и то же правило CSS для нескольких элементов, поместите его в отдельный класс.

JS

Используйте JS-код, чтобы настроить дополнительные возможности рекомендательного блока, например анимацию, слайдер и т. п.

6. Указание места размещения рекомендации на странице

По умолчанию у вас нет готовых мест размещения. Их нужно создать и затем вернуться к их выбору (инструкция по созданию места размещения).

Поэтому выберите опцию "Создать место размещения позже" и нажмите кнопку "Готово". Вы попадете в список рекомендаций.

7. Тестирование и публикация блока

Выберите созданную рекомендацию. На этом этапе она видна только вам.

Чтобы опубликовать созданный блок или посмотреть его на странице, укажите место расположения предварительно подготовленной рекомендации. Это можно сделать в поле "Место размещения".

Для просмотра рекомендаций на сайте нажмите кнопку "Смотреть на странице".

Включение/выключение видимости рекомендаций на сайте

Когда вы убедитесь, что верстка блоков корректна, а товары подтянулись правильно, измените статус рекомендации с “Видна только вам” на “Видна посетителям сайта”.

С этого момента блок видят все посетители сайта, и начинает собираться статистика его работы.

8. Отображение в личном кабинете

Для удобства работы с рекомендациями на сайте доступны такие инструменты:

1) Поиск по ключевому слову.

2) Фильтр по страницам размещения. При переключении страниц размещения слева в списке рекомендаций будут отображаться только те, что размещены на соответствующей странице.

Цвет шрифта места размещения в списке соответствует цвету маркера типа страницы слева. Например, рекомендации на главной будут прописаны фиолетовым, страницы с товаром – желтым и т. д.

3) Справа над списком можно отфильтровать данные за период: 1 день/7 дней/28 дней/текущий месяц/прошлый месяц/все время/нужный период.

Или по показателям: просмотрам/переходам/CTR/количеству покупок/количеству проданных товаров/сумме покупок/среднему чеку.

После добавления рекомендаций и их показа на сайте в списке рекомендаций отобразится статистика по ним:

• просмотры;
• переходы;
• CTR;
• количество покупок (транзакций);
• продано товаров (количество единиц товара);
• сумма покупок;
• средний чек.

Пиктограмма “Пуск” перед названием рекомендации говорит о том, что рекомендация выводится на сайте. А перечеркнутый глаз – о том, что рекомендация видна только вам.

Удалить рекомендацию и статистику по ней можно, нажав на три точки в конце строки.