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:

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

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!

Clarke Bishop Infusionsoft Infusionsoft, Shopping Cart

Here’s how you can add custom order fields to the Infusionsoft shopping cart!

1. Go to Setup -> Misc. Settings. Under Application Settings, you’ll see a section called Custom Fields. Make sure you select Order from the drop down before clicking Go.
2. Add the custom field you want. Be sure to select the appropriate field type as this will affect the searches you can do later on.
   

   Custom Field Screen

3. Click View the field database names (for the API). Write down or print out the “Database Name.” You’ll need this later on. For example, the name of my Test field is Test1. These names are case-sensitive, so make sure you capture the name exactly!
4. Now, go to Setup -> Shopping Cart and select Theme Gallery. The edit your current theme. Click the HTML Sections tab, and then click the Edit button for Area 1. Enter the HTML code for your custom field like this:
   <input name=”Order0_Test1″ id=”Order0_Test1″ type=”text” value=”Test Order Data”/>
   Notice that you have to put Order0_ in front of the database name. That’s the word, “Order” followed by a zero and an underscore. You should have this in both your name and id attributes.
   Click Save.
5. Click Back to Theme Gallery and click Live Preview. You should see your store front. Add a product to the cart and click Checkout. You’ll see your custom fields in Area1 above the Billing Information.
   

   Shopping Cart with Custom Fields

6. Now, pay for the order. Here’s a good trick. Under Shopping Cart, Payment Options, select the checkbox for payment by check. Then, when you’re testing, you can just click the pay by check option in your shopping cart. You don’t actually have to pay for the order this way!
7. Finally, go to Orders -> Find Orders …, and lookup your new order.  You’ll see a Custom Fields tab. Click that, and you’ll see your order complete with the custom field data.
   

   Order Screen with Custom Fields

I hope this is helpful. Leave a comment below with any questions or to let me know how this works for you!

Clarke Bishop Infusionsoft Infusionsoft, Shopping Cart