nextjs woocommerce

星曆史

Next.js電子商務網站，帶有WooCommerce後端

實時網址：https：//next-woocommerce.dfweb.no

目錄（TOC）

• 安裝
• 特徵
• 問題
• 故障排除
• 托多

安裝

1. 在WordPress插件目錄中安裝並激活以下所需插件：

• WordPress的WooCommerce電子商務。
• wp-graphql暴露了WordPress的GraphQl。
• WP-GraphQL-WooCommerce將WooCommerce功能添加到WPGraphQL模式。
• WP-Algolia-woo-indexer WordPress插件由我編碼。將WooCommerce產品發送到阿爾戈利亞。搜索工作所必需的。

可選插件：

• 無頭字可以禁用前端，因此只能訪問後端。 （選修的）

當前版本已經進行了測試，並已確認使用以下版本：

• WordPress版本6.6.2
• WooCommerce版本7.4.0
• WP GraphQL版本1.13.8
• WOographQL版本0.12.0
• WPGRAPHQL CORS版本2.1

2. 對於調試和測試，請安裝：

   https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/（firefox）

   https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkkkbebapilgoeccciglkfbmbmbmbnfm（chrome）

3. 確保WooCommerce已經有一些產品

4. 克隆或分叉存儲庫並修改.env.example並將其重命名為.env

   然後在Vercel或您首選的託管解決方案中相應地設置環境變量。

   請參閱https://vercel.com/docs/environment-variables

5. 根據您的設置修改值

6. 使用npm run dev啟動服務器

7. 在WooCommerce中啟用COD（現金按需）付款方式

8. 將產品添加到購物車

9. 繼續結帳（gåtilkasse）

10. 填寫您的詳細信息並下訂單

特徵

• Next.js版本14.3.11
• React版本18.3.1
• 打字稿
• 與劇作家一起測試
• 連接到WooCommerce GraphQl API，並列出產品的名稱，價格和顯示圖像
• 支持簡單產品和可變產品
• 與WooCommerce一起處理和結帳（目前僅現金交貨）
• Algolia搜索（需要Algolia-woo-indexer）
• 盡可能滿足WCAG可訪問性標準
• 沒有圖像的產品的佔位符
• Apollo客戶端與GraphQl
• React Hook形式
• 本機HTML5形式驗證
• 帶有製定運動，樣式組件和動畫的動畫
• 使用樣式組件創建的加載微調器
• 在導航期間顯示頁面負載進度的NProgress
• 完全響應的設計
• 類別和產品清單
• 顯示庫存狀態
• 帶有內置的NextJS功能的漂亮URL
• tailwind 3用於造型
• JSDOC評論

故障排除

我收到一個未定義的購物車或其他GraphQl錯誤

檢查您是否正在使用WP-GraphQL-WooCommerce插件的0.12.0版本

產品頁面沒有加載

檢查產品的屬性。目前，應用程序需要尺寸和顏色。

問題

總體而言，該應用程序正在按預期工作，但在生產環境中尚未進行廣泛的測試。在將其部署在生產環境中之前，需要進行更多的測試和調試。

話雖如此，請記住以下內容：

• 目前，只有簡單的產品和可變產品沒有任何問題。其他產品類型不起作用。
• 目前僅支持交貨現金（COD）。稍後可能會添加更多付款方式。

該項目通過Browserstack進行了測試。

托多

• 將總計添加到購物車/結帳頁面
• 複製賬單地址到運輸地址
• 添加訂單儀表板並需要登錄
• 隱藏不庫存的產品
• 添加更好的SEO
• 重新添加下一步/效果更好的效果