next shopify starter
1.0.0
ライブデモ•より多くのスターターを見る•Twitterで私に従ってください
これは、フロントエンドでnext.js + tailwind cssを使用し、ShopifyストアフロントAPIを活用してShopifyバックエンドと対話する完全に機能するeコマースストアです。ここでライブデモを見ることができます。
GraphQLを使用してShopifyデータを照会し、CART情報をLocalStorageに保存してユーザーセッションを保存します。最後に、Shopifyチェックアウトを使用して、ユーザーにアイテムを購入させます。このプレイはサンプルストアで見ることができます。はい - ストアは機能的で、ステッカーを購入できます。 ？
| デスクトップ | 携帯 |
 |  |
| リスト | カート |
 |  |
デフォルトでは、ストアは1つのコレクションにすべての製品をクエリして表示するように設定されています。これを拡張して、複数のコレクションまたはストア全体を照会できます。
GraphQLクエリはすべて、Shopifyによって250に設定されている製品/バリアント/画像の最大数をプルするためにハードコードされています。物事をシンプルに保つためにこれを行いました。ページネーションはクエリを複雑にし、ほとんどのユースケースで250個のアイテムで十分です。
ページネーションが必要な場合は、すべてのアイテムを取得するまで、カーソルフィールドを追跡し、データを照会し続ける必要があります。
ルートディレクトリに.env.localファイルを作成します。これらの4つの変数を追加する必要があります。
NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=
next_public_shopify_store_front_access_token and next_public_shopify_store_domain（domain_name.myshopify.comのようなものになります）は、Shopify StoreFront APIにアクセスするために必要です（Shopify Storeに設定していることを確認してください。
next_public_shopify_collectionは、あなたが引き込みたいコレクションの名前であり、next_public_local_storage_nameは、ユーザーがカート情報を保存するキーの名前です。正確な名前はそれほど重要ではありませんが、他の保存されているオブジェクトと衝突する可能性が低くなることをお勧めします。 YourStorenAmeshopifyStoreのようなYourStorenameがあなたのShopifyストアの名前で十分です。
プロジェクトディレクトリに変更し、次のコマンドを実行します。
yarn && yarn dev
[next.config.jsファイル]でサイトメタデータを更新できます。
env: {
siteTitle: 'Your Company',
siteDescription: 'Your company description.',
siteKeywords: 'your company keywords',
siteUrl: 'https://doggystickers.xyz',
siteImagePreviewUrl: '/images/main.jpg',
twitterHandle: '@your_handle'
}
Tailwind.config.jsファイルでカラーパレットを更新できます。
colors: {
palette: {
lighter: '',
light: '',
primary: '',
dark: '',
},
},
Public/Images/Iconsフォルダーの下のManifest.jsonファイルとアイコンを更新します。
https://realfavicongenerator.net/などの無料のツールをオンラインで使用して、すべての異なるアイコンサイズとfavicon.icoファイルをすばやく生成できます。
これを任意の数のサービスを使用して展開できます。 VercelとNetlifyは私が好むものであり、GitHubリポジトリと非常に簡単にセットアップして同期できます。
この店は、素晴らしいギャツビーの盗品店や、無料で素晴らしい作品を出した私よりもはるかに能力がある他の数え切れないほどの開発者に触発されました。
私が最初に始めたときにギャツビーの盗品店が私のために行ったように、これが人々がジャムスタックのeコマースストアの周りをナビゲートするのに役立つことを期待して、私はこのコードをMITライセンスの下で開きました。
あなたがこれを有用で見つけて、あなたの感謝を見せたいなら、あなたは私にコーヒーを買うことができますか？
店から犬のステッカーを購入することもできます！ ？
