A shopping cart template is used for displaying the contents of the customer's shopping cart.

Description

The shopping cart tags work globally and can be used on any page.A good practice is to display a shopping cart preview on every page (e.g. with the {MiniCart} tag) and provide a detailed preview on the shopping cart page.

To increase sales, you may want to display compatible and similar products, and add functions for shopping cart sharing on this page.

Template properties

Template location
themes/shop/THEME/cart.html
Template URL
/cart
Scope

Useful tags

Default theme implementation

{Helper(file:'helpers/header')}
<div id="SidebarBg" class="OmitRightSidebar">
	<div id="Main" class="clearfix">
		{Helper(file:'helpers/sidebar-left')}
		<div id="Primary" class="Column">
			<div id="PageHeader">
				<a class="Button CheckoutButton" href="/checkout/">{%OrderProducts}</a>
				{Path}
				<h1>{PageTitle}</h1>
			</div>
			<div class="Content">

				<form action="/cart/update/" method="post" id="CartForm">
					{Helper(file:'helpers/full-cart')}
				</form>

				<div id="SubmitCampaignCode" data-helper="full-cart" data-view="cart">
					{CampaignCode(
						mode: 'auto',
						action: 'cart',
						notifications: 'true',
						ajax: 'true'
					)}
				</div>

				<a class="Button CheckoutButton" href="/checkout/">{%OrderProducts}</a>

				<div id="CartShareButtons">
					<a href="#ShareCartLink" class="Button ShareButton" data-file="share-cart-link" id="ShowShareLink" title="{%CartShareLink}">
						<i></i>{%CartShareLink}
					</a>
					<a href="#SendCart" class="Button ShareButton" data-file="send-cart" id="ShowSendCart" title="{%CartShareSendToEmail}">
						<i></i>{%CartShareSendToEmail}
					</a>
					<div class="fb-share-button" data-href="{CartShareLink}" data-type="button" id="CartFbShare"></div>
				</div>
				<div id="fb-root"></div>
				<script>
					(function(d, s, id) {
						var langCode = ('{CurrentLanguageCode}' === 'fi') ? 'fi_FI' : 'en_US',
							js, fjs = d.getElementsByTagName(s)[0];
						if (d.getElementById(id)) return;
						js = d.createElement(s); js.id = id;
						js.src = "//connect.facebook.net/" + langCode + "/all.js#xfbml=1";
						fjs.parentNode.insertBefore(js, fjs);
					}(document, 'script', 'facebook-jssdk'));
				</script>

			</div>

			{CrossSaleProducts(
				type: 'normal',
				limit: 12,
				before: '
					<h2 class="BoxHeader Center">{%CrossSalesForCart}</h2>
					<div class="CrossSaleScroller">
						<div class="CrossSaleProducts">',
				after: '</div></div>',
				helper: 'helpers/listproduct',
				or: '
					{NewProducts(
						type: 'normal',
						timelimit: '-4 months',
						limit: 12,
						before: '
							<h2 class="BoxHeader Center">{%NewProducts}</h2>
							<div class="CrossSaleScroller">
								<div class="CrossSaleProducts">',
						after: '</div></div>',
						helper: 'helpers/listproduct'
					)}
				'
			)}

		</div>
	</div>
</div>
{Helper(file:'helpers/footer')}