文章分类: 在线商店
本条还可参阅:

了解 ShopBase 订单确认页的变量参数

当关联第三方插件时,他们可能需要一些变量参数。本文将介绍 ShopBase 常用的变量参数,并如何在关联第三方插件时使用变量参数。

参考 如何添加代码到店铺

主要内容



A. 关联第三方的插件,订单确认里的变量参数
B. 常用变量参数
C. 如何使用变量参数创建代码
D. 使用 ShopBase StoreFront SDK 获取数据

A. 关联第三方的插件,订单确认里的变量参数



运营店铺过程中,您有时需要添加第三方的代码到店铺来设置电子邮件营销或评论调查等。 ShopBase 目前支持关联一些营销插件。如果您想设置 ShopBase 尚未支持的插件可以使用他们的代码添加到店铺。

有些插件需要成功订单的变量参数。

如何安装第三方的插件,请参考下面的文档。

如何安装Trustpilot
如何添加 Google Customer Reviews 评论调查

B. 常用变量参数



订单付款成功之后,ShopBase 将保存订单信息和买方的信息。

下面是常见变量参数。

订单


NameFieldExample
Order IDorder.id1234567
Order nameorder.name#pb12345678_1234
Customer email addressorder.emailjohn.doe@gmail.com
Does customer accept marketingorder.buyer_accepts_marketingtrue
Order created dateorder.created_at2022-01-01T01:59:59+00:00
Order fulfillment statusorder.fulfillment_statusdelivered
Order discount codeorder.discount_codeSummer sale
Does order use discountorder.is_discount_has_usedtrue
Order payment method made by customerorder.payment_methodpaypal-express
Order total valueorder.totals24


账单地址


NameFieldExample
Customer’s first nameorder.billing_address.first_nameJohn
Customer's last nameorder.billing_address.last_nameDoe
Customer's full nameorder.billing_address.nameJohn Doe
Customer's phone numberorder.billing_address.phone914-989-6265
Customer’s addressorder.billing_address.address13245 Midway Road · West Harrison · Indiana
Customer’s city nameorder.billing_address.cityWest Harrison
Customer’s country nameorder.billing_address.countryUnited States
Customer’s country codeorder.billing_address.country_codeUS
Customer’s province/stateorder.billing_address.provinceIndiana
Customer’s province/state codeorder.billing_address.province_codeIN
Customer’s zip codeorder.billing_address.zip47060


产品


NameFieldExample
Product nameorder.items.product_titleKitten Coffee Mug
Product quantityorder.items.qty2
Product imageorder.items.image"https://..."
Product price without currencyorder.items.line_item_price20
Product idorder.items.product_id123456
Product SKUorder.items.product_skuPB-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

这篇文章有帮助吗?

分享您的反馈意见

取消

谢谢!