In this latest version of CartFlows and CartFlows Pro, we have introduced a set of new shortcodes and variables to be used in the custom JS script.
This feature is all about providing order-related data to be used in the custom JS script so that you can use it for your tracking purpose or to perform the custom requirement by creating a customized Javascript code.
Below is the list of JavaScript variables which you can use on the CartFlows pages.
Variables are which available from the CartFlows Free version.
- {{order_id}}
- {{txn_id}}
- {{order_total}}
You can use these variables on any page of CartFlows except the checkout page. The reason behind this is that the values for those variables are generated after the order is placed.
Variables that are available from the CartFlows Pro are as follows:
- {{offer_product_name}}
- {{offer_product_qty}}
- {{offer_product_price}}
These variables are available only on the upsell/dowsell pages as they are upsell/downsell specific.
Now, you might be wondering how to use these variables in real cases? Don’t worry, below is a short example to help you understand the use case.
Suppose you wanted to trigger a custom FB of GA event on the upsell/downsell page and in that event you want to send order ID or transaction ID or product ID in the event script, then you can use {{order_id}}, {{txn_id}} and {{product_id}} to get those values in your Javascript code and send it to the Tracking script.
JS Triggers for upsell & downsell accepted/rejected
Along with these custom JavaScript variables, we have introduced triggers for the upsells and downsells. These triggers will be automatically called when a customer accepts or rejects the offer.
Suppose, you want to run automation to send the upsell offer data to your CRM when an upsell/downsell offer is accepted, then you can create a custom javascript and add it in the offer accept or offer reject script option in the backend setting of the upsell/downsell pages.
These options are available only on the upsell and downsell pages. Below are the steps to add the offer accepted or rejected the scripts.
Step 1: Navigate to the Flows menu
Step 2: Click edit on the flow for which you want to add custom scripts.
Step 3: Click edit on the upsell / downsell pages according to your requirements.
Step 4: Click on the settings tab and click on the custom script option.
Step 5: Add your custom JS script which needs to be executed when the offer is accepted or rejected.
Step 6: Click on the Save button to save the changes.
While adding an offer accept/reject script, you can use below JS variables/shortcodes in your custom script code to send/get the offer data.
- {{order_id}}
- {{flow_id}}
- {{step_id}}
- {{product_id}}
- {{variation_id}}
- {{quantity}}
- {{offer_type}}
Once you add your custom offer accept or reject scripts, they will be automatically executed on the proper events as the offer accepted script will be executed when the upsell or downsell offer is accepted and similarly, the offer rejected script will be executed when the upsell or downsell offers are rejected.
