Shopping Cart Tags

The following [tags] can be used to include Shopping Cart in your templates. The contents are displayed only if the cart exists.

  • [VIEWCART]  - View cart link, with item count.
  • [CARTNARROW] - A shopping cart suitable for narrow column use.
  • [CARTNARROWEDIT] - A shopping cart suitable for narrow column use and quantity +/- links.
  • [CARTFULL] - Full read only version of shopping cart data with thumbnails and quantity +/- links.
  • [CARTFULLEDIT] - Fully featured shopping cart in page with thumbnails and quantity/option editing.

Styling and Effects

We suggest you wrap your widgets like so, because our default shopping cart javascript code will automatically re display the Container when an item is added to the cart, if you use the same wording as the widget DIV + "Container"

<div class="templateWidget" id=cmsViewCartNarrowEditContainer>
<h3>View Cart</h3>
[CARTNARROWEDIT]
</div>

add this code to your _scripts.js file to hide all the empty containers, this same approach will work for all the featured/new/promoted products widgets also etc. 

$(document).ready(function() {
$(".templateWidget").not(':has(a)').not(':has(input)').hide();
});

You might also like to use this code to add additional animation logic to the page

//Method to show or hide cart tags and its wrapper, in default cart view pages
function showOrHideCartTags(shoppingWidget,html,hideTag){
if(ajaxCartPage || checkoutConfirmPage || hideTag ){ // hide if the tag is to be hidden or checkout or cart page
jQuery("#"+shoppingWidget).html('');
jQuery("#"+shoppingWidget).hide();
jQuery("#"+shoppingWidget+"Container").hide();
}else{
jQuery("#"+shoppingWidget).html(html);
// do fade in or out effects if needed
jQuery("#"+shoppingWidget).fadeIn("slow"); //animate the effect of cart 
initMyColorBoxes();
}
}

The tags are loaded in a div based container as below.

<div id=cmsViewCartLink class='cartSummary  cartSummaryLink'></div>

<div id=cmsViewCartNarrow class='cartSummary cartSummaryNarrow'></div>

<div id=cmsViewCartNarrowEdit class='cartSummary cartSummaryNarrow'></div>

<div id=cmsViewCartFull class='cartSummary cartSummaryFull'></div>

<div id=cmsViewCartFullEdit class='cartSummary cartSummaryFull'></div>

The tags are provided with default styling and the following classes can be overriden to stylise further.

<style>

.cartSummary div { }
.cartSummary {  } 
.cartSummary ul {}
.cartSummary li {}


.warning{}
.price{}
.fullPrice{}
.basketSummaryLine{}
.basketSummarySubTotalLine{ }
.basketSummarySubTotal { } 
.basketSummaryPrompt {} 
.basketSummaryTotal{} 
.basketCurrencySelector{}
.basketCartDelete{}
.basketSummaryLineItemOptions select, .basketSummaryLineItemOptions option { }

.cartSummaryFull .basketSummaryLine{  }
.cartSummaryFull .basketSummaryLineItemImage{}
.cartSummaryFull .basketSummaryLineItemTitle{}
.cartSummaryFull .basketSummaryLineItemOptions{}
.cartSummaryFull .basketSummaryLineItemPrice{}
.cartSummaryFull .basketSummaryLineItemRRPPrice{}
.cartSummaryFull .basketSummaryLineItemUOM{ }
.cartSummaryFull .basketSummaryLineItemQty{}
.cartSummaryFull .basketSummaryLineItemDiscount{}
.cartSummaryFull .basketSummaryLineItemTotal{}
.cartSummaryFull .basketSummaryLineLeft{ }
.cartSummaryFull .basketSummaryLineRight{ }
.cartSummaryFull label {  }

.cartSummaryNarrow .basketSummaryLineItemTitle{ }
.cartSummaryNarrow .basketSummaryLineItemPrice{}
.cartSummaryNarrow .basketSummaryLineItemTotal{}
.cartSummaryNarrow .basketSummaryLineLeft{}
.cartSummaryNarrow .basketSummaryLineRight}
.cartSummaryNarrow .basketSummaryLineItemIcons{}

.basketSummaryCheckout{}

</style>