demo store

Демо-магазин коммерческого уровня

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

Проект Demo Store состоит из двух репозиториев, это шаблон GitHub.

Что такое коммерческий уровень?

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

Оглавление

• Функции
• Как это работает
• Начиная
• Кастомизация
• Развертывать
• Нужна помощь?
• Поиск неисправностей
• Лицензия

Функции

Мы решили создать демонстрационный магазин, удалив все сторонние сервисы, которые обычно используются для создания комплексного веб-сайта электронной коммерции (CMS, поиск, PIM и т. д.).

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

Демо-магазин включает в себя:

• встроенная поисковая система с фасетным поиском на базе Fuse.js
• полное управление каталогом продукции с таксономиями и таксонами
• управление отдельными вариантами продукта
• многоязычные возможности, упрощающие продажи на международном уровне
• весь обширный набор функций, предоставляемых из коробки API-интерфейсами Commerce Layer (прейскуранты в нескольких валютах, модели запасов, которые поддерживают несколько местоположений на складе и стратегии выполнения, платежные шлюзы для конкретных рынков, варианты доставки и учетные записи операторов связи и т. д.)

Интеграция с Commerce Layer достигается за счет использования некоторых наших инструментов разработчика с открытым исходным кодом, а именно:

• библиотека JS-аутентификации
• Javascript SDK
• компоненты React
• Хостинговая корзина
• Хостинговая проверка

Как это работает

Проект Demo Store состоит из двух репозиториев, которые вы можете использовать для создания собственного магазина в зависимости от необходимого количества настроек:

• demo-store

  Это шаблон GitHub , который использует упомянутое ниже demo-store-core в качестве подмодуля git. Если вас устраивают функции и внешний вид демо-магазина Commerce Layer, мы предлагаем вам пойти по этому пути. Вам не придется заботиться обо всем исходном коде, и вы сможете сосредоточиться только на своих данных и контенте. Кроме того, вы получите бесплатные обновления практически без риска, просто запустив:

  git submodule update --remote
  npm install

• demo-store-core

  Этот репозиторий содержит исходный код. Если вам нужно полностью настроить свой магазин (поведение, пользовательский интерфейс, UX и т. д.), вам просто нужно создать форк этого репозитория и создать свой собственный. Это также способ внести свой вклад.

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

Начиная

Если у вас нет опыта работы с Commerce Layer, вы можете начать с создания учетной записи (это бесплатно!) и следования инструкциям по вводу в эксплуатацию.

Важный

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

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

Настройка вашей организации

После создания организации вам необходимо создать два API-клиента: канал продаж и интеграционный .

Если вы еще этого не сделали, установите интерфейс командной строки Commerce Layer и два его плагина: плагин для заполнения и плагин для импорта:

npm install -g @commercelayer/cli

commercelayer plugins:install seeder
commercelayer plugins:install imports

Теперь вы можете войти в свой клиент API интеграции из CLI:

commercelayer applications:login 
  --clientId Oy5F2TbPYhOZsxy1tQd9ZVZ... 
  --clientSecret 1ZHNJUgn_1lh1mel06gGDqa... 
  --organization my-awesome-organization 
  --alias cli-admin

Создание вашего магазина

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

1. Создайте новый репозиторий.

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

• Если вы решили сохранить шаблон demo-store вам просто нужно нажать «Использовать этот шаблон» на главной странице репозитория на GitHub, а затем запустить:

  git clone < your-repository-url > my-new-project
  cd my-new-project
  git submodule update --init
  npm install
  
  cp ./demo-store-core/packages/website/.env.sample.submodule .env.local
  
  cp -r ./demo-store-core/packages/website/data/json ./data/json

• Если вы решили создать форк репозитория demo-store-core вы можете вместо этого запустить это:

  git clone < your-repository-url > my-new-project
  cd my-new-project
  npm install
  
  cp ./packages/website/.env.sample ./packages/website/.env.local

2. Установите переменные среды

Отредактируйте .env.local и заполните всю недостающую информацию:

 # this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...

3. Введите данные

Этот шаг не является обязательным. Если у вас уже есть правильно настроенная организация в вашей учетной записи Commerce Layer, вы можете пропустить ее.

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

npm run seeder:seed -ws --if-present

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

commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/

4. Выберите страны, в которых вы собираетесь продавать

Файл json/countries.json содержит список стран, доступных для вашей электронной торговли. Вы можете изменить его с помощью предпочитаемого вами редактора. Просто обязательно замените все результаты "market": xxx соответствующими рынками вашей организации. Вы можете получить список своих рынков на панели администратора Commerce Layer или выполнив эту команду:

npm run markets -ws --if-present

5. Посмотрите на это в действии

npm run dev

# http://localhost:3000/ 

Управление обновлениями

