Last month, Infusionsoft hosted a Mastermind call about building a dynamic checkout process which started me thinking about how to implement such a feature for a client. By the way, if you are an Infusionsoft user and you are not attending the weekly Mastermind calls, you are really missing out. I have been well impressed with the topics they cover.
In the Mastermind Demonstration, which you can view at the Mastermind Archive, Corey Harding of Infusionsoft builds a dynamic checkout process using an Infusionsoft web form and an Infusionsoft product bundle link.
What is the Infusionsoft Product Bundle Link?
Through a product bundle link, Infusionsoft provides a mechanism to add multiple products to the shopping cart in one click.
As Corey explains in the video, the bundle link has to be “built” using the product ids and quantities included in the bundle. One stipulation in building the link – a product id CANNOT have a quantity of zero (0). Therefore, he uses a JavaScript (provided on the MM archive page) to remove any products with a quantity of zero (0) from the query string which is submitted to the Infusionsoft bundle process. If you include a product id with a quantity of zero (0) in the query string, the bundle link will fail.
The Infusionsoft bundle link has the following form where the query string lists the productId and productQuantity of all the products you want to add to the shopping cart –
https://{ifsapp}.infusionsoft.com/app/manageCart/processBundle?productId=1&productQuantity=1productId=2&productQuantity=10&productId=3&productQuantity=9
Once I saw what Corey did, I was sorry I did not think of it myself. It works especially well with Gravity Forms for a product that includes many options. Let’s say for demonstration purposes, I am selling a plugin. Along with the plugin, I offer an eBook that explains some of the nuances of the plugin and how to make the most of your purchase. I also offer installation of the plugin and an annual premium support plan. If the customer purchases 2 years of support in advance, I offer a 50% discount.
Using Gravity Forms Instead of Infusionsoft Webform
You can view my demonstration form at https://www.equalserving.com/useful-tools/infusionsoft-product-bundle-test/
I used Gravity Forms’ Product Pricing Fields to configure the form. The top field is a Single Product field with the quantity disabled (because this is presumed to be a digital product – there is no need for quantity). The installation, ebook and support fields also use a Product Pricing Field with Radio Buttons field type.
I included a hidden field on the form that contains a promo code for the multi-year support discount. This hidden field is unnecessary as you can configure purchase discounts in Infusionsoft that do not require a promo code but I included it anyway for this example.
Lastly, I dragged in a Total Pricing Field so that the customer could see how much the purchase was going to be before adding it to their cart.
Once the customer clicks on the button labelled “Process My Product Bundle,” the form is configured to redirect to the Infusionsoft product bundle link. Gravity Forms allows the fields of the form to be redirected to another page by clicking on the Form Settings | Confirmations. Select the Confirmation Type – Redirect; enter the Redirect URL and click the Merge Fields button to include the fields necessary in the bundle link. Below is a snapshot of my completed Confirmations screen –
Below is the default Infusionsoft bundle link –
https://{ifsapp}.infusionsoft.com/app/manageCart/processBundleBelow is the Redirect Query String I entered for my particular form. This field is activated when you enable the “Pass Field Data Via Query String” checkbox –
productId=35&productQuantity=1{AddOn Installation:4:value}{Taking Awesome Plugin to the Next Level - eBook:7:value}{Support:6:value}The above query string as written will append only the values of the fields onto URL Redirect. The evaluated “raw un-filtered” Redirect URL with query string will look as follows:
https://{ifsapp}.infusionsoft.com/app/manageCart/processBundle?productId=35&productQuantity=1001If the above was submitted, 1001 units of product id 35 would be added to the shopping cart. This, of course, is not what we want.
We must add code to ensure that only products with a quantity of more than zero (0) are added to the query string and that the parameters are properly formatted. Therefore, we must modify the theme’s functions.php file to include the following:
add_filter("gform_merge_tag_filter", "gv_filter_all_fields", 10, 4);
function gv_filter_all_fields($value, $merge_tag, $options, $field){
if($field["formId"] == "84") {
if ($merge_tag == 4 && $value != 0) {
// Installation
$retVal = "&productId=39&productQuantity=".$value;
}
if ($merge_tag == 7 && $value != 0) {
// eBook
$retVal = "&productId=37&productQuantity=".$value;
}
if ($merge_tag == 6 && $value != 0) {
// Support
$retVal = "&productId=41&productQuantity=".$value;
}
if ($merge_tag == 9) {
// promoCode
$retVal = "&promoCode=".$value;
}
} else {
$retVal = $value;
}
return $retVal;
}
The above function is triggered with the gform_merge_tag_filter filter. Line 4 evaluates the form id. If formId equals 84 (our bundle form), the function then interrogates the merge_tag and the value parameters. Depending upon which merge tag is passed, the proper productId is returned along with the value of the form field (product quantity). So, the above “raw unfiltered” Redirect URL with query string becomes –
https://{ifsapp}.infusionsoft.com/app/manageCart/processBundle?productId=35&productQuantity=1&productId=41&productQuantity=1&promoCode=MULT
IConclusion
Like everything in life and especially online, there are many ways to accomplish any one task. Using an Infusionsoft webform to create a dynamic product bundle is possible and requires no additional tools. But if you are already using Gravity Forms, and want to create a more pleasant customer experience why not put the process together using Gravity Forms?