Для тех из вас, кто следил за моими статьями, вы знаете, что мне нравится чертовски разрабатывать сайты Shopify :). Хотя, в свою защиту, Shopify CMS не существует, а редакторов полей Meta просто недостаточно.
Давай расскажем, почему
Клиенту нужны поля ACF в стиле Wordpress для управления контентом. У меня более чем достаточно опыта использования Wordpress в качестве безголового API, но на этот раз я хотел попробовать другое решение, которое по умолчанию было безголовым. Войдите в Prismic - совершенно прекрасный проект с графическим интерфейсом для создания типов сообщений / групп контента / фрагментов контента и редактором JSON. Интерфейс действительно хорош для клиентов, а серверная часть - это все, что мне нужно для получения и отображения контента. Я уже использовал React для нескольких сборок Shopify, как мой предпочтительный фреймворк для получения данных и их отображения. Итак, давайте посмотрим на мой стек:
- Призматический
- Shopify (стартовая тема Древесина)
- Реагировать
- Webpack / Gulp (задача gulp для обработки SASS и отправки обновлений в магазин)
У меня есть претензии к стартовой теме Shopify; Я чувствую, что его следует модернизировать с помощью некоторых инструментов сборки и минификации кода, но проблема в том, что Timber SASS / JS по умолчанию - это жидкие шаблоны, которые на самом деле содержат много информации из бэкэнда shopify, поэтому его минимизация по сути является кошмаром. Я по большей части оставляю эти два файла в покое или удаляю большую часть их содержимого, поскольку я переписываю функциональность, которая мне действительно нужна, и продолжаю настраивать стиль.
Но как Кевин ?!
Таким образом, вы обязательно должны быть знакомы с современными методами сборки, нам понадобятся React, webpack и другие инструменты, чтобы все это заработало. Это не будет учебным пособием по любому из этих вопросов, но я на самом деле планирую написать небольшой сайт для начинающих для людей, заинтересованных в проверке Prismic. Самая важная часть нашего проекта - это Prismic API. Мне действительно нравится немного абстрагироваться от этого и настраивать некоторые специальные методы, которые я в конечном итоге буду использовать в проекте:
Это позволяет нам включать API в другие файлы и немного очищать наши запросы. Вы не обязаны этого делать, но я думаю, что так все будет выглядеть лучше.
Затем на любой странице, на которой мы хотим загрузить призматические данные, мы должны настроить div, в который будет выполнять рендеринг React, поэтому для файла index.liquid:
<div class="react--load"> <div id="Home"></div> </div>
Я создал простую оболочку, которая увеличивает длину страницы и может также использоваться в качестве загрузчика, так как мы выполняем рендеринг на стороне клиента, нам нужно дождаться завершения запроса после того, как произойдет Shopify, это означает, что рендеринг контента происходит после рендеринга сервера shopify, так что имейте это в виду для материалов SEO / Facebook (вы все равно захотите, чтобы это было настроено в своей голове). Затем в нашем app.js отрендерим наш компонент:
Теперь давайте заглянем внутрь простого компонента Home и отобразим некоторую основную информацию из Prismic:
Вы заметите, что у нас есть 2 вызова в нашей callPrismic() функции. Первый вызов вызывает страницу, которая у нас есть в призме с UID, определенным как home, второму вызову передается массив идентификаторов продуктов. В Prismic у меня есть тип контента «Товары», где я устанавливаю UID, который совпадает с идентификатором продукта shopify. Это позволяет нам расширять продукты и добавлять столько настраиваемых полей, сколько мы хотим. Для тех из вас, кто использовал некоторые из редакторов мета-полей, с которыми вы, вероятно, знакомы, имея необходимость связывать свои мета-поля с идентификатором продукта, это аналогичное соглашение. Мы делаем это, чтобы мы могли создать карусель продуктов из рекомендуемых продуктов в React, которая имеет фактические данные о покупках, такие как URL / имя / идентификатор. Мы можем настроить это в нашем index.liquid файле вверху:
<script>
let products = [];
{% for product in collections.home.products limit:6 %}
products.push({id: {{product.id}}, url: '{{product.url}}', title: '{{product.title}}'});
{% endfor %}
window.__PRODUCTS__ = products;
</script>
Это откроет коллекцию, которую мы установили в окне, чтобы мы могли получить ее в React после монтирования React. Вы, конечно, можете исключить этот конкретный бит, но мне это было нужно, поэтому я подумал, что расскажу, как я справился с ситуацией.
Затем давайте разместим некоторые пользовательские данные на одной из страниц наших продуктов. (Имейте в виду, что вам понадобится настраиваемый тип в Prismic с UID, который имеет тот же идентификатор, что и ваш идентификатор продукта Shopify. Вот фрагмент из нашего product.liquid файла, мы также передаем идентификатор, чтобы мы могли передать опору в React.
<div class="react--load">
<div id="Product" data-id="{{product.id}}"></div>
</div>
Вот обновленный файл app.js с подключенным компонентом нашего продукта:
Имейте в виду, что мы не можем позволить себе роскошь правильной маршрутизации из-за ограниченного контроля среды Shopify, но, на мой взгляд, это все еще довольно управляемо.
Теперь давайте взглянем на компонент нашего продукта (я удалил большую часть своего кода только для краткости).
Я передал идентификатор из жидкого шаблона и вызываю Prismic с тем же идентификатором (сопоставленным с полем UID). Затем я возвращаю несколько пользовательских изображений / копий, которыми управляют в Prismic.
Идете еще дальше?
Один аспект, который я не затронул, - это веб-перехватчики, этот проект не дал мне достаточно времени, чтобы правильно погрузиться в это, но настройка микросервиса, на который вы указываете веб-перехватчик Prismic, также может позволить вам отправлять свои обновления Prismic непосредственно в shopify. , позволяя вам создавать страницы / обновлять продукты в зависимости от типа контента, который вы редактируете / обновляете в Prismic. Очевидно, что это гораздо более сложный вариант использования. Я сделаю все возможное, чтобы в будущем получить репозиторий микросервисов, который будет разговаривать с Prismic, и обязательно напишу об этом.
