Комбинация безголовой электронной коммерции и CMS, которую вы должны знать

Безголовые технологии с каждым днем становятся все более популярным трендом. Двумя примерами безголовых технологий являются безголовая коммерция и безголовая CMS. Medusa и Contentful — это две платформы, которые предоставляют эти безголовые стеки соответственно.

Medusa — это безголовая коммерция с открытым исходным кодом, которая дает вам возможность создать свой магазин в считанные минуты и настроить его в соответствии с вашими потребностями.

Contentful — это платформа CMS без головы, которая позволяет легко управлять контентом с помощью дружественного пользовательского интерфейса, а затем подключать свои CMS-пространства к любым приложениям.

Для небольших компаний более чем достаточно использовать только торговую платформу, такую как Medusa, поскольку она предоставляет функции управления товарами, такие как описание или изображения товаров. Однако в некоторых случаях сочетание Medusa с безголовой CMS может дать гораздо более мощные результаты.

В этой статье вы узнаете о некоторых преимуществах сочетания этих платформ. Вы также узнаете, как интегрировать Medusa и Contentful, хотя Medusa можно использовать и со Strapi или другими CMS.

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

В то время как headless CMS — это бэкэнд-система управления контентом, в которой банк контента, в котором хранится этот контент, не связан ни с каким презентационным слоем (фронтендом). Данные (контент) доступны через API. Это означает, что вы можете представлять эти данные в любой форме — веб-, мобильной и т. д. Такое разделение является частью ядра Jamstack.


Преимущества использования Medusa с Contentful

Расширение возможностей обогащения продукта

Headless CMS дает вам возможность иметь более подробное представление о ваших продуктах, чем то, которое предоставляется монолитной коммерческой платформой. Если вам нужно больше, чем просто базовая информация о продукте (например, несколько фотографий продукта и расширенное описание продукта), то это можно легко добавить с помощью безголовой CMS.

Используя преимущества ее природы как системы управления контентом, вы можете быть настолько подробными о своих продуктах, насколько захотите. Если что-то не присутствует изначально, вы можете просто добавить это в модель контента вашего продукта и управлять всем этим из центрального места.

Обслуживайте клиентов по всему миру с помощью единого бэкенда

В современном мире вы, скорее всего, будете обслуживать клиентов из разных стран. Для эффективного решения этой задачи вам необходим способ последовательного перевода списков товаров на несколько языков, а также работа с местными валютами.

Если вы попытаетесь сделать это с помощью большинства монолитных решений, таких как Shopify и WooCommerce, вам придется создавать различные магазины для каждого рынка, который вы пытаетесь обслуживать. В случае с безголовой CMS есть отличные возможности для многоязыковой поддержки, а с безголовой коммерческой платформой, такой как Medusa, вы можете легко настроить опции местных валют (наряду с местными вариантами доставки и оплаты) для каждого региона в одном бэкенде.

Управление настройкой по всем каналам

Омниканальность — стандартное требование для многих операторов электронной коммерции в настоящее время, однако работа с различными каналами с точки зрения контента часто бывает утомительной. Наиболее распространенный подход заключается в том, чтобы иметь несколько рабочих пространств для каждого канала — вашего веб-сайта, ваших приложений и т.д. Каждая из этих платформ требует особого обращения, чтобы обеспечить их работу по назначению — несколько направлений, работающих под управлением вашего магазина.

Использование платформы безголовой коммерции позволяет обслуживать несколько каналов с одного бэкенда вместо того, чтобы работать с изолированными системами для каждого из них. В сочетании с безголовой CMS вы можете управлять всем содержимым каналов из одного места (CMS-системы), а корректировать цены, загружать новые товары и просматривать заказы — все это в бэкенде коммерции.

Простая двухсторонняя синхронизация

В средних и крупных компаниях, занимающихся электронной коммерцией, все могут работать не в одних и тех же системах (например, маркетинг будет работать с CMS, в то время как команда электронной коммерции будет работать в основном с бэкендом коммерции). Часто возникающая здесь сложность заключается в том, что обновления в одной системе могут не распространяться на другую, что приводит к несоответствию данных или контента, отображаемого на фронтенде.

