A checkout page that displays all checkout sections on a single page. Individual checkout sections can be updated with AJAX requests.

Description

In order to implement a single-page checkout, you're going to need JavaScript code to send AJAX requests to the online store's server and update individual checkout sections asynchronously.

The template must always contain a <form> element sent via a POST request to the /checkout/ address. The checkout form tags must be placed inside the form.

If the single-page checkout template is missing in a theme and theme settings are <SinglePage supported="true" />, the MyCashflow default theme's single-page checkout will be used instead.

Learn more about how to enable checkouts in the theme.

Template properties

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

Useful tags

Default theme implementation

{Doctype}
<html lang="{CurrentLanguageCode}">
	<head>
		{Helper(file: 'helpers/head')}
		{Helper(file: 'checkout/helpers/styles')}
	</head>
	<body class="{BodyClass} CheckoutFirstPage">
		{Extensions(for: 'body')}
		{Helper(file: 'checkout/helpers/header')}
		<main class="SiteBody Container">
			<div class="ContainerMaxWidth">
				<div class="CheckoutLayout">
					<div class="CheckoutAside">
						<div class="StickyAside">
							<button class="ShowCartButton" data-toggle-cart>
								<span>{%ShowShoppingCart}</span> <span class="ShowCartTotal" data-cart-total="{CartOpenTotal}"></span>
							</button>
							<div class="CheckoutCart">
								<div class="LinkHeader">
									<h2 class="Subtitle" data->{%ShoppingCart} ({CartTotalItems})</h2>
									<a href="/cart">{%ShoppingCartEdit}</a>
								</div>
								{Helper(file: 'helpers/discount-codes-notification')}
								{CampaignCode(
									action: 'checkout',
									before: '<div class="CampaignCodeForm CampaignCode-Checkout">',
									after: '</div>'
								)}
								{Helper(
									file: 'checkout/helpers/cart',
									before: '<div class="MiniCart MiniCart-Checkout">',
									after: '</div>'
								)}
							</div>
						</div>
					</div>
					<div class="CheckoutMain">
						{Notifications(
							before: '<div class="Notifications">',
							after: '</div>'
						)}
						<form id="CheckoutForm" action="/checkout/" method="post">
							<div class="ContentSection">
								<div class="LinkHeader">
									<h2 id="CheckoutCustomer" class="Title">{%CheckoutCustomerInformation}</h2>
									{Helper(
										case: 'CustomerNotLogged',
										file: '{{ <a href="/interface/Helper?file=helpers/modals/login" data-fancybox data-type="ajax">{%Login}</a> }}',
										or: '<a href="/account/logout/">{%Logout}</a>'
									)}
								</div>
								<p>{%CheckoutBillingAddressIntro}</p>
								<fieldset id="CheckoutBillingAddress" data-checkout-part="BillingAddress">
									{CheckoutBillingAddress(
										mode: 'form',
										ajax: 'true'
									)}
								</fieldset>
								<div class="SubContentSection">
									<h2 class="Subtitle">{%CheckoutShippingAddress}</h2>
									{Notifications(name: 'CustomerShippingAddressError')}
									<div class="FormItem CheckWrap">
										<div class="Checks">
											<label>
												<input type="checkbox" data-checkout-toggle="#CheckoutShippingAddress" />
												{%CheckoutShippingAddressToggle}
											</label>
										</div>
									</div>
									<div id="CheckoutShippingAddressWrap">
										<fieldset id="CheckoutShippingAddress" data-checkout-part="ShippingAddress">
											{CheckoutShippingAddress(
												mode: 'form',
												ajax: 'true'
											)}
										</fieldset>
									</div>
								</div>
							</div>
							<div class="ContentSection">
								<h2 id="CheckoutShipping" class="Title">{%CheckoutChooseShippingMethod}</h2>
								<p>{%CheckoutChooseShippingMethodIntro}</p>
								<div id="CheckoutShippingMethods" data-checkout-part="ShippingMethods" data-hide-details>
									{CheckoutShippingMethods(
										mode: 'form',
										ajax: 'true'
									)}
								</div>
							</div>
							<div class="ContentSection">
								<h2 id="CheckoutPayment" class="Title">{%CheckoutChoosePaymentMethod}</h2>
								<p>{%CheckoutChoosePaymentMethodIntro}</p>
								<fieldset id="CheckoutPaymentMethods" data-checkout-part="PaymentMethods" data-hide-details>
									{CheckoutPaymentMethods(
										mode: 'form',
										ajax: 'true'
									)}
								</fieldset>
							</div>
							<div class="ContentSection">
								<h2 id="CheckoutPreview" class="Title">{%CheckoutSendOrder}</h2>
								<p>{%CheckoutAcceptTermsIntro}</p>
								{CurrencyNotification}
								<fieldset id="CheckoutAcceptTerms">
									{CheckoutAcceptTerms}
								</fieldset>
							</div>
						</form>
					</div>
				</div>
			</div>
		</main>
		{Helper(file: 'helpers/drawers')}
		{Helper(file: 'helpers/scripts')}
		{Helper(file: 'checkout/helpers/scripts')}
		{Helper(file: 'helpers/scripts-ready')}
	</body> 
</html>