Bistro Theme¶

Bistro is a theme for restaurants and takeaways that take orders on their own site. It is built around finding food, not around the basket: the menu is the home page, its sections stay in reach as you scroll, dietary filters and a search box narrow it, and every dish shows its allergens. The order is always in view, beside the menu on a computer and as a bar at the foot of a phone.

It is built on top of Brock, which is built on Nova (Bistro → Brock → Nova → Bootstrap template fallback), so every page works as soon as a site switches to it, and Brock's type, spacing, buttons, product page, basket, mini basket, checkout and footer come through wherever Bistro doesn't override them. It needs Restaurant Ordering for anything to be ordered; without it the menu is a menu.

Site admins pick it under Admin → Shop Settings → Theme (Choosing a Theme); platform staff can also set it per site in System → Tenants → {site} → Theme (theme name Bistro).

Design principles¶

What comes from Brock and what Bistro replaces¶

What Bistro redesigns¶

Other pages (content, account, search, listings) are Brock's (or Nova's where Brock has none) inside Bistro's header and Brock's footer.

The More panel is capped to the screen height (100dvh less the bar) and scrolls inside, so a long site menu never runs off the bottom. Bistro draws the site menu with its own template (templates/bistro/extensions/menuGeneratorExtension/menu.html, adapted from Ridge's): inside More each item with a drop-down is an accordion row.

Layouts: ordering and brand¶

The Site Setting Bistro layout (bistro-layout, under Settings → Ordering) picks how the site is laid out.

In the brand layout BistroLayoutInterceptor puts bistroLayout, bistroOrderingSection (and, in the site section, bistroOrderUrl, the menu page) on the model, and the header only reads those.

• Ordering section: the menu page (any page with the menu stereotype), /p/basket, /p/checkout, collection pages (except the site's landing collection, which is the home page), product pages, /buy, /checkout, order confirmation (/o/), order tracking (/order/) and search. These keep the ordering bar and the service strip (open until, Collection / Delivery), with Back to {site name} in place of More and Your order.
• Site section: everything else (home, content pages, restaurants, blog, booking, account, errors). A regular header: the logo, the whole site menu as a row of links with drop-downs (use six or seven top-level items), Book a table (/book) and Order now (the menu page; left out if the site has no menu page) buttons, an account icon, and the order link once the basket has something in it. Below 992px a menu button opens a full-height panel that scrolls inside (the menu as an accordion) with the two buttons pinned to its foot. There is no service strip here.

The decision (BistroLayouts) is by path, so it needs no per-page setup. A site hides the name beside a wordmark logo with the Hide site name in navigation site detail (hideSiteNameInNav); both headers honour it.

The menu page¶

Give the home page (or a page called Menu) the menu page stereotype. It carries orderingStatus in topBanner, restaurantMenu in mainSection and the site menu in navMenu. New sites have the stereotype from their seed data; existing sites get it from the restaurant site upgrade (MenuStereotypes.ensure).

Bistro already shows the ordering status in its header, so it draws the orderingStatus block as nothing. Switch the site to another Nova theme and the block comes back without editing the page.

The menu: restaurantMenu¶

Any Nova-based theme can use it. Its templates live in templates/nova/extensions/restaurantMenu/, its assets in themes/nova/css|js/extensions/restaurantMenu/.

Rows are the enabled menuItem products of each section, in the order they were added. Each row shows the name, a dotted leader and the price ("from" when sizes cost different amounts), a plain-text teaser, the dietary marks (V, VG, GF, DF, NF, H, K and the heat levels) and the allergens, an optional photo, and Add. While the kitchen is closed the menu stays browsable and Add says when ordering opens.

Tabs and search. The section tabs stick under the header and follow the scroll. Search matches names and descriptions; chips narrow to items with every chosen flag; empty sections and their tabs hide, and a live region says how many dishes match.

The item sheet. Add opens a sheet (a bottom sheet on phones, a dialog on wider screens) with the dish's photo and description, its allergens, sizes, each modifier group as radios (exactly one), checkboxes (each option once) or - / + steppers (an option more than once), a note for the kitchen and the quantity. Required groups are marked and checked, a full group takes no more, sold-out options are greyed and can't be chosen, and the button shows the running total. Adding posts in the background; the sheet closes, the basket panel refreshes, and a confirmation is announced.

Without JavaScript Add is a link to the item page (?item=<seoName> on the menu page), a plain form that posts to the basket. Sizes post as vSkuId; each choice posts as modifiers[n] with the value groupId:optionId (a stepper option is a select of groupId:optionId:count), which the basket reads as its modifiers list. The sheet loads the same page and lifts its form out, so the server is the only renderer.

From a product page. A dish with modifier groups reached outside the menu (from search, say) can't be added with a plain Add button, since its required choices need answers. Its product page (ProductController, model menuItemUrl from MenuItemLinks) shows Choose options instead, a link to the dish's item page on the first enabled page with the menu stereotype (/p/<menu>?item=<seoName>). A size picked on the product page goes along as &size=<variant skuId>, and the item form starts on it. Nova's product page, Brock's (and so Bistro's) and every theme that falls back to Nova (Ridge) show the link; Depot, Pop, Spec and Atelier have their own product pages and keep Add, which the basket refuses with a message saying a choice is needed. Dishes without choices keep the Add button everywhere.

The basket panel shows each line with its choices, note and allergens, - / + and Remove (posting to /basket/update and /basket/remove, in the background with JavaScript), the subtotal and Checkout. It is refreshed from ?rmView=basket.

Accessibility. Tabs are links with aria-current, and moving to a section focuses its heading. The sheet is a modal <dialog>: the page behind is inert, Escape or the close button closes it, and focus returns to the Add button. Steppers are real buttons with labels ("One more Extra halloumi"). Motion is reduced when the visitor asks for it.

Re-skin the menu in another theme by setting the --rm-* tokens on :root (see the top of restaurant-menu.css): --rm-bg, --rm-surface, --rm-ink, --rm-muted, --rm-line, --rm-accent, --rm-accent-ink, --rm-radius, --rm-font-display, --rm-sticky-top (height of a sticky header) and --rm-leader (dotted, or none). Brock, Depot, Pop, Atelier and Spec point --rm-sticky-top at their measured header height (--b-header-offset and the like), Ridge sets its header's 73px (63px on phones), and on Nova with the fixed header option the menu's script measures the header itself.

Ordering status: orderingStatus¶

A banner saying whether the kitchen is taking orders, how long orders take, and the Collection / Delivery switch. It renders nothing unless restaurant ordering is on.

The postcode check asks GET /api/public/v1/local-delivery/check?postcode=&countryCode=GB (see Restaurant Ordering) and shows its message under the switch, without moving the switch or the opening hours beside it. A part postcode ("LS6") is sent as it is, and on the menu page the basket's subtotal goes along (&subtotal=), so a basket under the minimum hears "Add £4.50 more for delivery". Without an answer it says the postcode is checked at checkout. The choice and postcode are remembered in the browser (localStorage keys bdgr.orderMode, collect or delivery, and bdgr.orderPostcode), never sent to the server on their own. Unified checkout, on the same origin, reads them once for a food order that has no delivery method yet: Collection preselects the kitchen's collection option (when there is exactly one); Delivery fills the postcode into an empty delivery address, which brings back the local delivery options, and preselects the first. The step-by-step checkout (deliveryChooser, Nova and Brock) preselects the matching option the same way (its address step comes first, so it doesn't fill the postcode). The customer can change either, and the server checks the address and method as usual.

Every page of a shop taking restaurant orders carries orderingStatus (an OrderingStatusView, put on the model by OrderingStatusInterceptor) and orderingDeliveryCheck, so a theme header can show the status.

Lines with choices, in every Nova theme¶

fragments/lineItemAttributes :: customisation(lineItem) draws a line's choices ("Garlic mayo, Extra halloumi ×2 (+£3.00)"), the customer's note and the allergens as ordered, compactly and escaped. Nova's basket, checkout summary and order confirmation, Brock's basket, summary and confirmation, and the mini baskets of Brock, Depot, Pop, Spec and Atelier all include it. It draws nothing for an ordinary line.

Implementation¶