了解 ShopBase 订单确认页的变量参数
当关联第三方插件时,他们可能需要一些变量参数。本文将介绍 ShopBase 常用的变量参数,并如何在关联第三方插件时使用变量参数。
参考 如何添加代码到店铺。
A. 关联第三方的插件,订单确认里的变量参数
B. 常用变量参数
C. 如何使用变量参数创建代码
D. 使用 ShopBase StoreFront SDK 获取数据
运营店铺过程中,您有时需要添加第三方的代码到店铺来设置电子邮件营销或评论调查等。 ShopBase 目前支持关联一些营销插件。如果您想设置 ShopBase 尚未支持的插件可以使用他们的代码添加到店铺。
有些插件需要成功订单的变量参数。
如何安装第三方的插件,请参考下面的文档。
如何安装Trustpilot
如何添加 Google Customer Reviews 评论调查
订单付款成功之后,ShopBase 将保存订单信息和买方的信息。
下面是常见变量参数。
为了确保数据是在买方完成结账时获取,第三方插件的代码需放在 //Your 3rd party code paste in here 后面。
例如:请按照下述步骤使用 Storefront SDK 的数据添加到 Google Customer Reviews 评论调查。
复制第三方的代码。这是 Google Customer Reviews 评论调查的代码。
将第三方代码添加到 ShopBase storefront SDK 代码。
找到需要代替的变量参数,详情查看 B 目录的常用参数。
这个代码需要这些变量参数。
merchant_id: 您 Google Merchant 的ID。
order_id: order.id(订单号)。
email: order.email(下单邮箱)。
delivery_country: order.shipping_address.country_code(收件地址,国家码)。
estimated_delivery_date: order.created_at + (店铺承诺的预计送达时间)。
products: ShopBase 未支持获取 GTIN,此参数暂时跳过。
ShopBase 后台前往 在线商店(Online store) > 偏好(Preferences).
将修改好的代码放在 其他脚本(Additional scripts)的正文(Body)。
点击 保存(Save) 完成。
参考 添加 Google Customer Reviews 评论调查。
如何查看 ShopBase 订单的参数?
访问 ShopBase Storefront SDK,前往 Get content > Get order 。复制 Get order 的代码。
进入订单的 订单确认页面(Order confirmation) 或 感谢页面(Thank you) 。参考 如何查看订单状态。
按 F12 或者鼠标右键 检查(Inspect)。
Console 面板,粘贴 ShopBase Storefront SDK的 Get order 的代码,按回车键。
现在您可以查看 ShopBase 前端的参数了。
Preferences项目概述
添加Power Up脚本以优化商店
如何安装Trustpilot
添加 Google Customer Reviews 评论调查
参考 如何添加代码到店铺。
主要内容
A. 关联第三方的插件,订单确认里的变量参数
B. 常用变量参数
C. 如何使用变量参数创建代码
D. 使用 ShopBase StoreFront SDK 获取数据
A. 关联第三方的插件,订单确认里的变量参数
运营店铺过程中,您有时需要添加第三方的代码到店铺来设置电子邮件营销或评论调查等。 ShopBase 目前支持关联一些营销插件。如果您想设置 ShopBase 尚未支持的插件可以使用他们的代码添加到店铺。
有些插件需要成功订单的变量参数。
如何安装第三方的插件,请参考下面的文档。
如何安装Trustpilot
如何添加 Google Customer Reviews 评论调查
B. 常用变量参数
订单付款成功之后,ShopBase 将保存订单信息和买方的信息。
下面是常见变量参数。
订单
Name | Field | Example |
---|---|---|
Order ID | order.id | 1234567 |
Order name | order.name | #pb12345678_1234 |
Customer email address | order.email | john.doe@gmail.com |
Does customer accept marketing | order.buyer_accepts_marketing | true |
Order created date | order.created_at | 2022-01-01T01:59:59+00:00 |
Order fulfillment status | order.fulfillment_status | delivered |
Order discount code | order.discount_code | Summer sale |
Does order use discount | order.is_discount_has_used | true |
Order payment method made by customer | order.payment_method | paypal-express |
Order total value | order.totals | 24 |
账单地址
Name | Field | Example |
---|---|---|
Customer’s first name | order.billing_address.first_name | John |
Customer's last name | order.billing_address.last_name | Doe |
Customer's full name | order.billing_address.name | John Doe |
Customer's phone number | order.billing_address.phone | 914-989-6265 |
Customer’s address | order.billing_address.address1 | 3245 Midway Road · West Harrison · Indiana |
Customer’s city name | order.billing_address.city | West Harrison |
Customer’s country name | order.billing_address.country | United States |
Customer’s country code | order.billing_address.country_code | US |
Customer’s province/state | order.billing_address.province | Indiana |
Customer’s province/state code | order.billing_address.province_code | IN |
Customer’s zip code | order.billing_address.zip | 47060 |
产品
Name | Field | Example |
---|---|---|
Product name | order.items.product_title | Kitten Coffee Mug |
Product quantity | order.items.qty | 2 |
Product image | order.items.image | "https://..." |
Product price without currency | order.items.line_item_price | 20 |
Product id | order.items.product_id | 123456 |
Product SKU | order.items.product_sku | PB-AP-Kitten-Coffee-Mug-white-123456 |
C. 如何使用变量参数创建代码
为了确保数据是在买方完成结账时获取,第三方插件的代码需放在 //Your 3rd party code paste in here 后面。
<script>
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'post_checkout') {
const order = window.sbsdk.checkout.getOrder();
//Your 3rd party code paste in here
}
});
});
</script>
例如:请按照下述步骤使用 Storefront SDK 的数据添加到 Google Customer Reviews 评论调查。
复制第三方的代码。这是 Google Customer Reviews 评论调查的代码。
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render(
{
// REQUIRED FIELDS
"merchant_id": 117246064,
"order_id": "ORDER_ID",
"email": "CUSTOMER_EMAIL",
"delivery_country": "COUNTRY_CODE",
"estimated_delivery_date": "YYYY-MM-DD",
// OPTIONAL FIELDS
"products": [{"gtin":"GTIN1"}, {"gtin":"GTIN2"}]
});
});
}
</script>
将第三方代码添加到 ShopBase storefront SDK 代码。
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer>
</script>
<script>
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'post_checkout') {
const order = window.sbsdk.checkout.getOrder();
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render({
// REQUIRED FIELDS
"merchant_id": "MERCHANT_ID",
"order_id": "ORDER_ID",
"email": "CUSTOMER_EMAIL",
"delivery_country": "COUNTRY_CODE",
"estimated_delivery_date": "YYYY-MM-DD",
// OPTIONAL FIELDS
"products": [{"gtin":"GTIN1"}, {"gtin":"GTIN2"}]
});
});
}
}
});
});
</script>
找到需要代替的变量参数,详情查看 B 目录的常用参数。
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer>
</script>
<script>
window.sbsdk.ready(function() {
window.sbsdk.page.onContextUpdate(function(context) {
if (context.type === 'post_checkout') {
const order = window.sbsdk.checkout.getOrder();
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render({
// REQUIRED
"merchant_id": "MERCHANT_ID",
"order_id": order.id,
"email": order.email,
"delivery_country": order.shipping_address.country_code,
"estimated_delivery_date": order.created_at + 14,
});
});
}
}
});
});
</script>
这个代码需要这些变量参数。
merchant_id: 您 Google Merchant 的ID。
order_id: order.id(订单号)。
email: order.email(下单邮箱)。
delivery_country: order.shipping_address.country_code(收件地址,国家码)。
estimated_delivery_date: order.created_at + (店铺承诺的预计送达时间)。
products: ShopBase 未支持获取 GTIN,此参数暂时跳过。
ShopBase 后台前往 在线商店(Online store) > 偏好(Preferences).
将修改好的代码放在 其他脚本(Additional scripts)的正文(Body)。
点击 保存(Save) 完成。
参考 添加 Google Customer Reviews 评论调查。
D. 使用 ShopBase StoreFront SDK 获取数据
如何查看 ShopBase 订单的参数?
访问 ShopBase Storefront SDK,前往 Get content > Get order 。复制 Get order 的代码。
进入订单的 订单确认页面(Order confirmation) 或 感谢页面(Thank you) 。参考 如何查看订单状态。
按 F12 或者鼠标右键 检查(Inspect)。
Console 面板,粘贴 ShopBase Storefront SDK的 Get order 的代码,按回车键。
现在您可以查看 ShopBase 前端的参数了。
关联页面
Preferences项目概述
添加Power Up脚本以优化商店
如何安装Trustpilot
添加 Google Customer Reviews 评论调查
更新于: 09/09/2022
谢谢!