allBlogsList

CloudCraze Added to Cart Notification in Five Easy Steps


The Problem

After working on a few CloudCraze e-commerce websites, one of the most common complaints within clients is that fact that there is no feedback to the user when an 'Add to Cart' button is clicked. There are plenty of ways to design and handle an add to cart event, but in this example, we will leverage a front-end framework that is bundled with CloudCraze, Bootstrap.

The Solution

We will utilize view:cartHeaderView:refresh event along with Bootstrap's Popover.

Step 1: Create the Visualforce page

Following the standard CloudCraze Handlebar Overrides, we'll create Visualforce page cc_Example_HeaderFooter:

<apex:page docType="html-5.0" sidebar="false" cache="false" showHeader="false" standardStylesheets="false" applyHtmlTag="false"></apex:page>

Step 2: Listen for cart updates

The first part listens for view:cartHeaderView:refresh and compares the value for _previousAttributes.cartCount and attributes.cartCount. If previous cartCount and current cartCount is not equal, then the user has added an item to their cart. We will also check if new cartCount is greater than previous cartCount. We will then dismiss the popover after two seconds.

<script> 
jQuery(function($){ 
    CCRZ.pubSub.on('view:cartHeaderView:refresh', function(theView) { 
    if(CCRZ.headerModel.attributes.header._previousAttributes.cartCount != undefined && CCRZ.headerModel.attributes.header._previousAttributes.cartCount != '' && CCRZ.headerModel.attributes.header._previousAttributes.cartCount != CCRZ.headerModel.attributes.header.attributes.cartCount) { 
        $('#cartHeader').popover('show'); 
  
        setTimeout(function(e){ 
            $('#cartHeader').popover('hide'); 
        },2000); 
    } 
    }); 
}); 
</script> 

Step 3: Add Bootstrap popover

The second part is a Handlebar override where we add the Bootstrap popover to cartHeader.

<a href="#" id="cartHeader" class="chead cartHeaderLink" data-toggle="popover" data-placement="bottom" data-trigger="manual" data-content="{{pageLabelMap 'Component_SiteHeader_ItemAddedToCart'}}"></a> 

Step 4: Configure CloudCraze to use the new template

Adding Notification to CloudCraze Cart in Five Easy Steps 1 

Step 5: Rebuild and enable cache

Adding Notification to CloudCraze Cart in Five Easy Steps 2 

Results

Adding an item to cart now shows a popover

Adding Notification to CloudCraze Cart in Five Easy Steps 3 

Improvements

Another UI improvement is an indicator when an add to cart is processing. This can be disabling the Add to Cart button and adding a nice loading animation.