A daisyUI + Next.js template that converts your Lemon Squeezy API into an online store

上个月发布作者：Abhijeet Biswal

一个 daisyUI + Next.js 模板，可将您的 Lemon Squeezy API 转换为在线商店

将您的 Lemon Squeezy API 数据转换为专业的在线商店。

简介

建立在线商店可能是一项复杂的任务，也可能非常昂贵。我们最近添加了一个新的“在线商店模板”到 daisyUI 商店，它可以帮助您以最小的努力构建专业的在线商店。此模板使用 Next.js 构建，并从 Lemon Squeezy API 接收数据。它完全可自定义，可以部署到任何支持 Next.js 的平台。

1. 安装

从 daisyUI 商店获取“在线商店模板”，并按照以下步骤设置您的在线商店

打开项目并在您的终端中运行以下命令以安装所需的依赖项

npm install

启动开发服务器

npm run dev

这将在http://localhost:3000

2. 配置您的站点

添加 Lemon Squeezy API

默认情况下，该站点显示来自data/lemonsqueezy-products.example.json文件的示例数据。要将您的商店连接到 Lemon Squeezy，请按照以下步骤操作

生成 API 密钥
- 登录到您的Lemon Squeezy 仪表板.
- 创建一个新的 API 密钥并复制它。
将 API 密钥添加到环境变量文件

env file example

创建一个.env文件在您的项目根目录中。
添加以下行
```
LEMON_SQUEEZY_API_KEY=your_api_key_here
```

替换your_api_key_here为您之前复制的 API 密钥。

测试您的集成 重启开发服务器以加载环境变量，并查看从 Lemon Squeezy 获取的产品。

扩展产品数据

Lemon Squeezy 仪表板允许对产品数据进行有限的自定义。要增强您商店的功能，请使用data/metadata.json文件以获取更多信息。这包括

类别：添加自定义类别，例如trending,新品，或畅销品.
变体：定义产品变体（例如，尺寸、颜色），包括名称和链接。
图片：为产品图库包含高质量图片。
详情：添加详细的产品描述和技术信息。

示例metadata.json条目

{
  "id": "12345",
  "availability": true,
  "sale": true,
  "category": ["trending", "bestsellers"],
  "original_price": "$50",
  "variant": {
    "size": [
      { "name": "Small", "link": "https://example.com/small" },
      { "name": "Medium", "link": "https://example.com/medium" }
    ]
  },
  "info": {
    "Material": "100% Cotton",
    "Care Instructions": "Machine washable"
  },
  "images": ["https://example.com/image1.jpg", "https://example.com/image2.jpg"]
}

自定义站点

要个性化您商店的内容和设计，请编辑以下文件

data/site.ts：更新全局站点设置，包括站点名称、Hero 区块和页脚内容。
data/sidebar.ts：修改侧边栏内容，包括类别和快速链接。

要自定义商店的核心页面，请更新这些文件

pages route

首页(/page.tsx):

导航到app/page.tsx文件。
更新 Hero 区块、特色产品和横幅以反映您的品牌。

来自page.tsx:

export default async function Home() {
  return (
    <div>
      <Hero />
      <Features />
      <TrendingProducts />
      <Categories />
      <OfferCard />
      <NewArrivals />
      <NewsLetter />
    </div>
  );
}

的示例代码片段(类别和集合页面):
- /collections/[slug].tsx位于app/collections/[slug].tsx
- ，此文件控制类别和集合页面。

使用此文件动态管理基于类别的产品显示。(产品详情页面):

/collections/[slug].tsx/products/[slug].tsxapp/products/[slug].tsx
，此文件处理单个产品详情。

此页面动态显示产品图片、信息和变体。

const ProductDetails = () => {
  return (
    <div className="pb-20">
      <div className="mt-10 flex flex-col">
        <div className="flex flex-col lg:grid gap-6 lg:gap-12 lg:grid-cols-2">
          <ProductImage params={{ slug: slug as string }} />
        </div>
      </div>
    </div>
  );
};

3. 构建您的站点以进行生产

一旦您对您的商店感到满意，就可以构建它以进行生产了

npm run build

此命令将优化并生成您站点的静态资源，以供部署。

4. 部署选项

现在您的商店已构建完成，您可以使用以下平台之一进行部署

它也可以部署在任何 Next.js 可以工作的地方。有关更多详细信息，请参阅Next.js 部署文档.

结论

daisyUI 的“在线商店模板”简化了构建和管理在线商店的过程。借助 Lemon Squeezy API 和可自定义的 JSON 元数据，您可以灵活地创建满足您独特需求的商店。立即开始构建您的商店，并将您的业务提升到一个新的水平！

需要帮助吗？

如果您有疑问或需要帮助，请加入我们的Discord 社区。我们在这里帮助您入门并解决任何问题。

标签模板

daisyUI 博客