commercejs nextjs demo store下載commercejs nextjs demo store源代碼下載

commercejs nextjs demo store

Ai源碼

1.0.0

下載

與Commerce.js和Next.js？ ️的演示商店？

一個由Commercer.js SDK和Next.js實時部署的高保真型充分的電子商務演示商店，以netlify。

筆記

此應用是使用Commerce.JS V2 SDK構建的

概述

此讀書我將指導您使用成熟的電子商務模板來啟動和運行。我們已經為您配置了此模板，以直接部署一鍵式部署以進行NetLify。另外，您可以手動部署到您選擇的託管平台。

有關構建此Jamstack電子商務應用程序的完整詳細教程，請前往這裡。

先決條件

您選擇的IDE或代碼編輯器
節點（v8.2.0或更高）
NPM或紗
Chec Cli yarn global add @chec/cli

設定

創建一個CHEC帳戶。

現在，您已經在全球安裝了CHEC CLI，您將能夠訪問chec [COMMANDS]的列表，其中一個正在註冊CHEC帳戶。讓我們繼續進行設置！

 # Open the Chec registration page in your browser
chec register

遵循其餘的演練設置您的商人詳細信息。另外，您可以在這裡註冊CHEC帳戶。

一單擊與Netlify部署（建議）

一單擊的部署使您可以將NetLify連接到您的GitHub帳戶，以克隆commercejs-nextjs-demo-store存儲庫並自動部署它。在單擊部署按鈕之前，請務必去NetLify並註冊帳戶。

通過單擊上面的按鈕，您將被導航到NetLify的直接部署頁面，並將項目存儲庫傳遞為URL中的參數。單擊連接到GitHub按鈕，命名您的存儲庫，然後在CHEC公共密鑰輸入中輸入此公共密鑰。請注意，為了使您啟動和運行演示商店的實時部署預覽，我們向您提供了Demo Merchant帳戶中的公鑰。現在，保存和部署您的網站。

請注意，如果您輸入公共密鑰而不是提供的演示商人密鑰，則初始構建將失敗。一單擊的部署旨在用於演示目的，以旋轉快速部署。使用您的商家帳戶意味著您需要擁有適當的數據，例如與產品相關的多個資產和類別。如果您想使用您的商家帳戶，請按照下面的手動設置步驟操作。

手動設置和NetLify部署

手動設置涉及將存儲庫克隆到您的本地環境中，將提供的樣本數據播種到您的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

您可以在CHEC儀表板設置中訪問您的API鍵，然後導航到“開發”選項卡以復制您的公共密鑰和秘密鍵。用自己的NEXT_PUBLIC_CHEC_PUBLIC_KEY ，然後在.env文件中填寫CHEC_SECRET_KEY 。秘密鍵是種子腳本需要適當許可將樣本數據/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，現在應該使用示例數據填充您的網站！

如果要替換示例產品或類別，則可以在“公共/圖像/收集”下自定義自己的類別圖像。請參閱下面有關數據自定義的更多信息。

步驟5。進行所需的任何必要更改，然後將代碼推向GitHub上的存儲庫或您選擇的平台。

步驟6。部署您的網站

請確保註冊一個Netlify帳戶並登錄到該帳戶。從Git按鈕中單擊新站點，並訪問以選擇您的存儲庫。您的構建設置會自動從模板中的netlify.toml填寫。要輸入您的環境變量，請單擊“顯示為高級” ，然後單擊新變量，然後填充鍵輸入為NEXT_PUBLIC_CHEC_PUBLIC_KEY ，並使用您的公共密鑰輸入值輸入。您可以在設置下的CHEC儀表板中訪問您的API鍵，然後導航到開發人員選項卡以復制公共密鑰

現在繼續單擊“部署站點”以查看您的實時網站！

使用CHEC CLI演示命令進行設置

此命令將從github下載此示例項目，並在您的計算機上初始化。之後，您將免費編輯下載的代碼並與Commerce.js一起玩。

步驟1。安裝CHEC CLI

npm install -g @chec/cli
# or
yarn add -g @chec/cli

步驟2。創建一個演示商店

 chec demo-store

當提示從列表中選擇演示存儲時，請選擇“ Commercejs-Nextjs-Demo商店”。此命令還將某些示例數據播種到您的CHEC帳戶。有關更多信息，請參閱CHEC CLI文檔。

使用數據自定義的警告（重要）

由於該項目是一個完全露面的店面，展示了自定義設計和用戶流，因此，如果您在Chec儀表板上自定義數據，您會遇到某些警告。一個gotcha與UI中的類別數據：類別特徵圖像在CHEC API中添加為元數據。如果添加新的或編輯種子樣本類別數據，則可以通過在public/images/collection下替換圖像資產來自定義類別特徵圖像。文件名需要保持不變。如果您打算更改文件名或添加新類別，則需要添加新的元數據。該應用程序將期望以下庫存設置以構建和渲染組件，因此，如果您想在後端中自定義庫存，請確保您：