Knowledgebase

All of our skins support "AJAX Add To Cart".  In this document, I'm going to detail how this feature works, why it's an excellent feature to have and how to tweak the code a little.

What is AJAX?

AJAX is an acronym for Asynchronous JavaScript and XML.  The AJAX technology allows data to be sent, retrieved and manipulated in the background without refreshing the page.  You probably visit many websites each day that make good use of AJAX technology:  Google Maps, MSN Hotmail, Twitter, Facebook and even ShopDev.  The list is endless.

Why should I care?

Our skins all submit add to cart requests via AJAX.  Since the request is done in the background, the page does not refresh.  Apart from looking really cool... fewer page reloads means a faster and more responsive site. 

How can I tweak the code?

Inside of your skin directory, you should see a "javascript" folder.  Navigate to inside of this folder and open the file named shopdev_effects.js in your favourite HTML / Text editor.  Near the very top of the file, you should see a "Global Variables" section.  To the right of each item inside of this section is a description for each parameter.

My skin only shows the number of items added to the cart...

Many of our skins only display the number of items added to the cart as standard.  However, if you're using one of the following skins, you can change what information is displayed by editing a single template file:

• Catalyst Reloaded V4.1.0
  
• Neutrino V4.2.0
• Sandbox V4.1.0

Requirements

This section is intended for designers and developers.  You will need to be able to write HTML and CSS comfortably.  Since this is a modification to our existing code, we cannot provide 1-to-1 support relating to the contents of this section.

How does it work?

In order to prevent "flickering" of the content, the cart contents are output using CubeCart's regular mechanisms on a page refresh.  The following template file contains the source code for this markup: styleTemplates/boxes/shoppingCart.tpl

When an item is added to the shopping cart, our own AJAX mechanisms read the output of the following file: php/ajaxCart.php
Please note that this file will be encoded.  Nevertheless, this does not prevent you from editing the markup.  You can simply edit the following template file (as you would any other): styleTemplates/boxes/ajaxCart.tpl

After an item has been added, our AJAX code looks for a page element with the id: "ajaxCart".  Once this has been found, the contents of that element are replaced by the output of ajaxCart.php.  Hence, the shopping cart is updated to reflect the item that has just been added.  You will want to ensure that the styleTemplates/boxes/ajaxCart.tpl and styleTemplates/boxes/shoppingCart.tpl files look exactly the same.

Do you have any sample code?

Navigate to the following folder inside the skin directory: styleTemplates/boxes/ajaxCart.tpl and delete all the code in that file.  Now copy and paste the following code into the file:

<!-- BEGIN: ajax_cart -->
<div class="boxTitleRight">{LANG_SHOPPING_CART_TITLE}</div>
<div class="boxContentRight">
    <div class="txtCart">
        <!-- BEGIN: contents_true -->
        <div class="shopCartRow">
            <span class="txtCartPrice">{PRODUCT_PRICE}</span><a href="index.php?_a=viewProd&amp;productId={PRODUCT_ID}" class="txtCartProduct">{VAL_NO_PRODUCT} x {VAL_PRODUCT_NAME}</a>
        </div>
        <!-- END: contents_true -->
        <!-- BEGIN: contents_false -->
        <span style="float: right; padding-right: 3px;"><img src="skins/{VAL_SKIN}/styleImages/icons/basket.gif" alt="" width="13" height="12" title="" /></span>{LANG_CART_EMPTY}
        <!-- END: contents_false -->
        <div class="cartTotal">
            <span class="txtCartPrice">{VAL_CART_ITEMS}</span>{LANG_ITEMS_IN_CART}<br />
            <span class="txtCartPrice"><strong>{VAL_CART_TOTAL}</strong></span><strong>{LANG_TOTAL_CART_PRICE}</strong>
        </div>
    </div>
    <!-- BEGIN: view_cart -->
    <div style="text-align: center; padding-top: 3px;"><a href="index.php?_g=co&amp;_a={CART_STEP}" class="txtviewCart" id="flashBasket">{LANG_VIEW_CART}</a></div>
    <!-- END: view_cart -->
</div>
<!-- END: ajax_cart -->

This code represents a standard shopping basket sidebox.  You can modify the code to suit your requirements.
You should now create a target element with the id: "ajaxCart" in your global/index.tpl and global/cart.tpl template files.  For example:

<div id="ajaxCart">
{SHOPPING_CART}
</div>

Note that the styleTemplates/global/index.tpl and styleTemplates/global/cart.tpl files should already contain a target element.  You can simply remove the existing target element and insert the code above where desired.

Finally, you will need to ensure that your styleTemplates/boxes/shoppingCart.tpl file outputs exactly the same markup as the styleTemplates/boxes/ajaxCart.tpl file.  In most cases, you can simply copy and paste the code from the ajaxCart.tpl file.  IMPORTANT: the first and last lines should remain unchanged in both files:

<!-- BEGIN: ajax_cart -->
  Do NOT change the line above and below this one in ajaxCart.tpl
<!-- END: ajax_cart -->

And similarly for styleTemplates/boxes/shoppingCart.tpl...

<!-- BEGIN: shopping_cart -->
  Do NOT change the line above and below this one in shoppingCart.tpl
<!-- END: shopping_cart -->