Генератор карток товарів | Підтримка eSputnik

Email

Омніканальність

Автоматизація

Налаштування Smart-елементів

Коли ми готуємо проморозсилку, часто-густо доводиться кілька разів повторювати одні й ті самі дії в листі: скачати кілька картинок, скопіювати посилання, назви й ціни для товарів, які ми додаємо. Це потребує доволі багато часу, але існує спосіб усе прискорити.

Наша рятівна паличка — це smart-контейнер, який дозволить суттєво заощадити ваш час при створенні листа.

Що таке smart-елемент?

Smart-елемент — це контейнер, який складається з базових блоків (картинка, текст, кнопка), але налаштованих для отримання даних із вашого сайту. Треба одноразово налаштувати:

  • зовнішній вигляд контейнера;
  • змінні;
  • задати правила, звідки брати значення й куди їх підставляти,

щоб надалі просто підставити посилання на товар, а система підтягла до картки товару всю інформацію.

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

Приклад створення smart-елемента

Візьмемо для прикладу сайт toys.com.ua. Для створення картки товару нам знадобляться картинка, назва товару й ціна.

Підготуємо картку товару. Візьмемо структуру з трьома контейнерами (кількість контейнерів може бути будь-якою залежно від ваших потреб).

Структура з трьома контейнерами

Заради зручності бажано одразу наповнювати їх контентом, щоб було видно, куди і що додавати. Всі елементи мають бути розміщеніі в одному контейнері.

Структура з наповненням

Наповнимо її відповідно до дизайну сайту в такій послідовності:

  • картинка;
  • назва товару;
  • ціна;
  • кнопка.

Після цього виділяємо контейнер із базовими блоками (для цього натискаємо синій ярлик і "Контейнер" угорі), вибираємо в бічній панелі вкладку "Дані" й натискаємо кнопку "Почати" для активації Smart-властивості.

Активація Smart-властивості

У результаті в нас відкривається конфігурація, де ми будемо налаштовувати всі необхідні посилання:

Конфігурація для налаштування

Що важливо знати — є два типи даних, які нам потрібно налаштувати. Вони прописуються в розділі "Правила відповідності":

Правила відповідності

  • "Куди застосовувати" — тут ми будемо задавати правила, до чого саме треба застосувати вже отримані значення змінних у нашому smart-елементі.

  • "Звідки взяти" — тут налаштовуються правила, звідки слід отримати значення змінних із потрібного нам сайту.

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

Почнемо налаштування Smart-блоків

За замовчуванням доступне тільки посилання:

Налаштування Smart-блоків

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

Додаємо потрібні пункти

Із випадаючого списку вибираємо:

  • картинку;
  • назву;
  • ціну.

Картинка

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

За замовчуванням використовується img:

Селектор зображення

Заради зручності додамо клас:

Додаємо клас

Потім переходимо до налаштувань картинки на вкладку "Куди застосувати" і прописуємо селектор:

Селектор

У кожної картинки також є атрибут, у цьому випадку — src, рідше зустрічається html, залежно від сайту. Прописуємо його:

Атрибут

Потім перевіряємо результат на вкладці "Зовнішні дані" — чи підставилося посилання на нашу картинку:

Перевіряємо результат

Назва товару

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

Клас для назви товару

У нашому прикладі селектор — це a.name, атрибут тут не потрібний, оскільки це звичайне текстове поле.

У результаті назва буде відображатися на вкладці "Зовнішній вигляд".

Назва товару

Ціна

За аналогією з іншими полями налаштовуємо ціну. Дивимося в коді html-селектор, у цьому прикладі ціна має селектор span.price. Отримуємо результат:

Ціна

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

Налаштовуємо передачу даних із сайту до листа

Візьмемо сторінку з товаром, із якої ми будемо підтягувати дані:

Сторінка товару на сайті

Зображення

Знаходимо селектор зображення на сайті. Якщо ви працюєте в Google Chromе, відкрийте інспектор коду кнопкою F12 і за допомогою пошуку елемента виберіть

Посилання на зображення

і переходьте до налаштування другої частини: заповніть розділ "Звідки взяти".

На сайті знаходимо посилання на зображення товару в редакторі коду і дивимося селектор та атрибут, у нашому випадку це src:

Селектор і атрибут зображення

У нашому випадку селектор - це

#galleryList > div > div > li.gallery-item._img.js-gallery-item.active-view.slick-slide.slick-current.slick-active > a > picture > img

а атрибут -  src.

Прописуємо його на вкладці "Звідки взяти":

Заповнюємо вкладку "Звідки брати"

Підставляємо посилання на товар:

Підставляємо посилання на товар

Якщо все налаштовано коректно, у вас одразу підтягнеться зображення.

Щоб коректно підтягувалася альтернативна назва у зображенні товару, додаємо селектор h1:

Селектор h1

Потім пропишемо два селектори в розділі "Куди застосовувати":

Додаємо селектори

Вказуємо атрибути alt і title.

Ціна

Визначаємо на сайті селектор ціни, для нашого прикладу це 

#productCard > section > div.product-card__right > div.product-card__foot > div.product-card__actions > div.price-box.price.js-item-price > div.price-box__content.price-box__content_special > div.price-box__content-i > span.price-value

Селектор ціни

і прописуємо його в самому блоці:

Прописуємо селектор

Натискаємо "Отримати значення" й порівнюємо результат.

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

Перевіряємо отриманий результат

Для перевірки правильності налаштувань копіюємо код і вставляємо в сусідні два контейнери. Щоб перевірити, чи вони працюють, беремо посилання на інші товари й підставляємо в контейнер:

Перевірка

Отримуємо результат:

Результат

Невеличкі лайфхаки:

1. Налаштуйте один смарт-блок з усіма даними, які можуть знадобитися. За потреби можна видаляти окремі контейнери в блоці.

2. Якщо ви бажаєте скопіювати структуру до іншого листа, використовуйте редактор JSON.

Редактор JSON для копіювання

Скопіюйте весь код із цього розділу і потім вставте його до потрібної структури іншого листа.

3. Зберігайте по-різному оформлені контейнери в бібліотеці й використовуйте їх у будь-якому листі.

4. З одного оформленого контейнера ви можете зробити будь-яку картку: три в рядок, чотири у стовпчик, тому не обов'язково створювати з нуля повну картку — просто скопіюйте вміст контейнера до сусідньої клітинки.

5. Можна налаштовувати такі самі контейнери для текстових блоків, наприклад для статей блогу.

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email