commercejs nextjs demo store
1.0.0
commerce.js SDKとnext.jsを使用して構築された、高忠実度のある本格的なeコマースデモストア。
注記
このREADMEは、本格的なeコマーステンプレートで立ち上がって実行することを導きます。このテンプレートを、1つのクリックデプロイを直接[NetLify]に設定しました。または、ホスティングプラットフォームの選択に手動で展開できます。
このJamstack eコマースアプリケーションの構築に関する詳細なチュートリアルについては、こちらをご覧ください。
yarn global add @chec/cli ChecCLIをグローバルにインストールしたので、 chec [COMMANDS]のリストにアクセスできるようになります。先に進んで、そのセットアップをしましょう！
# Open the Chec registration page in your browser
chec registerウォークスルーの残りの部分に従って、マーチャントの詳細をセットアップします。または、ここにアクセスして小切手アカウントに登録することもできます。
ワンクリック展開を使用すると、NetlifyをGitHubアカウントに接続してcommercejs-nextjs-demo-storeリポジトリをクローン化し、自動的に展開できます。 [展開]ボタンをクリックする前に、必ずNetlifyにアクセスしてアカウントにサインアップしてください。
上記のボタンをクリックすると、プロジェクトのリポジトリがURLのパラメーターとして渡された状態で、Netlifyのダイレクトデプロイページに移動します。 [接続]ボタンをクリックし、リポジトリに名前を付けて、この公開キーに入力します。デモストアのライブ展開プレビューであなたを立ち上げて実行する目的で、デモマーチャントアカウントの公開鍵を提供してくれました。次に、サイトを保存して展開します。
提供されたデモマーチャントキーではなく、公開キーに入力すると、初期ビルドが失敗することに注意してください。ワンクリックデプロイは、プレゼンテーションを目的として、クイックデプロイをスピンアップするためのものです。マーチャントアカウントを使用すると、複数の資産や製品に関連付けられたカテゴリなどの適切なデータが必要になることを意味します。マーチャントアカウントを使用したい場合は、以下の手動セットアップ手順に従ってください。
手動のセットアップでは、リポジトリをローカル環境にクローニングし、提供されたサンプルデータを小切手アカウントにシードし、展開して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キーにアクセスし、[開発]タブに移動して、公開キーとシークレットキーをコピーすることができます。提供されたNEXT_PUBLIC_CHEC_PUBLIC_KEY独自のものに置き換え、 .envファイルでCHEC_SECRET_KEYを入力します。シードスクリプトが小切手アカウントに/seedsにサンプルデータをシードするための適切な許可を得るには、秘密の鍵が必要です。データがシードされたら、シークレットキーを削除します。
# .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。チェックストアの電源を入れて開発環境を開始するために必要なデータをシードします（初期セットアップに必要）。
# 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から自動的に入力されます。環境変数を入力するには、 [Advancedを表示してから新しい変数を表示し、 NEXT_PUBLIC_CHEC_PUBLIC_KEYとしてキー入力を入力し、[公開キー]で値入力をクリックします。セットアップ中のチェックダッシュボードのAPIキーにアクセスしてから、[開発者]タブに移動して[公開キー]をコピーできます
さあ、先に進み、「展開サイト」をクリックしてライブサイトを表示してください！
このコマンドは、GitHubからこの例プロジェクトをダウンロードし、マシンで初期化します。ダウンロードされたコードを自由に編集し、その後commerce.jsで遊ぶことができます。
ステップ1。CLIをインストールします
npm install -g @chec/cli
# or
yarn add -g @chec/cliステップ2。デモストアを作成します
chec demo-store
リストからデモストアを選択するように求められたら、「commercejs-nextjs-demoストア」を選択します。また、このコマンドは、いくつかのサンプルデータを小切手アカウントにシードします。詳細については、CLIのドキュメントを参照してください。
このプロジェクトは、カスタムデザインとユーザーフローを紹介する本格的なストアフロントであるため、チェックダッシュボードでデータをカスタマイズすると、実行する特定の警告があります。 Gotchaの1つは、UIのカテゴリデータにあります。CepisAPIにメタデータとしてCech APIに追加されています。新規を追加したり、Seeded Sampleカテゴリデータを編集したりすると、 public/images/collectionの下に画像資産を置き換えて、カテゴリ機能画像をカスタマイズできます。ファイル名は同じままである必要があります。ファイル名を変更したり、新しいカテゴリを追加したりすることを計画している場合は、新しいメタデータを追加する必要があります。アプリは、コンポーネントを構築およびレンダリングするために、以下の在庫セットアップを期待するので、バックエンドでインベントリをカスタマイズしたい場合は、次のことを確認してください。
public/images/collectionの下の画像を独自の画像に配置しますこのデモストアでは、Commerce.jsが提供し、チェックダッシュボードを搭載したさまざまな機能を使用しています。
ショッピングカートでは、Commerce.js Cart APIを使用しています。カートは最大30日間持続し、commerce.jsは訪問者向けのカートを自動的に覚えています。
Commerce.jsは、チェックアウトの実装を合理化するための多くのツールを提供します。このデモストアのチェックアウトは、次のことを使用しています
Commerce.jsは、サーバーサイドコードなしで顧客ログインをサポートするための組み込み機能を提供します。このデモストアには、既存の顧客ログインページがあり、以前の注文に関する詳細を提供します。顧客情報は、既知の顧客の詳細でチェックアウトを事前に入力するためにも使用されます。
このデモストアは、チェック「テストゲートウェイ」を箱から出して構成されており、ストアフロントのテスト中に便利な支払いオプションを提供します。さらに、Stripeがチェックダッシュボードで構成されている場合、Stripe Elementsサポートが含まれています。
Commerce.js <> Stripe Integrationドキュメント
提供された指示に従って、チェックダッシュボードでストライプを有効にする必要があります。 Stripe用のサンドボックスキーを追加し、Sandbox Chec Public APIキーを使用して、ストライプでテストすることができます。 Chec Public APIキーとStripeの「公開可能」キーの両方が、 .envファイルで構成されています。 「手動のセットアップとネットライフの展開」のステップ2を参照してください
このプロジェクトをフォークして、必要なデモをカスタマイズして拡張します。ここにあなたができることのいくつかのアイデアと、あなたがeコマースをとることができる方向を紹介します。
