FAQ - 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>
FAQ Topics
Building your site
Advanced Page Types
E-Commerce
- Shopping Basics
- Category Management
- Products
- Product Options
- Layout and Formatting
- Payment Options
- Processing Orders
- Advanced Ecommerce
- Product Pricing, Currencies
- Plugins
- Wholesale
- Rental, Booking and Appointment Systems
- Couriers / Shipping
- Stock & Quantities
- Vouchers, Discounts, Loyalty Points
- Selling Photos / Prints
- Shopping Cart Add-on Page types
- Advanced APIs / Add ons
- Point of Sale (POS)
- Reports
- Orders / Invoices
Email & Membership
- Member Management
- Members Pages / Template Customisations
- From Addresses and Reply To Email Notifications
- Global Enquiry form options
- Standard Field Names
- Webmail
- Bulk Email
- CRM Features
- Email Campaigns
- Forums & Blogs
- Pop3/Imap Email Services
- Scams and Hoaxes
- Lead Magnets / Growing Your Customer Database
- Form Spam Filtering