Налаштування Smart-елементів
Коли ми готуємо проморозсилку, часто-густо доводиться кілька разів повторювати одні й ті самі дії в листі: скачати кілька картинок, скопіювати посилання, назви й ціни для товарів, які ми додаємо. Це потребує доволі багато часу, але існує спосіб усе прискорити.
Наша рятівна паличка — це smart-контейнер, який дозволить суттєво заощадити ваш час при створенні листа.
Що таке smart-елемент?
Smart-елемент — це контейнер, який складається з базових блоків (картинка, текст, кнопка), але налаштованих для отримання даних із вашого сайту. Треба одноразово налаштувати:
-
зовнішній вигляд контейнера;
-
змінні;
-
задати правила, звідки брати значення й куди їх підставляти,
щоб надалі просто підставити посилання на товар, а система підтягла до картки товару всю інформацію.
У цьому відео ми розповімо, як налаштувати смарт-блок.
Приклад створення smart-елемента
Візьмемо для прикладу сайт comfy.ua. Для створення картки товару нам знадобляться картинка, назва товару й ціна.
Підготуємо картку товару. Візьмемо структуру з трьома контейнерами (кількість контейнерів може бути будь-якою залежно від ваших потреб).
Заради зручності бажано одразу наповнювати їх контентом, щоб було видно, куди і що додавати. Всі елементи мають бути розміщеніі в одному контейнері.
Наповнимо її відповідно до дизайну сайту в такій послідовності:
-
картинка;
-
назва товару;
-
ціна;
-
кнопка.
Після цього виділяємо контейнер із базовими блоками (для цього натискаємо синій ярлик і "Контейнер" угорі), вибираємо в бічній панелі вкладку "Дані" й натискаємо кнопку "Почати" для активації Smart-властивості.
У результаті в нас відкривається конфігурація, де ми будемо налаштовувати всі необхідні посилання:
Що важливо знати — є два типи даних, які нам потрібно налаштувати. Вони прописуються в розділі "Правила відповідності":
-
"Куди примінити" — тут ми будемо задавати правила, до чого саме треба застосувати вже отримані значення змінних у нашому smart-елементі.
-
"Звідки брати" — тут налаштовуються правила, звідки слід отримати значення змінних із потрібного нам сайту.
Важливий момент, який допоможе нам заощадити час: налаштовуйте блок так, ніби вже відправляєте розсилку — правильне зображення товару з посиланням на нього, альтернативним текстом і назвою, ціною та іншими потрібними нам пунктами картки товару. У нашому випадку це картинка, назва, ціна.
Почнемо налаштування Smart-блоків
За замовчуванням доступне тільки посилання:
Для повноцінної картки товару цього замало, тому ми додаємо, натиснувши плюсик, потрібні нам пункти:
Із випадаючого списку вибираємо:
-
картинку;
-
назву;
-
ціну.
Картинка
Тепер нам потрібно дізнатися, який селектор містить зображення в нашому стандартному блоці. Для цього відкриваємо код листа, натиснувши редактор коду.
За замовчуванням використовується img:
Заради зручності додамо клас:
Потім переходимо до налаштувань картинки на вкладку "Куди примінити" і прописуємо селектор:
У кожної картинки також є атрибут, у цьому випадку — src, рідше зустрічається html, залежно від сайту. Прописуємо його:
Потім перевіряємо результат на вкладці "Зовнішній вигляд" — чи підставилося посилання на нашу картинку:
Назва товару
Починаємо налаштовувати відображення назви за аналогією. Прописуємо вручну біля назви клас, копіюючи з конфігурації або вигадуючи свій, — головне, щоб він був унікальним.
У нашому прикладі селектор — це a.name, атрибут тут не потрібний, оскільки це звичайне текстове поле.
У результаті назва відображатиметься на вкладці "Зовнішній вигляд".
Ціна
За аналогією з іншими полями налаштовуємо ціну. Дивимося в коді html-селектор, у цьому прикладі ціна має селектор span.price. Отримуємо результат:
Тобто ми додали селектори в блок, до якого будуть підставлятися товари з сайту, і здійснили їхнє налаштування. Це налаштування тільки шаблону листа; наступний крок — збирання даних із сайту.
Налаштовуємо передачу даних із сайту до листа
Візьмемо сторінку з товаром, із якої ми будемо підтягувати дані:
Зображення
Знаходимо селектор зображення на сайті. Якщо ви працюєте в Google Chromе, відкрийте інспектор коду кнопкою F12 і за допомогою пошуку елемента виберіть:
і перейдіть до налаштування другої частини: заповніть розділ "Звідки брати".
На сайті знаходимо посилання на зображення товару в редакторі коду і дивимося селектор та атрибут:
У нашому випадку селектор - це
#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. Можна налаштовувати такі самі контейнери для текстових блоків, наприклад для статей блогу.