Skip to main content

Luma & catalog

The default Luma front-end ships out of the box. No theme contortion required — layout XML places everything into the standard product page containers.

Product page (PDP)​

The pre-order info block (Block/Product/View/PreorderInfo.php, template view/frontend/templates/product/view/preorder-info.phtml) renders above the add-to-cart form for any product where pre-order is eligible.

It shows:

  • Status indicator — "Available for pre-order" / "Pre-order coming soon" / "Pre-order closed".
  • Availability date — the product's preorder_available_from formatted to the store-view locale.
  • Custom message — your preorder_message attribute, with {{availability_date}} substituted.
  • Deposit breakdown — what the customer pays now vs. on shipment.

The block plugs into catalog_product_view via view/frontend/layout/catalog_product_view.xml.

Custom message placeholder​

The preorder_message attribute supports the {{availability_date}} token, e.g.:

Reserve yours — ships {{availability_date}}.

renders to:

Reserve yours — ships 15 May 2026.

The locale-aware date format follows your store-view's locale/date_format config.

Category & search lists​

Pre-order badges on category, search, and related-product lists are rendered via a plugin on Magento\Catalog\Block\Product\ListProduct (Plugin/Catalog/Block/ListProductPlugin.php). The badge is:

  • Positioned absolutely top-left over the product image.
  • Styled via the module's theme variables (override view/frontend/web/css/source/_module.less to recolour).
  • Reads preorder_enabled + preorder_available_from to show "Pre-order" or "Coming soon" as appropriate.

Configurable products​

For configurable products, the eligibility depends on the selected variant. The PDP info block fires an AJAX request to Controller/Product/CheckPreorder.php whenever the swatch changes, returning:

  • Whether the variant is pre-order eligible.
  • Its specific availability date and custom message.
  • Its specific deposit breakdown.

The JS layer (view/frontend/web/js/preorder-info.js) hooks the swatch-change event and updates the info block in place. No full page reload.

Bundle and grouped products​

Same approach — the eligibility check fires when the bundle / grouped selection changes. The deposit breakdown shows the maximum deposit across the selection, since the customer's actual price changes with the selection.

Pre-Order pill across the storefront​

Every surface where a pre-order item appears gets an inline orange Pre-Order pill so the customer never loses context:

SurfaceSource
PDP info blockview/frontend/templates/product/view/preorder-info.phtml
Minicartview/frontend/web/template/minicart/item/default.html override
Cart pageview/frontend/templates/cart/item/default.phtml override
Checkout sidebar summaryview/frontend/web/template/summary/item/details.html override (KO data preserved via ItemConverterPlugin so the pill survives the AJAX step transitions)
Order success pageSame template extension
My Orders listingview/frontend/templates/order/history/column-cell.phtml
Customer order detail pageview/frontend/templates/order/items/preorder-pill.phtml

The colour and rounded-chip styling lives in view/frontend/web/css/source/_module.less — override @byte8-preorder-pill-bg and @byte8-preorder-pill-fg in your theme to retheme.

Order confirmation email​

For orders containing pre-order items, the standard order confirmation email is enhanced with an orange callout (original total / deposit paid / balance due when ready) and a per-item indicator under each pre-order line. No template editing required — the layout extension hooks the existing renderers. See Email configuration.

Cart fee + message​

The pre-order fee row is added to the cart totals via the totals collector (Model/Total/Quote/PreorderFee.php). The KO template view/frontend/web/template/checkout/summary/preorder-fee.html renders it as a separate line below subtotal.

The cart message (configurable in admin → Display Settings) appears as a banner above the cart line items if any pre-order item is in the cart.

Customer account "My pre-orders"​

Customers see their own pre-orders at customer/account/preorders:

  • Status with colour coding.
  • Deposit paid + balance owed.
  • Cancel button (if status allows).
  • Pay balance link when the pre-order is ready with an outstanding balance (covers both vault_capture_failed and the tokenised-email flow).

Layout: view/frontend/layout/preorder_customer_preorders.xml — added to the customer account sidebar via view/frontend/layout/customer_account.xml.

Tokenised guest balance payment​

When a ready pre-order has a balance, the Pay Remaining Balance email contains a single-use link to /preorder/order/complete/preorder_id/{id}/token/{48-char-token}. The frontend controller (Controller/Order/Complete.php) accepts the link without login via hash_equals token validation, lets the customer pay the balance through the standard checkout pipeline, and clears the token on success. The same controller still honours customer-session ownership when no token is present, so a logged-in customer browsing their orders can pay manually too.

Customising the look​

For Luma theme overrides, the standard pattern applies — override the LESS file or the phtml template in your theme's Byte8_Preorder directory. The module ships with reasonable defaults; you'll only need to override if your design system uses different colour tokens.