Logo

菜单

发布于 2026-01-06 0 阅读
0

如何使用 Snipcart 和 TakeShape 在 Jamstack 上构建电子商务网站

如何使用 Snipcart 和 TakeShape 在 Jamstack 上构建电子商务网站

按照我们的分步指南，不到 30 分钟即可创建您自己的网店。

假设你正在使用 Jamstack 为客户制作落地页和营销网站，这时一位新客户走进你的办公室，要求你搭建一个在线商店。你觉得 Jamstack 网站肯定做不到这一点，对吧？错！

事实上，说到搭建电商网站，Jamstack 绝对是最佳选择。在电商行业，转化率优化是成功的关键，而提升转化率的最佳方法之一就是拥有一个速度飞快且能随着产品扩展而不断升级的网站。

Tammy Everts在一项关于购物车放弃率的研究中发现，“为了最大限度地提高转化率，交易的每个页面——从着陆页到订单确认页——都需要……少于两秒。”对于任何数据库驱动的网站来说，在两秒内加载每个页面都是一项艰巨的任务，但对于通过 CDN 提供服务的静态网站来说，这却轻而易举！

此外，许多电子商务平台都有自己独特的数据管理方式，这些方式与其专有的网站构建器相关联，这些网站的速度比 Jamstack 上的网站慢得多。

相反，使用可根据自身需求定制的无头CMS并将其部署到全球CDN才是获得快速、稳定且转化率高的网站的最佳方式。但是，如何提供购物车、信用卡处理和订单处理等功能呢？

隆重推出Snipcart，一款适用于 Jamstack 的电子商务解决方案！

Snipcart 非常适合 Jamstack 电商平台，因为它不关心你使用哪种前端或如何管理库存。当用户点击“加入购物车”按钮时，数据会被传递给 Snipcart 的 JavaScript SDK，剩下的工作都由他们处理！他们提供购物车和结账流程；用于处理订单、弃购购物车和客户数据的控制面板；以及用于开发更强大应用程序的 API。

结合使用 TakeShape 和 Snipcart

在本演示中，我们将了解如何使用 TakeShape 的内容管理系统 (CMS) 和静态网站生成器来构建一个电子商务网站，并使用 Snipcart 来处理购物车和结账流程。所有这一切都将在 30 分钟或更短的时间内完成！

Bryan直播了他连接 TakeShape 和 Snipcart 的过程。看看他是如何弄明白它们如何协同工作的！

首先，我们将复制 TakeShape 的“Shape Shop”示例项目，并通过在页面中嵌入脚本来安装 Snipcart，从而创建我们的电商网站。然后，我们将修改“添加到购物车”按钮，使其与 Snipcart 兼容，并在 TakeShape 中更新产品信息，添加一些额外的字段。最后，我们将测试新网站，确保一切运行正常。

创建 TakeShape 示例项目

如果您是第一次使用 TakeShape，则需要注册一个免费帐户。然后，使用 Shape Shop 模板创建一个新项目，并从 GitHub 克隆入门项目：

git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples && cd takeshape-samples/shape-shop
Enter fullscreen mode Exit fullscreen mode

有关如何将项目部署到 Netlify 的更详细说明，请参阅这篇关于商店模板入门的文章。

将 Snipcart 安装到您的项目中

示例商店上线运行后，就可以开始设置 Snipcart 帐户了。

注册免费 Snipcart 帐户后，您需要按照其基本安装说明，在任何可以访问购物车的页面上添加 CSS 文件、脚本标签和额外的 div 。

创建 Snipcart 帐户后，您将进入商店的控制面板。

如果您想在导航栏中添加购物车链接，那么很可能您网站上的大多数页面都会包含购物车链接。因此，我们将把 Snipcart 的代码添加到 TakeShape 项目的默认布局中。

在 Shape Shop 项目中，这是文件layouts/default.html。Snipcart 的 CSS 文件将放在<head>其他 CSS 链接之后的元素中：

<link rel="stylesheet" href="/stylesheets/base.css"/>
<link rel="stylesheet" href="/stylesheets/feature.css"/>
<link rel="stylesheet" href="/stylesheets/footer.css"/>
<link rel="stylesheet" href="/stylesheets/header.css"/>
<link rel="stylesheet" href="/stylesheets/hero.css"/>
<link rel="stylesheet" href="/stylesheets/pagination.css"/>
<link rel="stylesheet" href="/stylesheets/products.css"/>
<link rel="stylesheet" href="/stylesheets/thumb.css"/>
<!-- Snipcart CSS file goes here -->
<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.css" />
Enter fullscreen mode Exit fullscreen mode

然后，我们将在标签div之前添加 Snipcart 的脚本和其他内容</body>：

<script src="/javascripts/main.js"></script>
<!-- Snipcart div and JS here -->
<div hidden id="snipcart" data-api-key="{{YOUR-SNIPCART-API-KEY}}"></div>
<script src="https://cdn.snipcart.com/themes/v3.0.11/default/snipcart.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

我们需要用 Snipcart 的 API 密钥替换原有密钥，该密钥可以在“账户”→“API 密钥”{{YOUR-SNIPCART-API-KEY}}下找到。我们将从“测试”模式开始，这样我们就可以使用虚拟信用卡号来检查购买流程。

