Этот документ описывает интеграцию виджета AstraFit в магазин на основе Shopify 2.0 на примере темы Baseline 2.0.
Шаг 1. Установить лоадер (loader)
В этом шаге мы заложим основу для работы виджета - соединим фронтенд на страницах магазина с AstraFit API. Для этого мы использует скрипт, написанный на JavaScript без использования зависимостей (т.е. не требующий дополнительных библиотек для работы).
Для того чтобы начать, войдите в свой личный кабинет по ссылке https://cabinet.astrafit.com/ и перейдите в настройки. Линк вы найдёте в сайдбаре.
В правой части экрана вы найдете ссылку на инструкцию по установке:
В гайде по установке вы найдете нужный JS код. Справа есть кнопка “скопировать”, но можете использовать обычные комбинации ctrl+c и ctrl+v.
Теперь нужно найти шаблон (template) хедера в вашем магазине Shopify.
Для этого в Shopify перейдите в каналы продаж (sales channel) => онлайн магазин (online store) => темы (themes). Там есть кнопка действия (actions), которая открывает выпадающий список. Вам нужна ссылка “редактировать код” (edit code).
Теперь когда вы попали в редактор кода, найдите файл, который содержит секцию <head>... </head>. В теме Baseline 2.0 это папка Layout => файл theme.liquid.
Скопируйте скрипт из вашего кабинета AstraFit в секцию <head>, желательно где-то возле закрывающего тега </head> и нажмите сохранить.
Готово! Можно переходить ко второму шагу.
Шаг 2. Подготовьте ваш скрипт AstraFit
Виджет отображается на странице в специально выделенном блоке <div>, которому присваивается ряд атрибутов данных (data attributes). Шаблон этого блока можно найти в кабинете AstraFit под скриптом из шага 1.
Пожалуйста, обратите внимание на то, что блок представлен с информацией-”болванкой”, которую нужно заменить для работы с бекендом Shopify.
Под скриптом вы найдёте описание атрибутов данных.
Чтобы увязать данные с бекендом шопифай, используйте Shopify Liquid API, который представляет собой шаблонизатор наподобие Twig или Blade.
Ниже мы приводим пример, как можно наполнить div необходимыми данными из базы с помощью кода.
<div class="astrafit-wdgt"
data-id="{{ product.id }}" <!-- Shopify product ID - a unique number string –>
data-brand="{{ product.vendor }}" <!-- Product vendor/manufacturer –>
data-kind="{{ product.type }}" <!-- Product category –>
data-sizes-list="{% for product_option in product.options_with_values %}{% if product_option.name == 'Size' %}{% for value in product_option.values %}{{ value }},{% endfor %}{% endif %}{% endfor %}" <!--Liquid code that fetches the size options if the size option is set for the product –>
data-canonical="{{ request.host }}{{ product.url }}" <!-- Product URL –>
data-img="https:{{ product.featured_image | img_url }}" <!-- Product featured image via CDN –>
></div>
Обратите внимание на то, что некоторые функции шаблонизатора Liquid универсальны (такие как product.id), а некоторые необходимо использовать в соответствии с настройками вашего магазина.
Шаг 3. Установите блок div с виджетом на страницу продукта
Теперь когда вы подготовили код виджета, вам нужно его разместить там, где вы его хотите видеть на сайте. Для этого найдите шаблон продукта в Shopify. В теме Baseline 2.0 он находится в папке Templates, файл main-product.liquid.
Скопируйте код из шага 2 в то место, где вы хотите разместить widget. Он будет построен автоматически - блок div должен быть пустым, и класс обязательно должен быть ‘astrafit-wdgt’, поскольку именно по нему скрипт из шага 1 определяет, куда необходимо подтягивать данные.
Не забудьте нажать “Сохранить”.
Пожалуйста обратите внимание, что виджет для не оцифрованных продуктов отображаться не будет. Когда вы в первый раз зайдете на страницу продукта на сайте, он будет отправлен на оцифровку в кабинет AstroFit. После оцифровки товара, виджет будет отображаться на его странице Shopify.
Если вы хотите протестировать виджет, пожалуйста используйте код-пример из демонстрационных товаров, размещенных в кабинете.
Что делать, если у вас есть вопросы:
Пожалуйста, свяжитесь с support@astrafit.com. Мы всегда готовы помочь!
0 Комментарии