Создайте сайт электронной коммерции с Sanity and Commerce Layer

Одним из величайших преимуществ компонуемой безголовой коммерции является гибкость, которую она предоставляет разработчикам при создании покупательского опыта. Разделение содержимого веб-сайта и коммерческих данных упрощает работу групп экспертов по контенту и коммерции независимо и более эффективно. С Commerce Layer менеджеры по контенту могут работать с лучшей в своем классе безголовой CMS, такой как Sanity, продавцы могут создавать свой инвентарь в Commerce Layer, а разработчики могут создавать с любым стеком на своем наиболее предпочтительном языке программирования, используя API-интерфейсы Commerce Layer.

В этом руководстве вы узнаете, как мы создали Commerce Layer Starter с помощью Nextjs, Sanity studio и развернули его в Netlify. В конце руководства вы сможете с легкостью настроить и создать свой собственный пусковой механизм здравомыслия одним щелчком мыши или интегрировать его с Commerce Layer.

Предпосылки

• Git установлен (узнайте, как установить Git [здесь] (https://github.com/git-guides/install-git), если вы еще этого не сделали).

• Node и NPM установлены (узнайте, как установить Nodejs [здесь] (https://nodejs.org/en/download/package-manager/), если вы еще этого не сделали).

• Базовые знания о том, как использовать терминал.

• Базовые знания NPM.

• Улыбка на лице 😉.

Введение в коммерческий уровень

Commerce Layer — это API транзакционной коммерции и управления заказами для международных брендов. Это позволяет вам сделать любой цифровой опыт доступным для покупок в любом месте. Вы можете создать многоязычный веб-сайт с помощью Shopify, Contentful, WordPress или любой другой CMS, которая вам уже нравится. Затем добавьте Commerce Layer для мультивалютных цен, распределенного инвентаря, локализованных платежных шлюзов, рекламных акций, заказов, подписок и многого другого.

В отличие от традиционных решений, Commerce Layer был создан для новой эры. Он изначально поддерживает самые современные рабочие процессы разработки, такие как Jamstack. Предприятия электронной коммерции могут интегрировать Commerce Layer с единым бэкэндом и обслуживать несколько уровней представления, что позволяет им создавать выдающиеся возможности для совершения покупок, обходиться без головы и масштабировать свой бизнес по всему миру. Вы можете ознакомиться с нашими ресурсами для разработчиков, чтобы узнать больше и приступить к работе.

Представляем Sanity Studio

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

Sanity предоставляет возможность создавать начальные шаблоны, которые разработчики могут легко использовать повторно. Стартер — это прежде всего репозиторий, размещенный на GitHub, который содержит некоторую метаинформацию, демо-контент, схему и внешний интерфейс (интерфейсы), которые попадут в новый репозиторий, когда разработчик установит стартер через sanity.io/starters. Когда разработчик устанавливает стартер, Sanity создает новый проект в Sanity и новый репозиторий на GitHub со стартовым кодом, прикрепляет к стартеру новый datasetId Sanity и одновременно развертывает проект в Netlify.

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

• Витрина магазина электронной коммерции, созданная с помощью Nextjs и [библиотеки компонентов реагирования Commerce Layer] (https://github.com/commercelayer/commercelayer-react-components).

• Возможности международных покупок на базе API Commerce Layer.

• Некоторые данные электронной торговли импортированы с помощью CLI Commerce Layer.

• Структурированный контент в студии Sanity.

• Поддержка локализации.

• Параметры конфигурации развертывания в Netlify.

Структура стартового проекта Sanity

Sanity имеет определенную спецификацию для начинающих, которая включает в себя некоторые необходимые файлы и каталоги. Эти спецификации предоставляют информацию о стартере разработчикам, использующим стартер, и заставляют проект функционировать как многоразовый стартер. Ниже представлена ​​структура папок проекта Sanity с необходимыми файлами и каталогами (без добавления внешнего интерфейса):

``` ударить

├── .sanity-template

├── .sanity-template/assets

├── .sanity-template/data

├── .sanity-template/manifest.json

├── README.md

• .sanity-template — это корневой каталог, в котором хранится вся метаинформация для использования этого репозитория в качестве шаблона на sanity.io/starters.

• .sanity-template/assets — каталог для хранения ассетов, связанных с отображением информации о стартере. В этом случае предварительно просмотрите изображения для всего проекта и для каждого сайта, который содержит стартер.

• .sanity-template/data — это каталог для хранения экспорта набора данных Sanity, если вы хотите, чтобы стартер запускался с некоторым демо-контентом.

• .sanity-template/manifest.json — это файл JSON, содержащий сведения о Starter, а также информацию о развертывании.

• README.md — это файл уценки для этого проекта, который будет отображаться на странице «Создать».

Для готового начального проекта корень проекта должен содержать весь код для развертывания, включая интерфейс и студию. Как правило, проект, созданный с нуля, делится на три части:

1. Корень для всего внешнего кода

1. Каталог /studio для всего студийного кода.

1. .sanity-template для всей стартовой метаинформации.

Вот пример из [стартера здравомыслия Commerce Layer] (https://github.com/commercelayer/sanity-template-commercelayer), как показано на изображении ниже:

Как мы создали коммерческое приложение Sanity Starter

В этом разделе вы узнаете, как мы создали начальное приложение для электронной коммерции с транзакционными функциями, основанными на API Commerce Layer, структурированным контентом на Sanity, импортированными исходными данными и конфигурацией развертывания для Нетлифай. Если вы хотите следовать руководству, вы можете взглянуть на готовый проект на GitHub [здесь] (https://github.com/commercelayer/sanity-template-commercelayer) или даже установить стартер здесь.

Вот последовательная разбивка всех шагов, предпринятых для разработки стартера:

1️⃣ Настройте новый проект Sanity с помощью Sanity CLI

Sanity имеет интерфейс командной строки, который мы можем использовать для взаимодействия с Sanity, создания новых проектов, управления наборами данных, импорта данных и многого другого из CLI. Мы будем использовать этот интерфейс командной строки для настройки нового проекта работоспособности, выполнив следующие шаги:

1: Установите интерфейс командной строки

Запустите команду ниже, чтобы установить Sanity CLI.

``` ударить

npm install -g @sanity/cli

2: Создайте новый проект

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

``` ударить

здравомыслие

3: Управляйте студией

Запустите приведенную ниже команду, чтобы создать исходный код JavaScript, необходимый для запуска студии, и запустить локальный веб-сервер.

``` ударить

начало здравомыслия

Теперь студия должна работать на [localhost:3333](http://localhost:3333). Вы всегда можете запустить sanity help, чтобы получить обзор других доступных и полезных команд в Sanity CLI.

2️⃣ Моделирование контента для созданной студии Sanity

Теперь, когда мы поняли, как работает Sanity, и настроили новый проект Sanity, давайте структурируем схему нашей студии Sanity. Схема Sanity определяет, как должен быть смоделирован ваш контент, и эта структура отражается в пользовательском интерфейсе студии. Схема описывает различные типы полей, из которых состоит документ. Sanity использует файл schema.js в каталоге /schemas для определения модели содержимого проекта.

С помощью Sanity вы определяете блок контента как документ или разбиваете свои документы на модули и импортируете их в родительский файл schema.js. Как правило, существует три категории типов схемы Sanity:

• Типы документов (документ и другие опубликованные пользовательские схемы)

• Примитивные типы (например, boolean, string, text , число, массив, datetime и [URL] (https://www.sanity.io/docs/url -тип))

• Типы объектов (например, object, block, span , reference, slug, изображение и файл)

Вы можете найти все типы Sanity в этой справочной документации или узнать, как структурировать свою модель контента в соответствии с вашими потребностями, прочитав [это подробное руководство]. (https://www.sanity.io/guides/introduction-to-content-modeling). Для начального уровня Commerce Layer наш schema.js выглядит так во фрагменте ниже с импортом нескольких других документов модуля. Вы можете просмотреть код схемы для каждого модуля здесь в репозитории GitHub.

```jsx

импортировать createSchema из 'part:@sanity/base/schema-creator'

импортировать schemaTypes из 'all:part:@sanity/base/schema-type'

// Импортируем схемы объектов и документов

импортировать продукт из './product'

страна импорта из './country'

импортировать вариант из './variant'

импортировать размер из './size'

импортировать таксон из './taxon'

импортировать таксономию из './taxonomy'

импортировать каталог из './catalog'

импортировать blockContent из './blockContent'

импортировать productImage из './productImage'

импортировать localeString из './locale/String'

импортировать localeText из './locale/Text'

импортировать localeSlug из './locale/Slug'

импортировать localeBlockContent из './locale/BlockContent'

// Затем мы передаем нашу схему компоновщику и передаем результат в Sanity

экспортировать по умолчанию createSchema({

// Мы называем нашу схему

имя: 'по умолчанию',

// Затем приступаем к конкатенации нашего типа документа

// к тем, которые предоставляются любыми установленными плагинами

типы: schemaTypes.concat([

// Ниже приведены типы документов, которые будут отображаться

// в студию.

продукт,

страна,

вариант,

размер,

таксон,

таксономия,

каталог,

// При добавлении в этот список типы объектов можно использовать как

// { type: "typename" } в других схемах документов

Изображение продукта,

блокКонтент,

локальная строка,

локальТекст,

локальСлаг,

локальный блокконтент,

3️⃣ Добавить контент в Sanity studio

Если вы работаете над новым проектом, как это делали мы, когда начинали разработку стартера, вам придется вручную добавлять контент в свой проект, используя студию Sanity, работающую на [localhost:3333](http://localhost:3333) . Теперь в студии должны быть поля контента, заполненные настроенными схемами контента в представлении «Рабочий стол». Вы можете использовать это для добавления контента в свой проект, как показано на скриншоте ниже.

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

• Извлеките файл production.tar.gz в каталог /.sanity-template/data, используя следующую команду:

``` ударить

tar -xf production.tar.gz

Имя извлеченной папки должно выглядеть так: «production-export-2021-02-26t14-15-56-557z».

• Выполните приведенную ниже команду в /studio, чтобы импортировать файл data.ndjson в извлеченную папку.

``` ударить

импорт набора данных sanity ../.sanity-template/data/<имя извлеченной папки>/data.ndjson

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

4️⃣  Добавление внешнего интерфейса и интеграция с Sanity

Прежде чем добавлять весь код внешнего интерфейса в корневой каталог, вы должны переместить код студии Sanity в каталог с именем /studio.

На этом этапе вы добавите код внешнего интерфейса вашего проекта, который может быть блогом, маркетинговым веб-сайтом, CRM или витриной. Главное здесь — использовать любую из библиотек [клиента Sanity] (https://www.sanity.io/docs/client-libraries) для интеграции Sanity в ваш интерфейс и получения данных. В нашем случае мы использовали официальный [клиент Javascript] (https://www.sanity.io/docs/js-client), который работает в Node.js и современных браузерах.

```jsx

импортировать sanityClient из '@sanity/client'

постоянный клиент = sanityClient({

projectId: process.env.SANITY_PROJECT_ID в виде строки,

набор данных: process.env.SANITY_DATASET в виде строки,

useCdn: process.env.NODE_ENV === 'production', // false, если вы хотите обеспечить свежие данные

Вот пример того, как мы запрашиваем Sanity для получения данных о стране и продукте:

```jsx

импортировать _ из 'lodash'

импорт {

SanityCountry,

SanityProduct

} из './типы'

//Страны

const sanityAllCountries = async (locale = 'en-US') => {

const lang = parseLocale (локаль, '_', '-', 'нижний регистр')

константный запрос = `*[_type == "страна"]{

название,

код,

идентификатор рынка,

по умолчанию,

"изображение": {

"url": image.asset->url

'каталог': {

'id': каталог->_id

} | заказ (имя ["${язык}"] по возрастанию)`

константные страны = ожидание client.fetch(запрос)

вернуть countrys.map((страна) => {

константная локализация = {

имя: страна?.имя[язык],

return {...страна,...локализация}

//Товары

const sanityGetProduct = async (slug: string, locale = 'en-US') => {

const lang = parseLocale (локаль, '_', '-', 'нижний регистр')

const query = `*[_type == "product" && slug["${lang}"].current == "${slug}"]{

название,

описание,

Справка,

слизняк,

'изображения': изображения[]->{

'url': images.asset->url

'варианты': варианты[]->{

метка,

код,

название,

размер->,

'изображения': изображения[]->{

'url': images.asset->url

константный элемент: any[] = await client.fetch(запрос)

return parsingProduct(_.first(item), lang)

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

Теперь, когда вы настроили Sanity Starter, мы покажем вам основные принципы, необходимые для интеграции коммерческих данных из Commerce Layer. Здесь вы начнете видеть мощную комбинацию данных Commerce Layer с контентом Sanity. И к концу руководства вы увидите не только преимущества этой интеграции, но и сможете поэкспериментировать с вашими коммерческими данными рядом с Sanity, чтобы увидеть мощь обоих инструментов вместе.

5️⃣  Получите учетные данные Commerce Layer API

В стартере, который мы создали, транзакционные функции вашей платформы электронной коммерции управляются Commerce Layer, а контент управляется студией Sanity. Это приведет к лучшему управлению заказами и контентом. Чтобы начать работу с Commerce Layer, вам потребуется создать организацию, выполнить некоторые конфигурации и настройки для вашего бизнеса, заполнить некоторые демонстрационные данные и получить учетные данные API. Учетные данные API позволят вам взаимодействовать с Commerce Layer на уровне представления (внешнем интерфейсе) и в интерфейсе командной строки. Чтобы получить необходимые учетные данные, выполните следующие действия:

1. Создайте бесплатную учетную запись разработчика здесь. Если у вас уже есть учетная запись, перейдите к шагу 3.

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

1. Создайте новую организацию для своего бизнеса.

1. На панели инструментов Commerce Layer щелкните вкладку Каналы продаж и создайте приложение с именем: «Веб-сайт». После успешного создания вы получите идентификатор клиента, базовую конечную точку и разрешенные области действия. Пожалуйста, не забудьте сохранить это, так как мы будем использовать его для взаимодействия с нашим приложением позже.

1. На панели инструментов Commerce Layer щелкните вкладку Integrations и создайте приложение с именем: CLI и ролью: Admin. После успешного создания вы получите «ИДЕНТИФИКАТОР КЛИЕНТА», «СЕКРЕТ КЛИЕНТА» и «БАЗОВАЯ КОНЕЧНАЯ ТОЧКА». Пожалуйста, не забудьте сохранить это, так как мы будем использовать его для взаимодействия с CLI позже.

6️⃣  Исходная организация с тестовыми данными

Официальный [CLI Commerce Layer] (https://github.com/commercelayer/commercelayer-cli) помогает вам управлять приложениями Commerce Layer прямо из терминала. Установка CLI обеспечивает доступ к команде commercelayer. Вы можете настроить его, выполнив следующие действия:

• Установите CLI с помощью вашего любимого менеджера пакетов:

``` ударить

//npm

установка npm -g @commercelayer/cli

//пряжа

пряжа глобальная добавить @commercelayer/cli

• Войдите в свое приложение через интерфейс командной строки, используя ранее созданные учетные данные приложения integration, например:

``` ударить

приложения commercelayer:login -o -i -s -a

Теперь, выполнив описанные ниже действия, вы можете использовать интерфейс командной строки для импорта трех демонстрационных рынков (Великобритания, США и Европа), набора товарных Артикул, связанные прайс-листы, связанные цены, склады и инвентарь в вашу организацию с помощью multi_market бизнес-модели.

• Установите [плагин сеялки] (https://github.com/commercelayer/commercelayer-cli-plugin-seeder), используя команду ниже:

``` ударить

Плагины commercelayer: установить сидер

• Запустите свою организацию с помощью команды ниже:

``` ударить

seed commercelayer -b multi_market

7️⃣  Окончательный контрольный список и конфигурация развертывания Netlify

• Для того, чтобы стартер был проверен и использован через sanity.io/starters, он должен следовать за названием проекта, которое должно начинаться с `sanity-template-.

• Настройте метаданные Sanity в файле sanity-template.json и добавьте конфигурацию развертывания для внешнего веб-приложения и студии Sanity следующим образом:

```json

"версия": 2.0,

"title": "Начальный уровень коммерции",

"description": "Стартер электронной коммерции для нескольких стран, созданный с помощью Sanity Studio, Commerce Layer, Next.js и развернутый в Netlify.",

"превьюМедиа": {

"тип": "изображение",

"src": ".sanity-template/assets/preview.jpg",

"alt": "Предварительный просмотр изображения с логотипом Commerce Layer, Nextjs и Netlify"

"технологии": [

"идентификатор": "следующие",

"имя": "Next.js",

"url": "https://nextjs.org"

"id": "коммерческий слой",

"name": "Коммерческий уровень",

"url": "https://commercelayer.io"

"id": "netlify",

"имя": "Нетлифай",

"url": "https://netlify.com"

"развертывание": {

"провайдер": "netlify",

"места": [

"id": "студия",

"тип": "студия",

"title": "Студия для начинающих Commerce Layer",

"description": "Стартер электронной коммерции для нескольких стран, созданный с помощью Sanity Studio, Commerce Layer, Next.js и развернутый в Netlify.",

"дир": "./студия",

"превьюМедиа": {

"тип": "изображение",

"src": ".sanity-template/assets/studio.png",

"alt": "Предварительный просмотр студии Sanity."

"Настройки сборки": {

"база": "студия",

"дир": "/расст",

"cmd": "выполнить сборку npm"

"id": "веб",

"тип": "веб",

"title": "Начальный веб-сайт Commerce Layer",

"description": "Стартер электронной коммерции для нескольких стран, созданный с помощью Sanity Studio, Commerce Layer, Next.js и развернутый в Netlify.",

"дир": "./веб",

"превьюМедиа": {

"тип": "изображение",

"src": ".sanity-template/assets/preview.jpg",

"alt": "Предварительный просмотр веб-демонстрации."

"Настройки сборки": {

"основание": "/",

"дир": "/выход",

"cmd": "выполнить сборку npm"

Информация о метаданных в основном отображается на sanity.io/create как описан ниже с помощью визуального объяснения из [документов Sanity] (https://www.sanity.io/docs/starter-templates).

• Проверьте файл sanity-template.json на наличие ошибок с помощью команды sanity-template:

``` ударить

проверка шаблона работоспособности

• Создайте свой проект с конфигурацией в sanity-template.json, используя команду**:**

``` ударить

сборка здравомыслящего шаблона

• Вам необходимо преобразовать name, projectId и dataset вашего проекта в studio/sanity.json в динамическую переменную, чтобы, когда пользователь устанавливает ваш стартер через sanity.io/starters, Sanity может заполнить его новыми значениями. Для этого вы передаете строковое значение в <#< ... >#>, как показано во фрагменте ниже:

```json

"корень": правда,

"проект": {

"name": "<#< sanity.projectTitle >#>",

"базовый путь": "/"

"апи": {

"projectId": "<#< здравомыслие.projectId >#>",

"набор данных": "<#< здравый.набор данных >#>"

• Вы также можете настроить Renovatebot для автоматического создания и объединения запросов на вытягивание, которые влияют на обновления зависимостей Sanity в studio/package.json. Все, что вам нужно сделать, это добавить renovate.json в корневой каталог со следующей конфигурацией:

```json

"расширяется": [

«github> здравомыслие-io/renovate-presets: здравомыслие-шаблон»

• Запустите приведенную ниже команду, чтобы собрать студию в статический пакет и развернуть его в облаке Sanity по URL-адресу <your-project>.sanity.studio. Вы также можете развернуть в любое время, когда вносите какие-либо изменения в свою студию.

``` ударить

здравомыслие

PS: вы по-прежнему можете разместить студию на любой облачной платформе по вашему выбору (вот как развернуть в Netlify) поэтому вам не нужно вручную развертывать после каждого изменения.

• Наконец, отправьте готовый код на GitHub и протестируйте его вживую, ****развернув стартер на Sanity в соответствии со стартовой спецификацией:

https://www.sanity.io/create?template=[githubhandle]/sanity-template-[начальное-имя]

Вывод

Теперь, когда вы создали стартер Sanity и интегрировали Commerce Layer, вы можете начать добавлять больше элементов и данных о продуктах, хранящихся в Commerce Layer, чтобы вы могли видеть, как ваши продукты и цены отображаются в вашем контенте. Сила Commerce Layer заключается в том, что вы действительно можете локализовать свои коммерческие данные, чтобы заставить их работать на нескольких рынках, каждый из которых, вероятно, имеет разные цены, SKU, рекламные акции и даже такие простые вещи, как вес и размеры товаров. Commerce Layer дает вам невероятную гибкость для продажи ваших продуктов на местном уровне, а в сочетании с таким мощным инструментом, как Sanity, вы будете на пути к созданию наилучшего и наиболее оптимизированного опыта покупок для ваших клиентов.

Вы можете начать работу со стартером Commerce Layer, посетив эту ссылку, создав новый проект и следуя инструкциям по ссылке. . Не стесняйтесь присоединиться к сообществу Commerce Layer Slack, чтобы поделиться тем, что вы можете создать после прочтения этого руководства, или покажите стартер на Sanity. Для получения дополнительных знаний вы можете изучить основные концепции, необходимые для создания Sanity Starter одним щелчком мыши, узнать как создать веб-интерфейс безголовой коммерции с Commerce Layer или узнайте, как продавать на международном уровне с помощью одного магазина Shopify и Commerce Layer.

Спасибо за чтение! 🖤

Также опубликовано [Здесь] (https://commercelayer.io/blog/how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer)