...
", "priceMin": 2400, "priceMax": 2600, "categories": [{ "id": "cat_...", "name": "Brewing", "slug": "brewing" }], "images": [ { "url": "https://cdn.../dripper.jpg", "alt": "Dripper", "urls": { "card": "https://cdn.../r/card/...", "gallery": "https://cdn.../r/gallery/..." } } ], "options": [ { "name": "Size", "values": [{ "value": "S" }, { "value": "M" }] } ], "variants": [ { "id": "var_...", "price": 2400, "compareAtPrice": null, "sellableQuantity": 32, "inventoryPolicy": "deny", "isDefault": true, "optionValues": [{ "optionName": "Size", "value": "S" }] }, { "id": "var_...", "price": 2600, "compareAtPrice": null, "sellableQuantity": 0, "inventoryPolicy": "deny", "isDefault": false, "optionValues": [{ "optionName": "Size", "value": "M" }] } ] } } ``` ## A product page A list card has room for an image, a name and a price. A product page shows the whole product, so the shopper can choose and buy without a pop-up. 1. **Route on the slug** (`/products/:slug`) and **fetch the product when the page opens**: `GET /public/{pk}/products/{slug}`. Do not build the page from the list card's data, or from data passed along with the link: a shared link or a refresh has no list behind it. Show a "not found" state on a 404. 2. **Show all of it:** - every image in `images` as a gallery (`urls.gallery` for the large picture, `urls.card` for thumbnails, `alt` as alt text), and a placeholder when there are none; - `name`, and `summary` under it when set; - the selected variant's `price` (and `compareAtPrice` struck through when set); - one picker per entry in `options` (an option with a single value may be hidden), preselected from the `isDefault` variant, and the variant whose `optionValues` match the choices; - `description`, which is HTML from the store's editor: render it as HTML (in React, `dangerouslySetInnerHTML`), not as text; - `attributes` as a specification list when there are any, and `related` as cards linking to their own product pages when it is not empty ("Pairs well with" when `relatedArePairs` is true, else "You may also like"). 3. **One buy button: "Add to cart"**, which calls `Shoprocket.cart.add({ variantId, quantity })` with the matched variant. Disable it and say "Sold out" when that variant cannot be bought. A refused add already shows the reason in the widget's card, so an inline message of your own is optional. A product page has no "View options" or "View product" button: the options are on the page, and it is the product page. 4. **When your own button cannot sell it, mount the widget's product view instead.** A product with any `personalizationFields`, any `subscriptionPlans`, `kind` `gift_card` or `bundle`, or `purchaseMode` `enquire` needs questions only the widget asks. In place of your own gallery, pickers and button, put `` on the page (in React with `key={slug}`): the full buying screen, inside your own layout. Keep your header, breadcrumbs and related products around it. **Hosting:** a single-page app with `/products/:slug` routes needs its host to serve `index.html` for every path (a "SPA fallback" or rewrite), or a shared product link answers 404. **On a list card:** link the card (or a "View" button) to the product page. A card may also carry a quick "Add to cart" (`Shoprocket.cart.add` with its only variant) when the product has exactly one variant, can be bought, and needs nothing from point 4; otherwise its button goes to the product page. Do not open the widget's pop-up (`Shoprocket.product.openModal`) from a site that has its own product pages. src/pages/Product.jsx (React): ```jsx import { useEffect, useMemo, useState } from 'react'; import { useParams } from 'react-router-dom'; import { API, addToCart, canBuy, formatPrice, getStore } from '../shoprocket'; // Products that need the widget's own buying screen (point 4). const needsWidget = (p) => p.personalizationFields.length > 0 || p.subscriptionPlans.length > 0 || p.kind === 'gift_card' || p.kind === 'bundle' || p.purchaseMode === 'enquire'; export default function Product() { const { slug } = useParams(); const [currency, setCurrency] = useState(null); const [product, setProduct] = useState(null); const [related, setRelated] = useState([]); const [choice, setChoice] = useState({}); const [image, setImage] = useState(0); const [error, setError] = useState(null); useEffect(() => { getStore().then((s) => setCurrency(s.currency)); }, []); useEffect(() => { setProduct(null); fetch(`${API}/products/${encodeURIComponent(slug)}`) .then((r) => (r.ok ? r.json() : Promise.reject(r.status))) .then(({ data, related }) => { setProduct(data); setRelated(related); setImage(0); const def = data.variants.find((v) => v.isDefault) ?? data.variants[0]; setChoice(Object.fromEntries(def.optionValues.map((o) => [o.optionName, o.value]))); }) .catch(() => setError('not-found')); }, [slug]); const variant = useMemo(() => product?.variants.find((v) => v.optionValues.every((o) => choice[o.optionName] === o.value)), [product, choice]); if (error) returnProduct not found.
; if (!product || !currency) returnLoading...
; const pic = product.images[image]; return ({product.summary}
}{variant && variant.price != null ? formatPrice(variant.price, currency) : 'Price on request'}
{product.options.map((opt) => ( ))} {product.description && } )} {/* related: render as cards linking to /products/{slug} */}