A checkout page on which the customer can review the order and confirm it.

Description

This template is used for the 5th stage of the multi-page checkout.

The customer is directed to this page once all order information is correct and complete but the terms and conditions haven't been accepted yet.

It is advisable for the order preview displayed on this page to be as detailed as possible. The page should contain at least:

Template properties

Template location
themes/shop/THEME/checkout/preview.html
Template URL
/checkout/preview/
Scope

Default theme implementation

{Helper(file:'checkout/header')}
{CheckoutNavigation}
<div id="MultiPageCheckout" class="clearfix">

	<div class="FormItem HeaderItem NoIndent">
		<h2>{%CheckoutPreview}</h2>
		<p>{%CheckoutPreviewIntro}</p>
	</div>

	<div id="PreviewSplit" class="clearfix">
		<div id="PreviewProducts" class="BlockForm">

			<div id="PreviewContent">
				{Helper(file:'helpers/full-preview')}
			</div>

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

			<form action="/checkout/process/" method="post">
				{CurrencyNotification}
				{CheckoutAcceptTerms}
			</form>

		</div>
		<div id="PreviewInfo">

			<dl>
			{CartShippingMethod(
				before: '<dt>{%CheckoutShipping}</dt><dd>',
				after: '&nbsp;<a href="/checkout/shipping/">{%Edit}</a></dd>'
			)}
			{CartPaymentMethod(
				before: '<dt>{%PaymentMethod}</dt><dd>',
				after: '&nbsp;<a href="/checkout/payment/">{%Edit}</a></dd>'
			)}
			{CheckoutBillingAddress(
				mode:'preview',
				before: '<dt>{%CheckoutCustomerInformation}</dt><dd>',
				after: '<br><a href="/checkout/customer_information/">{%Edit}</a></dd>'
			)}
			{CheckoutShippingAddress(
				mode:'preview',
				before: '<dt>{%CheckoutShippingAddress}</dt><dd>',
				after: '<br><a href="/checkout/shipping_information/">{%Edit}</a></dd>'
			)}
			</dl>
		</div>
	</div>

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