i18n(zh-cn): Create ecommerce.mdx (#7114)

* i18n(zh-cn): Create ecommerce.mdx * i18n(zh-cn): Update ecommerce.mdx * i18n(zh-cn): Update ecommerce.mdx * i18n(zh-cn): Update nav.ts * Update src/content/docs/zh-cn/guides/ecommerce.mdx Co-authored-by: liruifengv <[email protected]> * Update src/content/docs/zh-cn/guides/ecommerce.mdx Co-authored-by: Senhsucht <[email protected]> * Update src/content/docs/zh-cn/guides/ecommerce.mdx Co-authored-by: Senhsucht <[email protected]> * Update src/content/docs/zh-cn/guides/ecommerce.mdx Co-authored-by: Senhsucht <[email protected]> * Update src/content/docs/zh-cn/guides/ecommerce.mdx Co-authored-by: Senhsucht <[email protected]> * Update ecommerce.mdx --------- Co-authored-by: liruifengv <[email protected]> Co-authored-by: Senhsucht <[email protected]> Co-authored-by: Paul Valladares <[email protected]>
withastro · Mar 4, 2024 · 7710bf7 · 7710bf7
1 parent 274fc8c
commit 7710bf7
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 0 deletions.
diff --git a/src/content/docs/zh-cn/guides/ecommerce.mdx b/src/content/docs/zh-cn/guides/ecommerce.mdx
@@ -0,0 +1,194 @@
+---
+title: 电子商务
+description: 向你的 Astro 网站添加电子商务选项的介绍
+i18nReady: true
+---
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import ReadMore from '~/components/ReadMore.astro'
+
+使用 Astro，你可以构建多种电子商务选项，从结账链接到托管支付页面，再到使用支付服务 API 构建整个商店前台。
+
+## 支付处理叠加层
+
+一些支付处理服务（例如 [Lemon Squeezy](#lemon-squeezy)、[Paddle](#paddle)）添加了支付表单，允许你的客户在你的网站上进行购买。这些可以是托管的叠加层或嵌入在你网站的某个页面中。它们可能提供一些基本的自定义或网站品牌化，并且可以作为脚本、按钮或外部链接添加到你的 Astro 项目中。
+
+### Lemon Squeezy
+
+[Lemon Squeezy](https://www.lemonsqueezy.com/) 是一个全能型的支付和订阅平台，支持多币种、全球税务合规、PayPal 集成等功能。它允许你通过账户仪表板创建和管理数字产品和服务，并提供用于结账过程的产品 URL。
+
+基础的 [Lemon.js JavaScript 库](https://docs.lemonsqueezy.com/help/lemonjs/what-is-lemonjs) 允许你通过结账链接销售你的 Lemon Squeezy 产品。
+
+#### 基本用法
+
+以下是在 Astro 页面中添加 Lemon Squeezy “立即购买”元素的示例。点击此链接将打开结账页面，并允许访客完成单次购买。
+
+1. 将以下 `<script>` 标签添加到页面的 `head` 或 `body` 中：
+
+    ```html title="src/pages/my-product-page.astro"
+    <script src="https://app.lemonsqueezy.com/js/lemon.js" defer></script>
+    ```
+2. 在页面上创建一个锚点标签，链接到你的产品 URL。点击时包含类 `lemonsqueezy-button` 以打开结账叠加层。
+
+    ```html title="src/pages/my-product-page.astro"
+    <a class="lemonsqueezy-button" href="https://demo.lemonsqueezy.com/checkout/...">
+      立即购买
+    </a>
+    ```
+
+#### Lemon.js
+
+Lemon.js 还提供了额外的行为，例如[以编程方式打开叠加层](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays)和[处理叠加层事件](https://docs.lemonsqueezy.com/help/lemonjs/opening-overlays)。
+
+<ReadMore> 阅读 [Lemon Squeezy 开发者入门指南](https://docs.lemonsqueezy.com/guides/developer-guide)了解更多信息。</ReadMore>
+
+### Paddle
+
+[Paddle](https://www.paddle.com/) 是一种数字产品和服务的计费解决方案。它通过一个叠加层或内联结账处理支付、税务和订阅管理。
+
+[Paddle.js](https://developer.paddle.com/paddlejs/overview) 是一个轻量级的 JavaScript 库，让你使用 Paddle 构建丰富、集成的订阅计费体验。
+
+#### 基本用法
+
+以下是在 Astro 页面中添加 Paddle “立即购买”元素的示例。点击此链接将打开结账页面，并允许访客完成单次购买。
+
+在 Paddle 批准你的默认支付链接域名（你自己的网站）之后，你可以将页面上的任何元素通过使用 HTML 数据属性转变为触发结账叠加层的触发器。
+
+1. 在你的页面 `head` 或 `body` 中添加以下两个 `<script>` 标签：
+
+    ```html title="src/pages/my-product-page.astro"
+    <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
+    <script type="text/javascript">
+      Paddle.Setup({ 
+        token: '7d279f61a3499fed520f7cd8c08' // 请替换为客户端 token
+      });
+    </script>
+    ```
+2. 通过添加 `paddle_button` 类，将页面上的任何元素变成 Paddle 结账按钮：
+
+    ```html title="src/pages/my-product-page.astro"
+    <a href="#" class="paddle_button">立即购买</a>
+    ```
+3. 添加一个 `data-items` 属性来指定你的产品的 Paddle `priceId` 和 `quantity`。你也可以选择性地传递额外的[支持的 HTML 数据属性](https://developer.paddle.com/paddlejs/html-data-attributes)来预填充数据、处理结账成功，或者设置你的按钮和结账叠加层的样式：
+
+    ```html title="src/pages/my-product-page.astro"
+    <a 
+      href="#" 
+      class="paddle_button"
+      data-display-mode="overlay"
+      data-theme="light"
+      data-locale="en"
+      data-success-url="https://example.com/thankyou"
+      data-items='[
+        {
+          "priceId": "pri_01gs59hve0hrz6nyybj56z04eq", 
+          "quantity": 1
+        }
+      ]'
+    >
+      立即购买
+    </a>
+    ```
+
+#### Paddle.js
+
+与其通过 HTML 数据属性传递数据，不如使用 JavaScript 向结账叠加层发送数据，以便传递多个属性并实现更大的自定义化。你还可以使用内联结账创建升级工作流程。
+
+<ReadMore>阅读更多关于[使用 Paddle.js 构建内联结账](https://developer.paddle.com/build/checkout/build-branded-inline-checkout)的信息。</ReadMore>
+
+## 功能齐全的电子商务解决方案
+
+为了让你的网站购物车和结账流程有更多自定义选项，你可以将更完整的金融服务提供商（例如 [Snipcart](#snipcart)）连接到你的 Astro 项目。这些电子商务平台还可能与其他第三方服务集成，用于用户账户管理、个性化、库存和分析。
+
+### Snipcart
+
+[Snipcart](https://snipcart.com/) 是一个强大的，以开发者为优先的 HTML/JavaScript 购物车平台。
+
+Snipcart 还允许你与第三方服务集成，例如运输提供商，启用 webhooks 以实现高级的电子商务集成，介于你的购物车和其他系统之间，从多个支付网关（例如 Stripe、Paypal 和 Square）中选择，自定义电子邮件模板，甚至提供现场测试环境。
+
+:::tip
+想要一个预构建的 Snipcart 解决方案吗？查看 [`astro-snipcart`](https://astro-snipcart.vercel.app/)，一个功能齐全的 Astro 社区模板，包括一个可选的设计系统，准备好让你与现有的 Snipcart 账户集成。
+:::
+#### 基本用法
+
+以下是在 Astro 页面上配置 Snipcart 结账和添加“添加到购物车”以及“立即结账”按钮元素的示例。这将允许你的访客将产品添加到购物车中，而不会立即被发送到结账页面。
+
+<ReadMore>完整的指导，包括设置你的 Snipcart 商店，请参见 [Snipcart 安装文档](https://docs.snipcart.com/v3/setup/installation)。</ReadMore>
+
+1. 在页面的 `<body>` 元素后添加脚本，如 [Snipcart 安装说明](https://docs.snipcart.com/v3/setup/installation)中所示。
+    ```html title="src/pages/my-product-page.astro"
+    <body></body>
+    <script>
+      window.SnipcartSettings = {
+        publicApiKey: "YOUR_API_KEY",
+        loadStrategy: "on-user-interaction",
+      };
+
+      (function()...); // 可从 Snipcart 文档中获取
+    </script>
+    ```
+
+2. 根据 [可用的 Snipcart 设置](https://docs.snipcart.com/v3/setup/installation#setting2)自定义 `window.SnipcartSettings`，以控制购物车的行为和外观。
+
+    ```html title="src/pages/my-product-page.astro"
+    <script>
+      window.SnipcartSettings = {
+        publicApiKey: "YOUR_API_KEY",
+        loadStrategy: "manual",
+        version: "3.7.1",
+        addProductBehavior: "none",
+        modalStyle: "side",
+      };
+
+      (function()...); // 可从 Snipcart 文档中获取
+    </script>
+    ```
+
+3. 在任何 HTML 元素上添加 `class="snipcart-add-item"` 属性，例如 `<button>`，点击时可以将商品添加到购物车。同时包括其他数据元素，用于 [Snipcart 常见商品属性](https://docs.snipcart.com/v3/setup/products) 如价格和描述，以及任何可选字段。
+
+    ```html title="src/pages/my-product-page.astro"
+    <button 
+      class="snipcart-add-item"
+      data-item-id="astro-print"
+      data-item-price="39.99"
+      data-item-description="一个装裱好的 Astro 标志印刷品。"
+      data-item-image="/assets/images/astro-print.jpg"
+      data-item-name="Astro 印刷品"
+      data-item-custom1-name="框架颜色"
+      data-item-custom1-options="棕色|银色[+10.00]|金色[+20.00]"
+      data-item-custom2-name="配送说明"
+      data-item-custom2-type="textarea"
+    >
+      
+      加入购物车
+    </button>
+    ```
+
+4. 添加一个带有 `snipcart-checkout` 类的 Snipcart 结账按钮，以打开购物车并允许访客通过结账模态框完成购买。
+
+    ```html title="src/pages/my-product-page.astro"
+    <button class="snipcart-checkout">点击这里结账</button>
+    ```
+
+#### Snipcart JavaScript SDK
+
+[Snipcart JavaScript SDK](https://docs.snipcart.com/v3/sdk/basics) 允许你以编程方式配置、自定义和管理你的 Snipcart 购物车。
+
+这使你能够执行如下操作：
+
+- 检索当前 Snipcart 会话的相关信息，并对购物车执行特定操作。
+- 监听即将到来的事件并动态触发回调。
+- 监听状态变化并接收购物车状态的完整快照。
+
+<ReadMore>查看 [Snipcart 文档](https://docs.snipcart.com/v3/) 了解更多关于如何将 Snipcart 集成到你的 Astro 项目中的所有选项。</ReadMore>
+
+#### `astro-snipcart`
+
+有两个 `astro-snipcart` 社区包可以简化使用 Snipcart 的过程。
+
+- [`@lloydjatkinson/astro-snipcart` Astro 模板](https://astro-snipcart.vercel.app/)：这个 Astro 模板包含了一个可选的设计系统，为你提供了一个开箱即用的完整电子商务解决方案。在其丰富的文档站点上了解更多信息，包括[构建 `astro-snipcart` 背后的动机](https://astro-snipcart.vercel.app/motivation)，作为提供一个方便的、Astro 原生的方式，让你与 Snipcart API 交互。
+
+- [`@Adammatthiesen/astro-snipcart` 集成](https://github.com/Adammatthiesen/astro-snipcart)：这个集成深受 `astro-snipcart` 主题的启发，提供了可以添加到现有 Astro 项目中的 Astro 组件（或 Vue 组件），用于创建产品、控制购物车等。查看[完整教程](https://matthiesen.xyz/blog/getting-started-with-my-astro-snipcart-addon)了解更多信息。
+
+## 社区资源
+
+- [实践经验：使用 Astro 构建电子商务商店？](https://crystallize.com/blog/building-ecommerce-with-astro)
diff --git a/src/i18n/zh-cn/nav.ts b/src/i18n/zh-cn/nav.ts
@@ -52,6 +52,7 @@ export default NavDictionary({
 	'guides/endpoints': 'API 端点',
 	'guides/data-fetching': '数据获取',
 	'guides/middleware': '中间件',
+	'guides/ecommerce': '电子商务',
 	'guides/testing': '测试',
 	'guides/authentication': '身份认证',
 	'guides/troubleshooting': '故障排除',