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.js + Shopifie示例此逐步視頻指南：

入門

先決條件

本指南將假設您已安裝了以下軟件：

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 Space的公共API密鑰。

注意：此命令還將在創建新的空間中將一些啟動器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密鑰（“ 012345ABCDEF0123456789BCDEF0123”）。

該啟動器項目使用dotenv文件來配置環境變量。在您喜歡的文本編輯器中打開文件.ENV。開發和.env。生產，並將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.開發和.env.。

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