nextjs shopifyダウンロードnextjs shopifyソースコードのダウンロード

nextjs shopify

AI ソースコード

1.0.0

ダウンロード

next.js + Shopify + builder.ioの例

デモライブ：headless.builders

目標と機能

超高性能
SEOが最適化されました
テーマに
パーソナライズ可能（国際化、A/Bテストなど）
Builder.io Visual CMS統合

ビデオウォークスルー

このビルダー + next.next.js + Shopifyの例は、このステップバイステップのビデオガイドをこちらで始める方法を学びます。

はじめる
- 1：Builder.ioのアカウントを作成します
- 2：Builder.ioの秘密鍵
- 3：このリポジトリをクローンし、Builder.ioスペースを初期化します
- 4。Shopifyプライベートアプリ
- 5。ビルダーをShopifyに接続します
- 6. Shopifyと話すようにプロジェクトを構成します
- 7。アップアンドランニング！
展開する

はじめる

前提条件

このガイドでは、次のソフトウェアがインストールされていると想定しています。

nodejs（> = 12.0.0）
npm
git

開始する前に、Shopifyアカウントとストアも作成されている必要があります。

導入

このガイドに従った後、あなたは持っています

next.jsアプリ、選択したホスティングプロバイダーに展開する準備ができています
Shopifyからライブコレクションと製品情報を引き出します
Builder.io Visual CMSを搭載しています

1：Builder.ioのアカウントを作成します

開始する前に、Builder.ioにアクセスしてアカウントを作成します。

2：Builder.ioの秘密鍵

[組織設定]ページに移動して秘密キーを作成し、次のステップのキーをコピーします。

[組織設定]ページにアクセスするか、リストから組織を選択します

組織はリストをドロップダウンします

左手のサイドバーから「アカウント」をクリックします
「プライベートキー」行の編集アイコンをクリックします
自動生成されたキーの値をコピーするか、あなたにとって意味のある名前の新しいキーを作成します

秘密鍵を取得する方法の例

3：このリポジトリをクローンし、Builder.ioスペースを初期化します

次に、スタータープロジェクトのコピーを作成し、そのコンテンツが住むための新しいスペースを作成します。

以下の例では、 <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

これが成功した場合は、新しく造られたBuilder.ioスペースのパブリックAPIキーを含むメッセージを迎える必要があります。

注：このコマンドは、StarterBuilder.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ファイルを使用して環境変数を構成します。お気に入りのテキストエディターでfiles .env.developmentと.env.productionを開き、 BUILDER_PUBLIC_KEYの値をコピーしたばかりの公開キーに設定します。今のところ他の変数を無視できます。後で設定します。

 + BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=

4。Shopifyカスタムアプリ

Shopifyストアのカスタムアプリを作成します。まだShopifyストアを持っていない場合は、開発ストアを作成できます。

プライベートアプリを作成するときは、ビルダーがShopify在庫を取得できるように、いくつかのアクセス許可を設定する必要があります。 [構成]タブのStorefront APIでこのプレスの場合、次のすべてのアクセス許可を選択します。

次に、 API Credentialsタブで、 installクリックします。

生成されたアクセストークンをコピーします。

5。ビルダーをShopifyに接続します

組織内のスペースのリストから選択して、新しく作成されたスペースにアクセスします。

さまざまなストアフロントアクセスtoke（プレビューステップから）とストアドメインを求めるモーダルに迎えられる必要があります。これにより、Builder.ioはストアAPIと通信できます。

必要なキーを入力し、「Shopifyカスタムアプリを接続する」を押してください！

6. Shopifyと話すようにプロジェクトを構成します

.env.developmentと.env.productionを再度開きますが、今回は他の2つのShopifyキーを設定します。

BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=