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
• 重新添加下一步/效果更好的效果