Свежий код demo-store-core вы всегда можете найти в его main ветке.

Чтобы обновить демо-магазин до последних изменений, вы можете просто запустить:

git submodule update --remote
npm install

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

Если хотите, вы можете получить уведомление GitHub, как только будет выпущена новая версия.

Кастомизация

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

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

Файлы данных JSON

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

Файлы JSON расположены по адресу data/json/ , но вы можете выбрать другую позицию, изменив переменную среды NEXT_PUBLIC_JSON_DATA_FOLDER .

Файлы определения типа расположены по адресу packages/types/src/json/ . Мы используем zod для проверки схемы. Взгляните на эти файлы, чтобы понять, какой структуре вам следует следовать.

Когда вы закончите вносить все изменения, вы можете проверить, все ли правильно, выполнив:

 npm run test:data

Файлы данных локали

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

Файлы локали JSON расположены по адресу data/locales/ , но вы можете выбрать другую позицию, изменив переменную среды NEXT_PUBLIC_LOCALES_DATA_FOLDER .

Чтобы начать настройку локалей, выполните следующие действия:

cp -r ./demo-store-core/packages/website/data/locales ./data/locales

 # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/

Конфигурационные файлы

Файлы конфигурации расположены в config/ , но вы можете выбрать другую позицию, изменив переменную среды NEXT_PUBLIC_CONFIG_FOLDER .

Существует три файла конфигурации, которыми вы можете управлять:

• general.config.js
  Этот файл содержит общую конфигурацию.

• facets.config.js
  Это файл конфигурации фасетов. Вы можете выбрать порядок их отображения на панели фильтров, их внешний вид и правила сортировки их значений.
  

• variants.config.js
  Это файл конфигурации вариантов. Вы можете выбрать порядок их отображения на странице сведений о товаре и их внешний вид.
  

Чтобы начать настройку конфигурации, выполните следующие действия:

cp -r ./demo-store-core/packages/website/config ./config

 # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/

Дополнительные переменные среды

Есть несколько переменных среды, которые вы можете использовать для настройки своего магазина. Исчерпывающий список и описание можно найти в файле extra-env.d.ts.

Развертывать

Вы можете развернуть демонстрационный магазин где угодно. Вам просто нужно:

1. Установите все переменные среды в системе, которые вы будете использовать для запуска сборки, в соответствии с вашими потребностями.
2. Решите, хотите ли вы использовать статическое создание сайта или рендеринг на стороне сервера.

Демо-магазин в первую очередь предназначен для поддержки SSG, но вы можете мгновенно переключиться на SSR. Мы протестировали несколько способов его развертывания (например, с помощью GitHub Workflow, Netlify, Vercel и т. д.), дополнительную информацию о нем можно найти здесь. Если вы сделали это по-другому или использовали другие сервисы и хотите поделиться своими действиями с сообществом, присоединяйтесь к обсуждению и заранее спасибо!

Генерация статического сайта

Чтобы создать и развернуть демонстрационный магазин:

1. Соответственно установите следующую переменную среды:

    NEXT_PUBLIC_DATA_FETCHING =ssg

2. Запустите npm run build , чтобы создать статически оптимизированную производственную сборку вашего приложения.

3. Скопируйте папку demo-store-core/packages/website/out на предпочитаемый вами статический хостинг.

Серверный рендеринг

Демо-магазин можно развернуть у любого хостинг-провайдера, поддерживающего Node.js. Для этого:

1. Соответственно установите следующую переменную среды:

    NEXT_PUBLIC_DATA_FETCHING =ssr

2. Запустите npm run build , чтобы создать оптимизированную производственную сборку вашего приложения.

3. Запустите npm start , чтобы запустить сервер Node.js в рабочем режиме.

Нужна помощь?

• Присоединяйтесь к сообществу Discord Commerce Layer.
• Открыть новое обсуждение вопросов и ответов
• Пишите нам в Bluesky, X (ранее Twitter) или LinkedIn.
• Есть ли ошибка? Создайте проблему в этом репозитории.

Поиск неисправностей

1. Вопрос. Даже если я изменил NEXT_PUBLIC_JSON_DATA_FOLDER , NEXT_PUBLIC_LOCALE_DATA_FOLDER или NEXT_PUBLIC_CONFIG_FOLDER , веб-сайт все равно ссылается на предыдущие файлы.

   О. Эти переменные среды используются в Webpack как alias . Начиная с Webpack 5, было введено кэширование для более быстрой сборки. Изменение этих переменных среды не приведет к аннулированию кэша Webpack. Вам необходимо удалить папку .next вручную или запустив:

    # update the path if needed
   rm -rf demo-store-core/packages/website/.next/

Лицензия

Этот репозиторий опубликован под лицензией MIT.