Articles on: Online store
This article is also available in:

Understand common ShopBase variables in order confirmation page

When integrating third-party plugins for email marketing or review surveys, it is likely that these third-party platforms will ask for variables after the customer completes the ShopBase store's checkout. This article will go over the most common ShopBase storefront fields and how to use them when integrating third-party plugins.

Please refer to this article on how to add power scripts to integrate third-party plugins and optimize your store.

In this article



A. Overview of third-party plugin script integration and variables in order confirmation
B. List of common fields
C. Instructions on how to set up script and use common fields
D. Use ShopBase StoreFront SDK to get field data

A. Overview of third-party plugin script integration and variables in order confirmation



During ShopBase business operations, you may need to integrate scripts with third-party platforms in order to send email marketing or surveys to customers for feedback. If the third-party platform or application you want to connect is not listed among the Multichannel Marketing plugins supported by ShopBase, you may still integrate third-party scripts yourself by following the guidelines in this article.

Some platforms require variables of orders that are successfully paid by your clients in order to correctly integrate scripts. This article will provide you a list of ShopBase common variables and show you how to use them.

Below are the instructions on how to integrate third-party scripts to ShopBase for your reference:

Integrate TrustPilot with your store
Integrate Google Customer Reviews survey opt-in module

B. List of common fields



After the order is successfully paid, ShopBase storefront will save the order data and customer information after payment.

You can look up the fields in the list below:

Order


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


Billing address


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


Line item


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. Instructions on how to set up script and use common fields



To make sure that the ShopBase Storefront fields are retrieved when the buyer has just finished the checkout event, the integration script from the 3rd party plugin must be inserted after the line //Your 3rd party code paste in here in the code below:

<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>

Example: To apply the fields taken from the Storefront SDK to the variables of the Google Customer Review survey opt-in module plugin, follow the steps below

Identify the third-party script to integrate. Below is the script from the survey opt-in module with Google Customer Review variables.

<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>

Configure the third-party script that you need to replace the variables in the ShopBase storefront SDK script.

<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>

Determine the variables to replace, refer to section B for the list of common fields.

<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>

Here, the variables you need to apply are:
merchant_id: Your Google merchant ID
order_id: order.id
email: order.email
delivery_country: order.shipping_address.country_code
estimated_delivery_date: order.created_at + (the estimated delivery date according to your store's policy)
products: Kindly skip this section because ShopBase has not supported users to get data regarding GTIN yet.

From your ShopBase admin, go to Online store > Preferences.


Paste the above script in Additional scripts, Body section.


Click Save to finish the integration.

Read more: Integrate Google Customer Reviews survey opt-in module.

D. Use ShopBase StoreFront SDK to get field data



If you want to see ShopBase order fields, follow the instructions below:

Go to ShopBase Storefront SDK and navigate to Get content > Get order section. Copy the code in the Get order section.


Go to the Order confirmation or Thank you page of an order that has completed checkout. Please refer to this article on how you can view the order status page.



Inspect the web element by pressing F12 on your keyboard or right-click the page, then select Inspect.


In Console tab, paste the code with the Get order function on the ShopBase Storefront SDK page and press enter.


You can now view the fields of the ShopBase storefront.





Overview of Preferences
Add Power Up Scripts to optimize your store
Integrate TrustPilot with your store
Integrate Google Customer Reviews survey opt-in module

Updated on: 24/08/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!