![替代文本](https://dev-to-uploads.s3.amazonaws.com/i/867qq9g5rzw69rl66tu4.png)

现在，我们可以在任何页面上访问 Snipcart 的 HTML API。

使用 Snipcart 的“添加到购物车”按钮

接下来，我们修改pages/product/individual.html模板，添加 Snipcart 的“添加到购物车”按钮。

Snipcart 需要将购物车按钮识别为 HTML<button>标签而不是<a><a> 标签，因此这是我们的第一个改动。我们将替换 Shape Shop 自带的 <a> 标签。

<button class="button snipcart-add-item">
    Add to cart
</button>
Enter fullscreen mode Exit fullscreen mode

这个按钮有两个类。第一个button类用于样式设置，它内置于 Shape Shop 的默认 CSS 中。第二个snipcart-add-item类是关键，它告诉 Snipcart 的 JavaScript 代码产品信息的位置以及何时将商品添加到购物车。

接下来，我们需要通过数据属性，利用来自 TakeShape 数据的各种变量，向按钮添加更多产品详细信息。

Shape Shop 模板自带一个“产品”内容类型，其中包含了我们实现此功能所需的大部分字段。数据从 TakeShape 获取到文件中data/product.graphql，并作为“产品”变量提供给模板。

以下是添加这些数据后按钮的样式：

<button class="button snipcart-add-item"
   data-item-id="{{ product.name }}"
   data-item-price="{{ product.price }}"
   data-item-url="{{ product | route('product') }}"
   data-item-description="{{ product.description }}"
   data-item-image="{{ product.image.path | image }}"
   data-item-name="{{ product.name }}">
       Add to cart
</button>
Enter fullscreen mode Exit fullscreen mode

大部分工作是查找产品数据并将其放入 Snipcart 所需的正确数据属性中。但如果您之前做过电子商务，您可能会注意到这段代码存在一些潜在问题。

首先，data-item-id产品的唯一标识符可能不应该仅仅基于产品名称字符串。为了解决这个问题，我建议使用唯一的 SKU 编号。大多数商店的库存管理系统都内置了此功能。我们需要将此字段添加到我们的内容管理系统 (CMS) 中。

另一个潜在问题是价格始终保持不变。我们的数据中已经存在“促销价”。我​​们应该确保无论商品是否促销，都始终向 Snipcart 传递正确的价格。

在 TakeShape 中为您的产品添加 SKU 字段

首先，我们需要在 TakeShape 中进入项目，编辑产品内容类型，添加一个包含 SKU 的新字段。您可以将其命名为“SKU 编号”或“ID”，具体名称取决于客户的要求。请务必记下字段名称。

在 TakeShape 中添加 SKU 字段非常简单，只需拖动即可。

保存对内容类型的更改，然后将该新字段添加到 GraphQL 查询中data/product.graphql：

query {
  getProductList(sort: [{field: "_enabledAt", order: "desc"}]) {
    total
    items {
      _contentTypeName
      _enabledAt
      name
      skuNumber
     ...
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

之后，更新“添加到购物车”按钮中的数据/pages/product/individual.html。我们可以将其添加到模板中，并添加条件语句，以防产品没有 SKU：

data-item-id="{{ product.skuNumber if product.skuNumber else product.name }}"
Enter fullscreen mode Exit fullscreen mode

我们也会使用相同的条件语法来添加促销价格（如果有的话）：

data-item-price="{{ product.salePrice if product.salePrice else product.price }}"
Enter fullscreen mode Exit fullscreen mode

通过这些更改，当用户点击“添加到购物车”按钮时，他们将看到 Snipcart 的购物车屏幕，其中显示了他们刚刚添加的商品。

测试您的网站

在本地测试时，我们只能测试结账流程，直到点击“下单”按钮为止。之后，Snipcart 将无法抓取本地网站来检查产品信息。这是一项安全措施，旨在防止有人在开发者工具中修改价格，从而在您的网站上低价购买商品！

如果在部署网站之前测试结账功能，则会遇到此产品抓取错误。

要让您的网站上线，请使用TakeShape 的一键式 Netlify 集成来构建和部署它。Snipcart 也提供了一份指南，指导您如何设置 ngrok，以便他们的服务可以访问本地 URL。

如果你已经在开发一个线上网站，你可以在 Netlify 中设置一个基于分支的 URL，将你的新分支推送到那里并查看。

返回Snipcart 账户设置，您需要添加线上商店的域名。在“商店配置”部分，找到“域名和 URL”，并在此处添加相关信息。将网站发布到正式 URL 后，您会看到 Snipcart 会根据“添加到购物车”按钮中的数据集，将在该域名下找到的产品添加到其内容管理系统 (CMS) 的“产品”部分。

一旦您的商店在可公开访问的网址上线，Snipcart 就会将它在网站上找到的产品填充到商店中。

最后，在测试模式下完成结账流程（线上或本地）时，您可以提供以下虚拟信用卡凭证：

  • 信用卡号码：4242 4242 4242 4242
  • 安全码：123
  • 有效期：任意未来的月份/年份组合12/25，例如。
  • 邮政编码：任何邮政编码

如果一切运行正常，您应该已经成功在新 Jamstack 电子商务网站上完成了一笔测试订单！恭喜！

接下来该何去何从

本文仅仅浅谈了 Snipcart 和 TakeShape 结合使用所能实现的强大功能。您还可以创建自定义产品选项、管理店铺邮件，甚至将购物车信息添加到网站页眉！由于您掌控着数据、网站以及所有其他一切，因此您拥有绝对的控制权。

文章来源：https://dev.to/takeshape/how-to-build-an-ecommerce-site-on-the-jamstack-with-snipcart-and-takeshape-3ha3
Gatsby 和 WordPres...
使用 JavaScript 在浏览...