Basket and Checkout Pages¶
The basket is a single card of lines beside a sticky order summary. It is built to be read in one pass: what you are buying, what it costs, and one obvious next step.
What the shopper sees¶
| Part | Behaviour |
|---|---|
| Heading | The page title, the item count (3 items, counting units, not lines; a donation amount counts as one) and a Continue shopping link. |
| Line | Picture, name (links back to the product), chosen options, the line total at the top right, then the quantity stepper with Remove item and Save for later (when enabled) on one row. When the quantity is more than one, the unit price shows beneath the name. |
| Stock | Silent when everything is available. A line shows Partially in stock or Out of stock only when there is a problem. |
| Quantity types | Selectable products get the stepper, fixed-quantity products show Qty n, and price-as-quantity products (donation or gift card amounts) get an amount field with an Update button. |
| Order summary | Subtotal, service fee and delivery where they apply, then the total. Until a delivery method is chosen it says Calculated at checkout, so the total never looks final when it is not. Sticky beside the lines from 900px. |
| Checkout | One primary button, a Secure checkout line and a quiet Continue shopping link. |
| Phones | Below 900px the summary sits under the lines, so a bar pinned to the bottom of the screen carries the total and Checkout until the summary's own button comes into view. The bar's total follows the summary while prices reprice. |
| Empty | A short message and a Continue shopping button, at full width. |
Prices are repriced asynchronously by basket-v2.js; the hooks it writes to (.lineItemPrice, .lineItemNet,
.orderPrice and friends, and link#order-data) are unchanged, and the pinned bar deliberately does not carry
.orderPrice because the script only updates the first one on the page.
Theming¶
Nova's basket (templates/nova/extensions/fullBasket/) is styled entirely from --nb-* tokens, so a theme re-skins
it by setting tokens on :root in its own stylesheet. It does not need to out-specify the template's inline CSS.
Every token falls back to a Nova token (--color-primary, --font-family-display, --radius-lg ...), so a theme
that only re-points Nova's palette, fonts and radii already gets a basket in its own voice. The full list is in
fragment/commerceTokens.html.
| Token group | Controls |
|---|---|
--nb-card-bg, --nb-card-border, --nb-card-radius, --nb-card-shadow |
The lines card and the summary panel |
--nb-summary-bg, --nb-summary-border |
The summary panel on its own (defaults to the card) |
--nb-rule, --nb-control-border, --nb-control-radius |
Row dividers, stepper and amount field |
--nb-title-*, --nb-item-title-*, --nb-total-* |
Page title, line titles and the order total (font, size, weight, letter-spacing, case) |
--nb-label-case, --nb-label-ls, --nb-label-size |
Small labels: Remove item, the count, summary rows |
--nb-num-font |
Prices and totals (Depot and Spec use their monospace face) |
--nb-cta-* |
The checkout button: background, text, hover, border, radius, shadow, case, weight |
--nb-sticky-top, --nb-bar-bg |
Where the summary sticks (to clear a sticky header) and the phone bar's background |
Atelier, Pop, Depot and Spec each set a block of these at the end of their own stylesheet. Brock has its own
basket templates (templates/brock/extensions/fullBasket/) and styles them with its --b-* tokens; it has the
same sticky summary and phone checkout bar.
Checkout¶
The checkout steps use the same tokens, so the basket and checkout read as one flow in every theme. Each step
(details, address, delivery, payment, and the order confirmation and order placed pages) renders through
templates/nova/fragment/checkoutStyles.html, which gives it the same card and header band, headings, field
labels and errors, delivery options and alerts, and makes its main button the same button as the basket's
Checkout (--nb-cta-*). The checkout sidebar uses the basket's totals block.
Inputs and buttons are not styled by the checkout: they are .nova-input and .nova-btn, which every theme
already restyles. Stripe's card field takes the input's look, and the unified checkout's Payment Element is given
the theme's input colours (or its own panel colours, where a theme sets one, as Spec does) because Stripe draws
into an iframe that cannot see the page's CSS.
Extra tokens for the checkout steps: --nb-head-bg (the header band), --nb-input-bg, --nb-card-title-size
and --nb-legend-size. Brock's unified checkout has its own rules in brock.css; its other steps use the Nova
templates through the token block at the end of its checkout rules.
Your details: the title field¶
The details step (the checkout-personalDetails extension) does not ask for a title (Mr, Ms, Dr…) unless
the shop turns on its Show title setting. It used to ask every time, with no empty option, so the first
title in the list ended up on almost every order: browser autofill fills the name, email and phone but not
the title. When the field is shown it starts on Select, offers Mr, Mrs, Miss, Ms, Mx and Dr, and saves no
title if none is picked. Adding title to the extension's Mandatory Fields shows it whatever the setting
says. The title goes on to the order, the customer's saved details and Gift Aid declarations, all of which
treat it as optional.
Messages¶
The page uses the basket.* Site Text keys (for example basket.yourBasket, basket.orderSummary,
basket.itemCount, basket.deliveryLater, basket.secureCheckout) and, for the buttons, the existing
button.removeItem, button.saveForLater, button.checkout and button.continueShopping. Brock uses the
brock.basket.* keys.
Not done yet¶
- Free-delivery progress. The delivery threshold is not exposed to the basket model, so there is no You're £x away from free delivery meter.
- Promotion code field. Codes are applied at checkout, not on the basket.
Single-page checkout¶
Sites use the step-by-step checkout page (checkout) unless Use single-page checkout
(unified-checkout-enabled, Settings › Checkout and payments › Checkout) is on. Then every
checkout renders the shared checkout-unified page instead: contact, address, delivery and payment on one
page with Apple Pay and Google Pay at the top. It needs Stripe connected; without it the step-by-step page
stays. Direct checkout links always use it (see Direct Checkout Links).