Создайте магазин электронной коммерции с помощью Headless Commerce и CMS

«Узнайте о преимуществах объединения безголовой коммерции и CMS, а также о том, как это можно сделать с помощью Medusa и Contentful»

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

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

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

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

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

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

Принимая во внимание, что безголовая 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, для которой вы можете следовать этому руководству.

Установить зависимости

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

Сначала установите CLI Медуза:

npm install -g @medusajs/medusa-cli

или с помощью пряжи:

yarn global add @medusajs/medusa-cli

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

Инициализировать Медузу

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

medusa new medusa-contentful-store https://github.com/medusajs/medusa-starter-contentful

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

Создайте контентное пространство

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

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

На заметку

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

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

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

Нажмите на название своей организации и выберите добавить пробел.

Выберите Сообщество и Только веб-приложение, затем нажмите «Продолжить».

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

Получить ключи доступа

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

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

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

- Идентификатор пространства: чтобы узнать, к какому пространству подключаться
- Токен управления контентом: чтобы разрешить Medusa управлять вашими данными Contentful.

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

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

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

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

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

Перейдите на вкладку Токены управления содержимым и выберите Создать личный токен.

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

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

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

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

CONTENTFUL_SPACE_ID=
CONTENTFUL_ACCESS_TOKEN=
CONTENTFUL_ENV=master

Задайте для идентификатора пространства значение CONTENTFUL_SPACE_ID.
Задайте для токена управления контентом значение CONTENTFUL_ACCESS_TOKEN.
Установите master на CONTENTFUL_ENV

Миграция и создание контента

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

npm run migrate:contentful

или с помощью пряжи:

yarn migrate:contentful

Когда команда завершит выполнение, вернитесь к Contentful, выберите Модель контента, и вы должны увидеть, что пространство обновлено типами контента из Medusa.

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

npm run seed:contentful```

yarn seed:contentful

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

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

npm run seed
npm run start

yarn seed
yarn start

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

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

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

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

Синхронизируйте данные из Medusa в Contentful

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

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

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

электронная почта: [email protected]

пароль: суперсекретный

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

{
 “email”: “[email protected]”,
 “password”: “supersecret”
}

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

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

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

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

{
 “title”: “COOL Medusa Waterbottle”
}

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

Синхронизируйте данные из Contentful в Medusa

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

Предполагая, что ваш сервер Medusa размещен, перейдите на Contentful, чтобы настроить Webhook.

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

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

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

Заключение

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

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

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

Создайте магазин электронной коммерции с помощью Headless Commerce и CMS