> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 模板集成

> 将 Kleep 按钮、结账追踪和确认追踪添加到您的 SFRA 模板中

<Note>
  以下所有更改均已包含在 `int_kleep_sfra` 中。如果您在自定义品牌 Cartridge 中覆盖了这些模板，可以从 `int_kleep_sfra/cartridge/templates/default` 中删除 Kleep 版本。
</Note>

## Kleep 按钮（PDP + 商品追踪）

添加到以下两个文件：

* `app_custom_brand/.../experience/components/dynamic/product/productDetails.isml`
* `app_custom_brand/.../product/productDetails.isml`

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="product/components/kleepButton" />
```

放置在以下内容**正前方**：

```html theme={null}
<!-- Attributes and Quantity -->
<isinclude template="product/components/mainAttributes" />
```

您可以在 PDP 的任意位置复制 `<isinclude>` 标签——所有按钮共用一个 iframe/modal。

## 结账追踪

添加到您的结账模板：

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="common/kleepTracking" />
```

放置在以下内容**正后方**：

```html theme={null}
<!-- Step 3: Payment and Billing-->
<isinclude template="checkout/billing/billing" />
```

## 确认追踪

添加到 `app_custom_brand/.../checkout/confirmation/confirmation.isml`：

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="checkout/confirmation/kleepCheckoutCompletedTracking" />
```

放置在以下内容**正后方**：

```jsx theme={null}
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addCss('/css/checkout/checkout.css');
assets.addJs('/js/checkoutRegistration.js');
</isscript>
```