Чтобы минимизировать этот риск, Medusa всегда использует двустороннюю синхронизацию с платформами CMS, с которыми она интегрирована. Таким образом, недоразумений удается избежать, а различные команды могут всегда полагаться на один и тот же источник правды даже при работе с несколькими системами.


Настройка Medusa с Contentful

В качестве примера использования Medusa с безголовой CMS мы рассмотрим настройку Medusa с Contentful в качестве CMS. Вы также можете выбрать работу с безголовой CMS, например, Strapi, для которой вы можете следовать этому руководству.

Установка зависимостей

Прежде чем запустить свой магазин, вам необходимо установить несколько компонентов.

Во-первых, установите Medusa CLI:

npm install -g @medusajs/medusa-cli
Войдите в полноэкранный режим Выйти из полноэкранного режима

или используя Yarn:

yarn global add @medusajs/medusa-cli
Войти в полноэкранный режим Выйдите из полноэкранного режима

Medusa также нуждается в Redis для управления и запуска событий и их подписанных обработчиков. Это необходимо для управления двусторонней синхронизацией между Medusa и Contentful. Если у вас не установлен Redis, пожалуйста, следуйте этому руководству для его установки.

Инициализация Medusa

Используйте следующую команду для установки сервера Medusa:

medusa new medusa-contentful-store https://github.com/medusajs/medusa-starter-contentful
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенная выше команда создаст папку с именем medusa-contentful-store. В этой папке находятся файлы конфигурации для вашего магазина Medusa и настройки для подключения к Contentful.

Создание пространства Contentful

Далее вам нужно настроить пространство Contentful Space и подключить его к вашему магазину.

Перейдите на сайт Contentful и войдите в систему или создайте учетную запись.

Обратите внимание

Когда вы впервые создаете учетную запись Contentful, создается новое пространство «Пустое». В этом случае выберите «Пустое» и перейдите к разделу «Получение ключей доступа».

Если «Пустое» не было создано, продолжайте выполнять следующие шаги.

ПРИМЕЧАНИЕ: Вы можете переименовать свое пространство позже.

Щелкните название своей организации и выберите добавить пространство

Выберите Community and Web App Only и нажмите кнопку continue

Дайте имя вашему пространству и выберите пустое пространство, затем перейдите в домашнюю страницу вашего пространства

Получение ключей доступа

Чтобы подключить Contentful к Medusa, вам понадобятся ключи API от Contentful.

Когда ваш дом Contentful загружен, выберите Настройки на верхней панели, а затем API-ключи.

Отсюда вы получите:

  • Space Id: Чтобы знать, к какому пространству подключаться
  • Токен управления контентом: Чтобы Medusa могла управлять вашими данными Contentful.

ПРИМЕЧАНИЕ: Сохраните эти ключи в текстовом файле, они вам скоро понадобятся.

Идентификатор пространства

Вы можете получить SpaceId из адресной строки или выбрав Add API Key.

Скопируйте id из появившегося диалога и поместите его куда-нибудь, он вам скоро понадобится.

Ключ управления контентом

Перейдите на вкладку Content management tokens и выберите Generate Personal Token.

Скопируйте этот токен и сохраните его где-нибудь, чтобы использовать позже.

ПРИМЕЧАНИЕ: Убедитесь, что вы скопировали токен, вы не сможете увидеть его снова.

Добавление ключей на сервер Medusa

Вернитесь в каталог medusa-contentful-store. Откройте файл .env и добавьте ключи, относящиеся к Contentful, которые мы сохранили ранее.

CONTENTFUL_SPACE_ID=
CONTENTFUL_ACCESS_TOKEN=
CONTENTFUL_ENV=master
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Установите идентификатор пространства в CONTENTFUL_SPACE_ID
  • Установите токен управления содержимым в CONTENTFUL_ACCESS_TOKEN
  • Установите master в CONTENTFUL_ENV

Миграция и посев Contentful

Теперь вы можете перенести и посеять свой магазин. Откройте окно терминала в каталоге medusa-contentful-store и выполните эту команду:

npm run migrate:contentful
Войти в полноэкранный режим Выйти из полноэкранного режима

