Custom Storefront for the Infusionsoft Shopping Cart
The Infusionsoft shopping cart is one of the weakest parts of Infusionsoft!
Fortunately, there is a work around that let’s you use their checkout and still have the other great parts of Infusionsoft — Marketing automation and email marketing. Here’s what you do:
- Code your own custom storefront and cart
- When the customer clicks Checkout, pass their shopping cart to Infusionsoft’s cart checkout
- Lock Infusionsoft’s cart to prevent the customer from changing quantities
Code your own Storefront and Cart
You can modify one of the open source shopping cart solutions or create your own. This is potentially a broad topic, so if you want to know more, please leave me a question or a comment. The key things that are required are:
- Ways for customers to find the products they want and add them to their cart
- A way to store the products and quantities they have selected
- A shopping cart page that let’s them see the items they are purchasing and add or remove items
- A checkout button that will take them to the Infusionsoft checkout page.
Pass the Shopping Cart Information to Infusionsoft
Now, we have to get the products and quantities from your custom cart into Infusionsoft. Essentially, all you have to do is pass the products and quantities to Infusionsoft via URL parameters. Here is the base URL.
https://YourApp.infusionsoft.com/cart/?update=true&l=n&cart_skin=1&clear=true&Order0_OrderID=123
In this case, I’m also passing in an OrderID which is a custom order field I created in Infusionsoft. Then, add the following for each product:
&product_id=456 &p456_qty=2
I highlighted in red the values that have to be dynamically inserted. Now, when the user clicks checkout, you build this URL, and send them to the URL.
Lock the Infusionsoft Shopping Cart
There’s just one problem. You may not want the customer to change the quantities on the Infusionsoft side. Here’s a trick that let’s you lock the Infusionsoft checkout page. Enter the following javascript in HTML Area-1 in your shopping cart skin:
[cce_js]
<script type="text/javascript" language="javascript">
var elem = document.getElementById('theOneForm').elements;
for(var i = 0; i < elem.length; i++) {
if ( right(elem[i].name, 4) == '_qty' ) {
elem[i].disabled=true;
}
}
//Overrides the remove(key) function
function remove(key) {
alert('Please Click Continue Shopping to modify quantities or remove items.');
}
function right(str, n){
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}
</script>
[/cce_js]
This script will:
- Find all the quantity fields on the form and disable them
- Override the remove link
It’s not a perfect solution, but it does work!
If you need a better, more complete shopping cart, the best thing is to use a 3rd party shopping cart (Like Volusion or many others), and then use the Infusionsoft API to get relevant data into Infusionsoft.
Please leave me a comment below if this is helpful!
