commercejs nextjs demo store
1.0.0
Полностью полностью отработанный демонстрационный магазин с высокой точностью, построенный с использованием Commerce.js SDK и Next.js с живым развертыванием для NetLify.
Примечание
Этот Readme поможет вам встать и работать с полностью откровенным шаблоном электронной коммерции. Мы настроили этот шаблон для вас, чтобы развернуть непосредственно на один щелчок в NetLify. В качестве альтернативы, вы можете вручную развернуть на своем выборе хостинговой платформы.
Для получения полного подробного учебника по строительству этого заявки на электронную коммерцию Jamstack, пожалуйста, отправляйтесь сюда.
yarn global add @chec/cli Теперь, когда вы установили chec cli во всем мире, вы сможете получить доступ к списку chec [COMMANDS] , один из которых зарегистрируется для учетной записи Chec. Давай пойдем вперед и настройкой!
# Open the Chec registration page in your browser
chec registerСледите за остальной частью прохождения, чтобы настроить детали вашего продавца. В качестве альтернативы, вы можете пойти сюда, чтобы зарегистрироваться на учетную запись Chec.
Deploy One Click позволяет вам подключить NetLify к вашей учетной записи GitHub, чтобы клонировать хранилище commercejs-nextjs-demo-store и автоматически развернуть его. Обязательно перейдите в NetLify и зарегистрируйтесь для учетной записи, прежде чем нажать кнопку развертывания.
Нажав приведенную выше кнопку, вы будете перемещаться на страницу прямого развертывания NetLify, а репозиторий проекта прошел в виде параметров в URL. Нажмите кнопку «Подключиться к GitHub» , назовите свой репозиторий и введите этот открытый ключ во вводе общедоступного ключа Chec . Обратите внимание, что с целью создания и запуска с предварительным просмотром демонстрационного магазина в прямом эфире мы предоставили вам открытый ключ из нашей учетной записи демонстрации. Теперь сохраните и разверните свой сайт.
Обратите внимание, что первоначальная сборка потерпит неудачу, если вы войдете в свой открытый ключ вместо предоставленного демо -торгового ключа. Развертывание одного клика предназначено для целей презентации, чтобы раскрутить быстрое развертывание. Использование вашей учетной записи торговцев будет означать, что вам потребуются соответствующие данные, такие как несколько активов и категорий, связанных с вашими продуктами. Если вы хотите использовать свою учетную запись торговца, пожалуйста, выполните шаги ручной настройки ниже.
Ручная настройка включает в себя клонирование репо в вашей локальной среде, засев предоставленных данных образца в свою учетную запись Chec и развертывание в NetLify.
Шаг 1. Клонировать репо и установить зависимости
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnШаг 2. Настройте переменные среды
Замените образец .env.example Dotenv -файл в корне проекта, чтобы хранить ваш CHEC public_key , а также ваш secret_key .
# Copy from source file to destination file .env
cp .env.example .env Вы можете получить доступ к своему клавишу API под настройкой Dashboard CHEC, а затем перейдите на вкладку «Разработка», чтобы скопировать свой открытый ключ и секретный ключ. Замените предоставленную NEXT_PUBLIC_CHEC_PUBLIC_KEY своими собственными и заполните свой CHEC_SECRET_KEY в файле .env . Секретный ключ необходим для того, чтобы сценарий семян имел правильное разрешение на заселение данных образца в /seeds в вашу учетную запись Chec. Удалите секретный ключ после того, как данные засеяны.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =Этот файл предназначен для того, чтобы не быть приверженным управлению источником, а также будет скрыт в браузерах файлов.
Шаг 3. Посетите данные, необходимые для питания хранилища Chec и запустить среду разработки (необходимая для начальной настройки).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devТеперь перейдите к http: // localhost: 3000 После начала вашей разработки, ваш сайт теперь должен быть заполнен примерными данными!
Если вы заменяете образцы продуктов или категорий, вы можете настроить свои собственные категории изображений под `public/Images/Collection. Смотрите больше информации об настройке данных ниже.
Шаг 5. Внесите любые необходимые изменения, которые вам необходимы и подтолкните код в репозиторий на GitHub или ваш выбор платформы.
Шаг 6. Разверните свой сайт
Обязательно зарегистрируйтесь в учетной записи NetLify и войдите в нее. Нажмите на новый сайт с кнопки GIT и дайте доступ к выбору вашего репо. Ваши настройки сборки автоматически заполняются для вашего от netlify.toml в шаблоне. Чтобы ввести переменные среды, нажмите «Показать Advanced» , затем новую переменную и заполните ввод клавиши как NEXT_PUBLIC_CHEC_PUBLIC_KEY и ввод значения с вашим открытым ключом. Вы можете получить доступ к своему клавишу API на вашей панели управления Chec при настройке, а затем перейдите на вкладку Developer, чтобы скопировать свой общедоступный ключ
Теперь идите вперед и нажмите «Сайт развертывания», чтобы увидеть ваш живой сайт!
Эта команда загрузит этот пример проекта с GitHub и инициализирует его на вашем компьютере. Вы сможете редактировать загруженный код и поиграть с Commerce.js впоследствии.
Шаг 1. Установите CCEC CLI
npm install -g @chec/cli
# or
yarn add -g @chec/cliШаг 2. Создайте демонстрационный магазин
chec demo-store
При поручении выбрать демонстрационный магазин из списка, выберите «Commercejs-nextjs-Demo Store». Эта команда также заставит некоторых образцов данных в вашей учетной записи CHEC. Для получения дополнительной информации см. Документацию CCEC CLI.
Поскольку этот проект представляет собой полноценную витрину, демонстрирующую пользовательский дизайн и пользовательский поток, есть определенные предостережения, с которыми вы столкнетесь, если вы настраиваете свои данные на панели управления CHEC. Один GotCha находится с данными категорий в пользовательском интерфейсе: изображения функций категорий добавляются в API CHEC в качестве метаданных. Если вы добавите новые данные или редактируете данные о категориях секунды, вы можете настроить изображение функции категорий, заменив ваши изображения активы в public/images/collection . Имена файлов должны оставаться прежними. Если вы планируете изменить имена файлов или добавить новые категории, вам нужно добавить новые метаданные. Приложение ожидает настройки инвентаризации ниже для создания и отображения компонентов, поэтому, если вы хотите настроить с вашим инвентарем в бэкэнд, убедитесь, что вы:
public/images/collection с вашими собственными изображениямиВ этом демонстрационном магазине используется ряд функций, предоставляемых Commerce.js, и питается на приборной панели CHEC.
Корзина по магазинам использует Commerce.js Cart API. Тележки сохраняются до 30 дней, и Commerce.js автоматически помнит тележки для посетителей.
Commerce.js предоставляет много инструментов для оптимизации реализаций оформления заказа. Оформление в этом демонстрационном магазине использует:
Commerce.js предоставляет встроенные функциональные возможности для поддержки входа клиентов без какого -либо кода на стороне сервера. Этот демонстрационный магазин имеет существующую страницу входа в систему клиента и предоставляет подробную информацию о предыдущих заказе. Информация о клиенте также используется для предварительной заполнения оформления заказа известными данными клиента.
Этот демонстрационный магазин настроен с коробкой Chec «Test Gateway», который обеспечивает удобный вариант оплаты при тестировании вашей витрины. Кроме того, поддержка элементов полос включена, если полоска настроена на панели мониторинга CHEC.
Commerce.js <> Интеграционная документация полосы
Вы должны включить полосу на приборной панели Chec, следуя предоставленным инструкциям. Вы можете добавить свои ключи от песочницы для полосы и использовать общедоступный API -ключ с песочницей, чтобы проверить с помощью полосы. Как ключ Public API Chec, так и ключ «Publicabable» полоски настроены в файле .env . См. Второй шаг «Ручная настройка и развертывание NetLify»
Разбейте этот проект, чтобы настроить и расширить демонстрацию, как вы хотите. Вот некоторые идеи о том, что вы можете сделать, и направления, которые вы можете взять на себя.
