demo store
1.0.0
このデモ ストアは、Commerce Layer を利用した完全に静的な e コマース ソリューション (SSR 機能付き) です。ストアはフル機能で完全に動作し、サードパーティのサービスは必要ありません。さまざまなレベルのカスタマイズを行って、独自のカスタマイズを簡単に行うことができます。さらに詳しく知りたい方は読み続けてください。
デモ ストア プロジェクトは 2 つのリポジトリで構成されており、これは GitHub テンプレートです。
Commerce Layer は、マルチマーケットコマース API および注文管理システムであり、Web サイト、モバイル アプリ、チャットボット、ウェアラブル、音声、または IoT デバイスにグローバル ショッピング機能を簡単に追加できます。すでに習得し愛用している最高のツールでスタックを構成します。超高速、エンタープライズ グレードの安全な API を通じて、あらゆるエクスペリエンスをどこでもショッピング可能にします。
私たちは、包括的な e コマース Web サイト エクスペリエンス (CMS、検索、PIM など) を作成するために通常使用されるすべてのサードパーティ サービスを削除して、デモ ストアを構築することにしました。
コンテンツに関連するものはすべて JSON ファイルとして保存されます。独自のデモ ストアを構築するには、これらのファイルを手動またはスクリプト経由で作成する必要があります。
デモ ストアには次のものが付属します。
Commerce Layer との統合は、特に次のようなオープンソース開発者ツールの一部を活用することで実現されます。
デモ ストア プロジェクトは、追加する必要があるカスタマイズの量に基づいて、独自のストアを構築するために活用できる 2 つのリポジトリで構成されています。
demo-store
これは、後述のdemo-store-core gitサブモジュールとして使用するGitHubテンプレートです。 Commerce Layer デモ ストアの機能と外観に満足している場合は、このパスに従うことをお勧めします。ソース コード全体を気にする必要がなくなり、データとコンテンツだけに集中できるようになります。さらに、次のコマンドを実行するだけで、ほとんどリスクなしで無料のアップデートを入手できます。
git submodule update --remote
npm install demo-store-core
このリポジトリにはソース コードが含まれています。ストア (動作、UI、UX など) を完全にカスタマイズする必要がある場合は、このリポジトリをフォークして独自のリポジトリを作成するだけです。これも貢献の方法です。
️ このパスに従って、元のソース コードから大きく乖離し始めると、今後の更新がすべて失われるか、複製できなくなるリスクがあることに注意してください。
Commerce Layer の使用経験がない場合は、アカウントを作成し (無料です!)、オンボーディング チュートリアルに従うことから始めることができます。
重要
デモ ストアをセットアップするには、少なくともいくつかの製品と 1 つの市場を備えた適切に構成された組織が必要であることに注意してください。
最初から開始したい場合は、新しい組織を作成し、次のコマンドを使用して Commerce Layer のデモ ストアのようなプロジェクトを構成できます。
組織を作成したら、販売チャネルと統合という 2 つの API クライアントを作成する必要があります。
まだインストールしていない場合は、Commerce Layer CLI とその 2 つのプラグイン (シーダー プラグインとインポート プラグイン) をインストールします。
npm install -g @commercelayer/cli
commercelayer plugins:install seeder
commercelayer plugins:install importsこれで、CLI から統合 API クライアントにログインできるようになりました。
commercelayer applications:login
--clientId Oy5F2TbPYhOZsxy1tQd9ZVZ...
--clientSecret 1ZHNJUgn_1lh1mel06gGDqa...
--organization my-awesome-organization
--alias cli-admin組織をセットアップしたら、ストアを構築するには、いくつかの簡単な手順に従う必要があります...始めましょう!
どちらのパスを選択する場合でも、まずストア用に新しいリポジトリを作成する必要があります。
demo-storeテンプレートを保持することに決めた場合は、GitHub のリポジトリ ホームページから[このテンプレートを使用する]をクリックして、次を実行するだけです。
git clone < your-repository-url > my-new-project
cd my-new-project
git submodule update --init
npm install
cp ./demo-store-core/packages/website/.env.sample.submodule .env.local
cp -r ./demo-store-core/packages/website/data/json ./data/json demo-store-coreリポジトリをフォークすることにした場合は、代わりにこれを実行できます。
git clone < your-repository-url > my-new-project
cd my-new-project
npm install
cp ./packages/website/.env.sample ./packages/website/.env.local.env.localを編集し、不足している情報をすべて入力します。
# this is the 'sales channel' client id
NEXT_PUBLIC_CL_CLIENT_ID =er34TWFcd24RFI8KJ52Ws6q...このステップはオプションです。 Commerce Layer アカウントに適切に構成された組織がすでにある場合は、それをスキップできます。
次のスクリプトは、Commerce Layer (デモ ストアに使用しているもの) を使用してマルチマーケット e コマースを構築するために必要なすべてのリソースを組織に取り込みます。
npm run seeder:seed -ws --if-present上記のコマンドがエラーなしで実行された場合は、ステップ 4 に進んでください。それ以外の場合でも、CLI を使用して次のコマンドを実行してサンプル データを組織にシードできます。
commercelayer seeder:seed -b custom -n demo_store_full -u ./demo-store-core/packages/setup/json/countries.jsonファイルには、e コマースで利用可能な国のリストが含まれています。好みのエディターで変更できます。 "market": xxxのすべての結果を組織の関連市場に置き換えてください。マーケットのリストは、Commerce Layer 管理ダッシュボードから、または次のコマンドを実行して取得できます。
npm run markets -ws --if-presentnpm run dev
# http://localhost:3000/ demo-store-coreの最新コードは、 mainブランチでいつでも見つけることができます。
デモ ストアを最新の変更に更新するには、次のコマンドを実行するだけです。
git submodule update --remote
npm install新しいメジャー バージョンに重大な変更が含まれる場合があります。この場合、最新に更新するとデモ ストアが動作しなくなる可能性があるため、リリース ノートに従ってすべての問題を手動で解決する必要があります。
ご希望に応じて、新しいバージョンがリリースされるとすぐに GitHub 通知を受け取ることができます。
デモ ストア テンプレートを使用している場合、コンテンツ データ、ロケール、構成ファイルの 3 つの主要な要素をカスタマイズできます。
️ 新しい機能を追加し、既存の機能を最適化するために、デモ ストアを継続的に改善する予定です。最新リリースに更新すると、ビルドが失敗する可能性があります。リリース ノートを参照して、カスタマイズしたファイルを更新して問題を修正する方法を理解してください。
前述したように、デモ ストアは JSON ファイルとして保存された一連のデータを中心に構築されており、サードパーティのサービスから切り離されています。ストアを構築するには、これらのファイルを作成して管理する必要があります。
JSON ファイルはdata/json/にありますが、環境変数NEXT_PUBLIC_JSON_DATA_FOLDER変更することで別の場所を選択できます。
型定義ファイルはpackages/types/src/json/にあります。スキーマ検証には zod を使用しています。これらのファイルを見て、どの構造に従う必要があるかを理解してください。
すべての変更が完了したら、以下を実行してすべてが正しいかどうかを確認できます。
npm run test:data
当社のデモ ストアは多言語 Web サイトです。前のステップでデータを構築したとき、おそらく一部のフィールドがローカライズされていることに気づいたでしょう。新しい言語を追加したり、既存の翻訳を変更したりできます。
ロケール JSON ファイルはdata/locales/にありますが、環境変数NEXT_PUBLIC_LOCALES_DATA_FOLDER変更することで別の位置を選択できます。
ロケールのカスタマイズを開始するには、次の手順を実行します。
cp -r ./demo-store-core/packages/website/data/locales ./data/locales # .env.local
NEXT_PUBLIC_LOCALES_DATA_FOLDER =../../../data/locales/構成ファイルはconfig/にありますが、環境変数NEXT_PUBLIC_CONFIG_FOLDER変更することで別の場所を選択できます。
管理できる構成ファイルは 3 つあります。
general.config.js
このファイルには一般的な構成が含まれています。
facets.config.js
これはファセット構成ファイルです。フィルター パネルに表示される順序、値の外観、値の並べ替え規則を選択できます。 
variants.config.js
これはバリアント設定ファイルです。商品詳細ページに表示される順序と外観を選択できます。 
構成のカスタマイズを開始するには、次の手順を実行します。
cp -r ./demo-store-core/packages/website/config ./config # .env.local
NEXT_PUBLIC_CONFIG_FOLDER =../../../config/ストアをカスタマイズするために使用できる環境変数がいくつかあります。完全なリストと説明については、Additional-env.d.ts ファイルを参照してください。
デモ ストアは好きな場所にデプロイできます。次のことを行うだけです。
デモ ストアは何よりもまず SSG として設計されていますが、すぐに SSR に切り替えることができます。これをデプロイするためのいくつかの方法 (GitHub Workflow、Netlify、Vercel などを使用するなど) をテストしました。詳細については、こちらをご覧ください。別の方法で実行した場合、または他のサービスを使用した場合で、その手順をコミュニティと共有したい場合は、ディスカッションに参加してください。よろしくお願いします。
デモ ストアを構築してデプロイするには、次の手順を実行します。
それに応じて次の環境変数を設定します。
NEXT_PUBLIC_DATA_FETCHING =ssg npm run build実行して、アプリケーションの静的に最適化された運用ビルドを作成します。
フォルダーdemo-store-core/packages/website/outを優先静的ホスティングにコピーします。
デモ ストアは、Node.js をサポートする任意のホスティング プロバイダーにデプロイできます。そのためには:
それに応じて次の環境変数を設定します。
NEXT_PUBLIC_DATA_FETCHING =ssr npm run build実行して、アプリケーションの最適化された運用ビルドを作成します。
npm start実行して、Node.js サーバーを運用モードで起動します。
Q. NEXT_PUBLIC_JSON_DATA_FOLDER 、 NEXT_PUBLIC_LOCALE_DATA_FOLDER 、 NEXT_PUBLIC_CONFIG_FOLDERを変更しても、Web サイトは以前のファイルを参照したままになります。
A.これらの環境変数は、Webpack のaliasとして使用されます。 Webpack 5 からは、ビルドを高速化するためのキャッシュが導入されました。これらの環境変数を変更しても、Webpack キャッシュは無効になりません。 .nextフォルダーを手動で削除するか、次のコマンドを実行して削除する必要があります。
# update the path if needed
rm -rf demo-store-core/packages/website/.next/このリポジトリは MIT ライセンスに基づいて公開されています。
