Saleor 前端商城搭建指南

Saleor 前端商城搭建指南

saleor-storefront A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack. 项目地址: https://gitcode.com/gh_mirrors/sa/saleor-storefront

项目介绍

Saleor Storefront 曾经是一个基于 GraphQL 和 Next.js 构建的响应式Web应用程序（PWA），专为Saleor电商平台设计。但请注意，此仓库已被弃用，并已由新的项目 saleor/react-storefront 取代，后者是基于React 18、Next.js 14、App Router、TypeScript、GraphQL及Tailwind CSS构建的，其设计更聚焦于最佳的电商实践，提供更现代的开发体验。

旧版的Saleor Storefront注重展示如何利用Saleor进行电商网站的搭建，但由于其不断演进的性质，不建议作为直接上线的解决方案，而是作为一个学习示例或灵感来源。

项目快速启动

快速启动新版本的Saleor Storefront，应参考最新的saleor/react-storefront仓库。以下是如何开始一个新的项目：

安装Saleor CLI（如果选择自动创建方式）

npm i -g @saleor/cli@latest

克隆react-storefront仓库

git clone https://github.com/saleor/react-storefront.git my-storefront

设置环境变量 复制并编辑.env.example到.env文件，确保设置正确的NEXT_PUBLIC_SALEOR_API_URL指向你的Saleor GraphQL API地址。

安装依赖 在项目根目录运行：

npm install 或者 pnpm i （如果你选择了pnpm）

启动开发服务器

npm run dev

这将启动开发服务器，在浏览器中打开http://localhost:3000查看你的商城前端。

应用案例和最佳实践

在新的架构下，Saleor Storefront鼓励采用模块化组件设计、Server-Side Rendering (SSR) 以及渐进式web应用的最佳实践。对于最佳实践，开发者应该关注以下几点：

利用Next.js的路由系统来组织页面逻辑和数据获取。确保SEO友好，通过Next.js的动态路由和SSG特性优化搜索引擎可见性。采用Tailwind CSS加速UI开发，保持一致性的同时支持高度可定制。使用Apollo Client高效地管理GraphQL查询和订阅。

典型生态项目

Saleor生态系统不仅仅是前端的Storefront，还包括了后端Saleor平台本身和其他可能集成的服务如支付网关（例如通过Saleor Adyen App）。为了实现完整的电商解决方案，开发者通常还会涉及到：

Saleor Platform: 提供商品管理、订单处理等核心电商功能。Payment Integration: 如配置Saleor Adyen App，通过“Apps”界面在Saleor后台完成支付服务的接入。Third-party Integrations: 根据需求集成物流、CRM或营销工具等。

确保在构建项目时，也考虑到了这些生态系统中的其他组成部分，以确保完整且功能丰富的电商平台部署。

请记住，随着技术栈和框架的更新，始终保持对最新版本的关注，以便享受更好的性能和功能支持。

saleor-storefront A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack. 项目地址: https://gitcode.com/gh_mirrors/sa/saleor-storefront