Results & Recommendations

The results panel is the last screen a shopper sees in the quiz. It lists the ranked recommendations, lets them add products to the cart, and (optionally) gates the view behind the lead-capture form.

This page covers what’s in the panel today, the ways to customise it, and what’s still in flight.

[SCREENSHOT: The storefront results panel showing three ranked product cards.]

What renders

The results panel is rendered by the storefront bundle’s <ResultsPanel> component, fed by the recommendation set returned from POST /storefront/sessions/{sid}/recommend.

For each recommended product the panel shows:

• The product image, name, and price.
• A short rationale string (when the recommendation engine returns one).
• An Add to cart button.

The number of cards shown is capped by the result layout — the Grid default returns the top eight ranked products. You can change the cap by swapping the engine or filtering the result set; see Recommendation Rules.

Add to cart

Each card has an Add to cart button. Tapping it calls the storefront cart.js helper, which POSTs to the WooCommerce AJAX endpoint at window.wc_add_to_cart_params.wc_ajax_url — the same endpoint the core WooCommerce Add to cart buttons use.

An Add all to cart action at the foot of the results panel batches the additions through POST /wp-json/dino-discover/v1/storefront/cart/bulk-add. This short-circuits the per-item HTTP overhead, updates the WooCommerce cart in a single round-trip, and fires one added_to_cart browser event with the aggregate cart fragments — better INP than N sequential WC AJAX POSTs.

Bulk add respects stock

The bulk-add endpoint validates each product’s purchasability before adding it to the cart. If one product in the result set is now out-of-stock since the recommendation was computed, it’s silently dropped from the bulk add (and surfaces in the response so the storefront can flag it).

Layout modes

The engine supports three layout kinds (ResultsLayoutKind):

Layout	What it looks like
Single	One headline recommendation. Best when the quiz answers narrow tightly to one product.
Grid	A responsive grid of product cards (default). Best for catalogues where the visual identity of the products carries weight — apparel, gifts, plants.
Regimen	A vertical list with longer descriptions and grouping by category. Best for prescriptive recommendations — skincare routines, supplement stacks, equipment kits.

Per-quiz layout selection isn’t yet exposed in the admin

The three layout kinds exist on the engine side, but a per-quiz results-designer surface (where merchants pick Single/Grid/Regimen visually) isn’t shipped in 0.1.0 — that’s the results-page WYSIWYG designer on the Beta gap list. Today every quiz renders Grid. Developers can override per-quiz via the RecommendationSet’s ResultsLayout value object.

Per-quiz styling (background, accent colour, button radius, font family, logo) lives on the Builder’s Style panel. Site-wide design tokens (the 13 allowlisted --dino-discover-* CSS variables) live in Dino Discover → Settings.

Empty results

If the recommendation engine returns zero products (e.g. every match is out of stock), the panel renders a fallback message the merchant can customise per quiz. Typical fallbacks point shoppers at the catalogue (“Browse all products”) or capture the email so you can follow up when stock returns.

The fallback message lives in the Style panel; it’s part of the published snapshot.

Theme overrides

The results panel renders into templates/quiz-results.php. Copy it into your theme at yourtheme/dino-discover/quiz-results.php and WordPress will load yours instead.

Two hooks fire around the template:

• dino_discover_before_results — fires immediately before the panel renders.
• dino_discover_after_results — fires immediately after.

Both pass the same $args payload. The exact API surface is in Hook Reference.

The post-quiz session

After results render, the session remains active for a configurable window — the shopper can:

• Continue adding products to the cart.
• Submit the lead-capture form to save their results to email (if lead capture is enabled).
• Reload the page and resume the same session. The variant token is persisted to a first-party cookie plus localStorage, so the same shopper resumes the same recommendation across tabs and reloads.

The GET /wp-json/dino-discover/v1/storefront/sessions/{sid}/results endpoint serves a cached copy of the result payload for the lifetime of the session, so repeat reads are fast.

What’s not yet shipped

Per the Beta gap list:

• Results-page WYSIWYG designer. The Style panel exposes the design tokens, but a full visual designer is on the roadmap.

What’s next

• Recommendation Rules — the ranking that feeds this panel.
• Lead Capture Panel — the optional email gate above or below results.
• Embedding the Quiz — the host page that contains all this.
• Settings — global styling tokens.