Особенности интеграции в CMS Shopify 2.0

Этот документ описывает интеграцию виджета AstraFit в магазин на основе Shopify 2.0 на примере темы Baseline 2.0.

 

Шаг 1. Установить лоадер (loader)

В этом шаге мы заложим основу для работы виджета - соединим фронтенд на страницах магазина с AstraFit API. Для этого мы использует скрипт, написанный на JavaScript без использования зависимостей (т.е. не требующий дополнительных библиотек для работы).

 

Для того чтобы начать, войдите в свой личный кабинет по ссылке https://cabinet.astrafit.com/ и перейдите в настройки. Линк вы найдёте в сайдбаре.

 

В правой части экрана вы найдете ссылку на инструкцию по установке:

______________2022-03-29___11.40.36.png

В гайде по установке вы найдете нужный JS код. Справа есть кнопка “скопировать”, но можете использовать обычные комбинации ctrl+c и ctrl+v.

______________2022-03-29___11.41.27.png

Теперь нужно найти шаблон (template) хедера в вашем магазине Shopify.

 

Для этого в Shopify перейдите в каналы продаж (sales channel) => онлайн магазин (online store) => темы (themes). Там есть кнопка действия (actions), которая открывает выпадающий список. Вам нужна ссылка “редактировать код” (edit code).

______________2022-03-29___11.42.10.png

Теперь когда вы попали в редактор кода, найдите файл, который содержит секцию <head>... </head>. В теме Baseline 2.0 это папка Layout => файл theme.liquid.

 

Скопируйте скрипт из вашего кабинета AstraFit в секцию <head>, желательно где-то возле закрывающего тега </head> и нажмите сохранить.

______________2022-03-29___11.42.22.png

Готово! Можно переходить ко второму шагу.

 

Шаг 2. Подготовьте ваш скрипт AstraFit

Виджет отображается на странице в специально выделенном блоке <div>, которому присваивается ряд атрибутов данных (data attributes). Шаблон этого блока можно найти в кабинете AstraFit под скриптом из шага 1.

______________2022-03-29___11.43.39.png

Пожалуйста, обратите внимание на то, что блок представлен с информацией-”болванкой”, которую нужно заменить для работы с бекендом Shopify.

 

Под скриптом вы найдёте описание атрибутов данных.

______________2022-03-29___11.44.28.png

Чтобы увязать данные с бекендом шопифай, используйте 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 определяет, куда необходимо подтягивать данные.

______________2022-03-29___11.45.44.png

 

Не забудьте нажать “Сохранить”.

Пожалуйста обратите внимание, что виджет для не оцифрованных продуктов отображаться не будет. Когда вы в первый раз зайдете на страницу продукта на сайте, он будет отправлен на оцифровку в кабинет AstroFit. После оцифровки товара, виджет будет отображаться на его странице Shopify. 

Если вы хотите протестировать виджет, пожалуйста используйте код-пример из демонстрационных товаров, размещенных в кабинете.

 

Что делать, если у вас есть вопросы:

Пожалуйста, свяжитесь с support@astrafit.com. Мы всегда готовы помочь!

 

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
Еще есть вопросы? Отправить запрос

0 Комментарии

Войдите в службу, чтобы оставить комментарий.