Створення рекомендаційного блока

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

Перейдіть до розділу Сайт → Рекомендації та натисніть Нова рекомендація.

1. Отримання рекомендацій

Виберіть вкладку Налаштувати зовнішній вигляд та алгоритм рекомендацій.

2. Тип сторінки розміщення блока

Виберіть тип сторінки розміщення рекомендації:

головна сторінка;
сторінка категорії;
сторінка товару;
кошик;
сторінка 404;
будь-яка сторінка

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

Щоб налаштувати рекомендації на сторінках конкретного типу, натисніть на нього в запропонованому списку. Якщо тип не вибрати та натиснути внизу кнопку Далі, то за замовчуванням відкриються налаштування для головної сторінки.

3. Джерело даних

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

4. Назва рекомендаційного блока

Коли вибрано сторінку для розміщення блока рекомендацій та алгоритм, за яким він буде формуватися, задайте назву для блока. Так його буде простіше знайти в загальному списку. Додайте опис, щоб одразу розуміти, яка логіка була закладена під час створення цієї рекомендації.

5. Зовнішній вигляд блока

На цьому кроці налаштовується вигляд блока, який складається з:

заголовка, який відображатиметься на сайті;
добірки рекомендацій, які мають вигляд карток товару.

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

Наступний крок – вибір візуального оформлення блока та товарів у ньому. Можна вибрати один із представлених готових виглядів або завантажити свій 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. Відображення в особистому кабінеті

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

Пошук за ключовим словом.

Фільтр за сторінками розміщення. У разі перемикання сторінок розміщення ліворуч у списку рекомендацій відображатимуться лише ті, що розміщені на відповідній сторінці.