Checkout

The checkout (/cart) is a Vue app of the engine. It holds the whole flow: the cart, the customer's details, the delivery and payment methods, the validation, the payment and the confirmation. The template gives the look of a few parts and nothing else: it does not need its own API calls, validation or payment logic.

Part	File	What it is
Cart	pages/cart.twig	The first step: the products in the cart, their quantities, the summary and the button to the next step
Confirmation	layout/checkout/confirmation.twig	The step after a successful order
Pickup point	layout/checkout/pickup-modal.twig	The dialog where the customer picks a package point
Login	layout/checkout/login-modal.twig	The login dialog of the checkout

A template needs all four files: the engine renders them together, and when one of them is missing or fails to render the checkout shows without the template's cart step and dialogs. The steps with the delivery, the address and the payment are the engine's own markup.

Twig and Vue

The parts are rendered by Twig first and then used as Vue templates by the browser. {{ }} belongs to Twig, so a Vue expression is wrapped in verbatim:

{% verbatim %}{{ item.name }}{% endverbatim %}
<button type="button" v-on:click="remove(i)">{{ 'cart.item.remove'|trans }}</button>

Texts come from the template's own theme texts ('key'|trans|default('text', 'hu')).

pages/cart.twig

Rendered with webshop_id and currency_code. It is shown while the app is at step 1. What a template can use:

Name	Description
items	The products in the cart: id, name, size, image, price, quantity, max (the stock limit), availability (0 out of stock, 1 in stock, 2 pre-order)
itemsNum	The number of pieces
remove(i)	Removes the ith product
stepQuantity(i, ±1), canDecrement(item)	Changes the quantity by one, and whether it can go lower
formatPrice(amount)	Formats an amount in the shop's currency, following the money format

Take the pages/cart.twig of the example template as the starting point: it uses everything the step offers.

layout/checkout/confirmation.twig

Rendered with:

Variable	Description
more	Products the customer can still add to the order: id, name, name_js, image, image_srcset, price, discount_price (or null; both formatted), add_price (the number the cart adds)
currency_code	The currency of the sale channel

Options and widgets

• The behaviour of the delivery method list is set in config.json → checkout (collapse_methods_on_choice, keep_methods_open), see Config.
• The look of the card fields and wallet buttons of the payment apps comes from config.json → payment_look, see Config.
• A wallet method (Apple Pay, Google Pay, Revolut Pay) whose display type is "standalone" draws its button in place of the order button; the engine keeps the order button hidden while the button loads and gives it back when no button comes. The same works on the payment page of an unpaid order (/payment/{id}, opened from the payment reminder e-mail), which is the engine's page and not themable.
• On touch devices the engine locks the page under an open layer with fields (the pickup point and login dialogs, the country list). A template's own layers can join, see scroll_lock in Config.