AJAX and Data Attributes

LemonStand offers a built-in AJAX framework that makes sending requests to the server and updating page elements asynchronously a breeze.

Let's have a look at an example of AJAX and data attributes in action in the default install of your LemonStand store.

Start by logging in to the backend of your store, and click on the Store Design link in the sidebar. Then open the Partials section.

In the Partials section find the partial named shop-cart-content and click on it to edit.

First a little explanation on what the shop-cart-content partial does. The shop-cart-content partial is basically the template for the shopping cart page. It contains a call to render the shop-cart-items partial as well as the shipping rates and order total calculator. The shop-cart-content partial also contains a block of buttons at the bottom, where you will see the continue shopping, coupon code, update cart and checkout buttons.

This button block is the area that we will be referencing for our example.


In the Content area of the shop-cart-content partial, find the following line of code, which should be located on line 60.

<a href="#" data-ajax-handler="shop:cart" data-ajax-update="#cart-content=shop-cart-content, #mini-cart=shop-minicart">Update cart</a>

This snippet of code is for the update cart button. The update cart button will update the cart page based on any changes you have made to the cart since the page was originally loaded. Such as changing the quantity amount of an item in your cart.

There are two attributes that make up our AJAX functionality, data-ajax-handler and data-ajax-update.

The data-ajax-handler will refer to the CMS AJAX handler that will process the request on the server, in this case it would be the shop:cart AJAX handler.

The data-ajax-update attribute refers to the page element that will be updated after the server processes the request. This is broken up into two sections. The CSS selector for the element that wraps the content that you want to be updated and the partial that renders the actual content to be updated.

In this case, for example, you can see the following for data-ajax-update:

<a href="#" data-ajax-update="#cart-content=shop-cart-content, #mini-cart=shop-minicart" data-ajax-handler="shop:cart">Update cart</a>

From this snippet we can see that there are two areas being updated when the update cart button is clicked. First we update the shop-cart-content partial which is rendered within a DIV with an ID of cart-content. Then we update the mini-cart which is rendered within the shop-minicart partial that is contained within a DIV with the ID of mini-cart.


Writing Your Own AJAX Call

If you would like to write your own AJAX call instead of using the built-in framework follow these steps. There a couple reasons why you might want to do this, the most common is to have form field values copied to each other before form submission. You can't do this by using the built-in framework because if you put an on-click function on the form submission button like so:

<a class="btn" onclick="processBlankFields();" href="#" data-ajax-handler="shop:checkout" data-ajax-update="#checkout-page=shop-checkout, #breadcrumbs-area=shop-checkout-progress, #mini-cart=shop-minicart">
Submit
</a>

It will submit the form via AJAX before your function is called. So the solution is to just make your AJAX call happen in your custom function after it does what you needed. So step one, change your form submission button to:

<a class="btn" href="#" onclick="processBlankFields();">
Submit
</a>

Step two, add a script tag with your function:

<script type="text/javascript">
    function processBlankFields () {
        // Your custom code
        
        //Your ajax call
        $.ajax({
            data : $('#free-checkout').serialize(),
            type: 'post',
            url: window.location.href,
            headers: {
              'X-Event-Handler': 'shop:checkout',
              'X-Partials'     : 'shop-checkout,shop-checkout-progress,shop-minicart',
              'X-Requested-With': 'XMLHttpRequest'
            },
            
            success: function(data) {
                $('#checkout-page').html(data['shop-checkout']);
                $('#breadcrumbs-area').html(data['shop-checkout-progress']);
                $('#mini-cart').html(data['shop-minicart']);
            }     
        });
    };
        
</script>

Some things to note, one this uses jquery to help keep it shorter. Two, the data uses the ID of your form. To add an ID to our custom form tag do this: 

{{ open_form({'id': 'free-checkout','class': 'custom', 'data-validation-message' : ''}) }}

 Now lets look at the headers. X-Event-Handler refers to the action set on the page. X-Partials refers to the partials you wish to reload after the ajax call. The names after X-Partials are the names of the partials. Then under success, we use the ID's of the HTML tags that contain those partials to reload them as shown. That is pretty much all there is to it. This will do the exact same thing AJAX call as:

<a class="btn" href="#" data-ajax-handler="shop:checkout" data-ajax-update="#checkout-page=shop-checkout, #breadcrumbs-area=shop-checkout-progress, #mini-cart=shop-minicart">
Submit
</a>