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

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

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

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

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

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

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

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

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

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

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

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

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

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

Після цього виділяємо контейнер із базовими блоками (для цього натискаємо синій ярлик і "Контейнер" угорі), вибираємо в бічній панелі вкладку "Дані" й натискаємо кнопку "Почати" для активації 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:

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

Вказуємо атрибути 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.

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

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

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

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