nextjs shopify
1.0.0
Демонстрация в прямом эфире: без головы. Создатели
Узнайте, как начать с этого примера Builder + Next.js + Shopify с этим пошаговым видеоиводом здесь:
Предварительные условия
Это руководство предполагает, что у вас установлено следующее программное обеспечение:
У вас уже должен быть создан учетная запись Shopify и магазин, прежде чем начать.
Введение
После этого руководства у вас будет
Прежде чем мы начнем, зайдите на Builder.io и создайте учетную запись.
Перейдите на страницу настроек вашей организации и создайте закрытый ключ, скопируйте ключ для следующего шага.
Далее мы создадим копию Starter Project и создадим новое пространство для его контента, в котором можно жить.
В приведенном ниже примере замените <private-key> на ключ, который вы скопировали на предыдущем шаге, и измените <space-name> на что-то, что имеет значение для вас-не волнуйтесь, вы можете изменить его позже!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
Примечание. Если вы заинтересованы только в использовании этого стартера для целевой страницы с Shopify, используйте эту команду вместо этого:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
Если это был успех, вас следует встретить с сообщением, которое включает в себя общедоступный ключ API для вашего вновь изысканного Builder.io Space.
Примечание. Эта команда также опубликует некоторый контент Starter Builder.io CMS из каталога ./builder в ваше новое пространство при его создании.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123Скопируйте общедоступный ключ API ("012345ABCDEF0123456789ABCDEF0123" в примере выше) для следующего шага.
Этот стартовый проект использует файлы dotenv для настройки переменных среды. Откройте файлы .env.development и .env.production в вашем любимом текстовом редакторе и установите значение BUILDER_PUBLIC_KEY только для открытого ключа, который вы только что скопировали. Вы можете игнорировать другие переменные на данный момент, мы установим их позже.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Создайте пользовательское приложение для вашего магазина Shopify. Если у вас еще нет магазина Shopify, вы можете создать магазин разработчиков.
При создании частного приложения вам придется установить несколько разрешений, чтобы застройщик мог получить ваш инвентарь Shopify. Для этого нажмите на Storefront API на вкладке «Конфигурация» и выберите все следующие разрешения:
Затем на вкладке API Credentials нажмите install :
И скопируйте сгенерированный токен доступа.
Получите доступ к своему недавно созданному пространству, выбрав его из списка мест в вашей организации.
Вас должен быть встречен модальным, запрашивая различные ваши виды доступа в магазине (от шага предварительного просмотра) и домена вашего магазина, это позволит Builder.io для общения с вашим магазином API:
Заполните необходимые клавиши и нажмите «Подключите свое приложение Shopify Custom»!
Откройте .ENV.Development и .env.Production снова, но на этот раз установите два других клавиша Shopify.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=Самая сложная часть закончилась, все, что вам нужно сделать, это запустить проект сейчас.
npm install
npm run dev Это запустит сервер по адресу http://localhost:3000 .
Теперь, когда у нас есть все, что настраивает, начните создавать и публиковать страницы на Builder.io, чтобы демо по созданию чего -то похожего на демонстрационную страницу, выполните шаги в этом коротком видео
Вы можете развернуть этот код везде, где вам нравится - вы можете найти множество вариантов развертывания для следующей.js здесь. Следующие параметры поддерживают установки одного щелчка и очень легко начать с:
