next shopify starter

next.js + tailwind CSS + Shopify入門者

現場演示•查看更多開始•在Twitter上關注我

這是一家功能齊全的電子商務商店，在前端使用Next.js + Tailwind CSS，並利用Shopify店面API與您的Shopify Backend進行互動。您可以在這裡看到現場演示。

我們使用GraphQL查詢Shopify數據，並將購物車信息存儲在LocalStorage中以持續使用用戶會話。最後 - 我們使用Shopify Checkout讓用戶購買商品。您可以在示例商店中看到此遊戲。是的 - 商店實用，您可以購買貼紙。 ？

高性能

桌面	移動的

移動響應能力

列表	大車

技術

• next.js +尾風CSS
• GraphQl
• localstorage至Persist用戶會話
• 購物
• 動詞
• 字體很棒的圖標
• Josefin Sans Google字體

如何使用

默認情況下，該商店設置為查詢並在一個集合中顯示所有產品。您可以將其擴展到查詢多個集合或您的整個商店。

關於GraphQl查詢中分頁的註釋

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和next_public_shopify_store_store_domain（它將像domain_name.myshopify.com一樣）訪問Shopify StoreFront API（請確保您已在Shopify商店設置它。請參閱您的Shopify商店。請參閱您的文檔。了解更多信息。

next_public_shopify_collection是您要插入的集合的名稱，next_public_local_storage_name是用戶將在下面存儲購物車信息的密鑰的名稱。確切的名稱並不那麼重要，儘管我建議您使其獨特，因此它不太可能與其他存儲的對象發生衝突。像YourStorifyStore的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: '',
  },
},

更新漸進式網絡應用程序（PWA）數據

更新清單文件和公共/圖像/圖標文件夾下的圖標。

您可以在線使用免費工具，例如https://realfavicongonerator.net/快速生成所有不同的圖標尺寸和favicon.ico文件。

部署

您可以使用任意數量的服務部署此功能。 Vercel和Netlify是我喜歡的，並且非常易於設置，並與您的GitHub倉庫同步。

信用

該商店的靈感來自很棒的Gatsby贓物商店，還有無數的其他開發人員比我免費提供了很棒的作品。

執照

我已經根據麻省理工學院許可證了此代碼，希望如果這可以幫助人們在Jamstack電子商務商店中導航，就像Gatsby Swag Store在我剛開始時為我所做的那樣。

給我買咖啡！ ☕

如果您確實覺得這很有用並想表示感謝，您可以給我買咖啡嗎？

您也可以從商店購買一些狗狗貼紙！ ？