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

Kuvaus

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.

Sivupohjan ominaisuudet

Sivupohjan sijainti
themes/shop/THEME/checkout/singlepage.html
Sivupohjan URL
/checkout/
Asetettu näkyvyys

Hyödyllisiä tageja

Toteutus oletusteemassa

This example is taken from MyCashflow’s Barebones default theme

{Helper(file: 'helpers/header')}
<div class="SiteContent">
	<div class="Container">
		<div class="Grid">
			<div class="Col-4-12 Col-Tablet-Push-8-12 Hide-Tablet">
				<div id="StickyCart">
					{Helper(
						file: 'helpers/mini-cart',
						before: '<div class="MiniCart MiniCart-Checkout">',
						after: '</div>'
					)}
					{CampaignCode(
						action: 'checkout',
						before: '<div class="CampaignCodeForm">',
						after: '</div>'
					)}
				</div>
			</div>
			<div class="Col-7-12 Col-Tablet-Pull-4-12 Col-Tablet-12-12">
				{Notifications(
					before: '<div class="Notifications">',
					after: '</div>'
				)}
				<form id="CheckoutForm" action="/checkout/" method="post">
					<div class="ContentSection">
						<div class="Flex Flex-Collapse">
							<div class="FlexItem">
								<h2>{%CheckoutCustomerInformation}</h2>
							</div>
							<div class="FlexItem FlexSpacer"></div>
							<div class="FlexItem">
								{Helper(
									case: 'CustomerNotLogged',
									file: '{{<a  class="Button" href="/account/login/" data-modal data-modal-helper="helpers/modals/login">{%Login}</a>}}',
									or: '<a  class="Button" href="/account/logout/">{%Logout}</a>'
								)}
							</div>
						</div>
						<p>{%CheckoutBillingAddressIntro}</p>
						<fieldset id="CheckoutBillingAddress" data-checkout-part="BillingAddress">
							{CheckoutBillingAddress(
								mode: 'form',
								ajax: 'true'
							)}
						</fieldset>
					</div>
					<div class="ContentSection">
						<h2>{%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">
							<p id="RemoveShippingAddress">
								<span class="fa fa-trash"></span>
								<a href="#" data-checkout-clear="#CheckoutShippingAddress">
									{%RemoveShippingAddress}
								</a>
							</p>
							<fieldset id="CheckoutShippingAddress" data-checkout-part="ShippingAddress">
								{CheckoutShippingAddress(
									mode: 'form',
									ajax: 'true'
								)}
							</fieldset>
						</div>
					</div>
					<div class="ContentSection">
						<h2>{%CheckoutChooseShippingMethod}</h2>
						<p>{%CheckoutChooseShippingMethodIntro}</p>
						<div id="CheckoutShippingMethods" data-checkout-part="ShippingMethods">
							{CheckoutShippingMethods(
								mode: 'form',
								ajax: 'true'
							)}
						</div>
					</div>
					<div class="ContentSection">
						<h2>{%CheckoutChoosePaymentMethod}</h2>
						<p>{%CheckoutChoosePaymentMethodIntro}</p>
						<fieldset id="CheckoutPaymentMethods" data-checkout-part="PaymentMethods">
							{CheckoutPaymentMethods(
								mode: 'form',
								ajax: 'true'
							)}
						</fieldset>
					</div>
					<div class="ContentSection">
						<h2>{%CheckoutSendOrder}</h2>
						<p>{%CheckoutAcceptTermsIntro}</p>
						<div class="Hide-Desktop">
							{Helper(
								file: 'helpers/mini-cart',
								before: '<div class="MiniCart MiniCart-Checkout">',
								after: '</div>'
							)}
							<p>
								<a href="#" data-modal data-modal-helper="helpers/modals/campaign-code-checkout">
									{%CampaignCodeInquiry}
								</a>
							</p>
						</div>
						{CurrencyNotification}
						{CheckoutAcceptTerms}
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
{Helper(file: 'helpers/footer')}