или используя Yarn:

yarn migrate:contentful
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения выполнения команды вернитесь в Contentful, выберите Content model и вы увидите, что пространство обновлено типами контента из Medusa.

Затем засейвите пространство Contentful некоторыми данными с помощью этой команды:

npm run seed:contentful
Войти в полноэкранный режим Выйти из полноэкранного режима

или

yarn seed:contentful
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы вернетесь в Contentful после выполнения этой команды, он должен быть обновлен новыми данными.

Наконец, выполните эту команду, чтобы добавить некоторые товары в ваш магазин:

npm run seed
npm run start
Войти в полноэкранный режим Выйти из полноэкранного режима

или

yarn seed
yarn start
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы перейдете в Contentful и выберете «Контент», вы должны увидеть что-то вроде этого:

Нажмите на выпадающий пункт «Тип контента» и выберите Продукт. Вы увидите товары в вашем магазине Medusa:


Двусторонняя синхронизация

В этой части вы увидите, как Medusa и Contentful синхронизируются. Вы увидите, как обновление информации о товарах в Medusa приводит к обновлению информации о товарах в Contentful, и наоборот.

Синхронизация данных из Medusa в Contentful

Вы можете использовать Postman для отправки запросов к API Medusa и изменения продуктов. Сначала вы можете проверить, что у вас те же продукты, что и в Contentful, отправив запрос GET в ваш магазин Medusa по адресу http://localhost:9000/store/products.

Следующим шагом будет обновление продуктов. В Medusa вы можете обновлять товары, только если вы вошли в систему как администратор. Поэтому сначала вам нужно войти в систему как администратор, используя конечную точку аутентификации /admin/auth.

По умолчанию Medusa создает базу данных с администратором, имеющим следующие учетные данные:

email: admin@medusa-test.com

пароль: supersecret

Отправьте запрос POST на адрес localhost:9000/admin/auth, передав в теле JSON-данные следующего формата:

{
    "email": "admin@medusa-test.com",
    "password": "supersecret"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Чтобы отредактировать продукт, вам нужно отправить запрос POST по адресу /admin/products/:id , где :id — это ID продукта. Вы можете получить ID продукта из предыдущего запроса /store/products.

Например, для обновления продукта «Medusa Waterbottle» я бы отправил запрос POST на /store/products/prod_01FW12QVRS9PVRJSHB3ZCSRF0J. Обратите внимание, что этот ID может быть другим, поэтому скопируйте ID продуктов из вашего магазина.

В теле запроса отправьте объект JSON с данными, которые вы хотите изменить. Например, чтобы изменить заголовок:

{
    "title": "COOL Medusa Waterbottle"
}
Войти в полноэкранный режим Выйти из полноэкранного режима

После отправки запроса вернитесь в Contentful. Вы увидите, что продукт изменился и там.

Синхронизация данных из Contentful в Medusa

Этот шаг требует, чтобы ваш сервер Medusa был размещен на общедоступном сервере и чтобы вы настроили веб-крючок на Contentful.

Предположив, что ваш сервер Medusa размещен, перейдите на Contentful, чтобы настроить веб-крючок.

Выберите Настройки на панели навигации, затем Webhooks.

Затем выберите Add Webhook. Дайте вашему веб-крючку имя, затем убедитесь, что URL-адрес — это URL-адрес вашего магазина плюс /hooks/contentful. Например, https://example.com/hooks/contentful. Затем нажмите Сохранить

После того как соединение Webhook будет установлено, ваш контент будет синхронизироваться с Contentful в Medusa всякий раз, когда вы будете редактировать данные в Contentful.


Заключение

В случаях, когда магазин должен работать на нескольких языках или требуется более расширенное описание товара, установка Medusa и безголовой CMS может принести много пользы:

  • Более глубокое обогащение товаров
  • Легкий перевод интернет-магазина без использования нескольких магазинов
  • Более эффективное управление кросс-каналом
  • Двусторонняя синхронизация во избежание конфликтов данных

Если у вас возникнут какие-либо проблемы или вопросы, связанные с Medusa или этим руководством, обращайтесь к команде Medusa через Discord.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *