Ajax

CartThrob can tell when you are submitting a form via ajax versus submitting via a standard post. When you submit via ajax, CartThrob can return data in JSON format. This data will simplify updating totals & resetting forms.

Overview

The basics of making an ajax submission with a CartThrob form is simple.

  1. Create a CartThrob form using CT form tags (for instance: update_cart_form, save_customer_info_form)
  2. Test the form normally. Once it works, add javascript
  3. use javascript to submit the form dynamically (usually when data has been updated)
  4. update cart totals and the XID hash value once the form submission is complete

EE's secure forms & the XID Hash

By default EE doesn't allow the same form to be submitted more than once. If EE is set to "process forms in secure mode" it will look for a unique XID hash from any form that's posted. If the XID hash is used more than once, EE will kill the form submission. This is done to prevent comment spamming. When you submit the same form multiple times via AJAX you will either have to process forms without secure mode being set, or you will have to reset the XID hash each time the form has been submitted. CartThrob returns a new XID hash with each ajax form submission, so you can reset this hash value and maintain the integrity of your site.

Example

You can start with a simple form. Give it an ID just to make it simpler to call.

{exp:cartthrob:save_customer_info_form return="" id="save_data"}
    <input type="text" value="" name="zip" /> 
    <input type="text" value="" name="state" /> 
{/exp:cartthrob:save_customer_info_form}

These fields will be updated
<p class='cart_total'>{exp:cartthrob:cart_total}</p>    
<p class='cart_tax'>{exp:cartthrob:cart_tax}</p>    
<p class='cart_shipping'>{exp:cartthrob:cart_shipping}</p>  
<p class='cart_subtotal'>{exp:cartthrob:cart_subtotal}</p>  
<p class='cart_discount'>{exp:cartthrob:cart_discount}</p>

To simplify ajax submissions, we use jquery.form.js script. The following example will update just about any form... which is a bit dangerous, so only use this as a starting point.

<head>
{exp:jquery:script_tag}
<script type="text/javascript" src="{site_url}themes/user/cartthrob/scripts/jquery.form.js" ></script>

<script type="text/javascript">

jQuery(document).ready(function($){
    // this will set JSON as the return data type, and identify update_cart as a callback function
    var cart_form_options = { 
        success: update_cart,  // post-submit callback
        dataType: 'json' 
    };

    // this is the callback script. whenever a form is updated, this script will be called
    function update_cart(data, statusText, xhr, $form)  {   
        // "data" is the returned data in json format
        // you can access each of these using data.item_name as shown in the example below
        if (data.success) {                                                   
            // update the XID hash in the form so we don't run afoul of EE's secure forms
            $("input[name=XID]").val(data.XID);
            // using the json data object's data to update various totals. in this case
            $('.cart_tax')          .html( data.cart_tax );
            $('.cart_total')        .html( data.cart_total );
            $('.cart_shipping')     .html( data.cart_shipping );
            $('.cart_subtotal')     .html( data.cart_subtotal );
            $('.cart_discount')     .html( data.cart_discount );
        }  
        return true; 
    }

    // if any input is changed, the form is sent via ajax. you probably wanna be more selective.
    $("input[type=text], select").live('change', function(){
        // finding the form that contains this input
        var form = $(this).closest("form"); 
        // initialize the form
        $(form).ajaxForm(cart_form_options);
        // submit the form. 
        $(form).submit(); 
    });
}); 

</script>

Buy Now

Top