<% /* Bloomreach Loomi product card — Ceres PLP card design. Paste into the widget's Template field in the Bloomreach app. The companion stylesheet is docs/loomi/product-card-parity.css, which merges into the widget's Custom CSS (Loomi injects that into every shadow root). Layout follows the Ceres PLP card design, Figma node 426-9671: media image, "New" badge top-left, size list + quick add on hover heading row title left, colour swatches and +N right price sale price then struck-through list price promo "+ Free Knitwear Comp" Data comes from the productCard object documented at documentation.bloomreach.com/data-hub/docs/loomi-ai-for-shopify-product-card, and from productCard.product for the custom feed attributes. Every design element beyond image, title and price is guarded: it renders when its feed attribute arrives and is silently absent otherwise, so the card degrades to a correct plain card rather than a broken one. See docs/loomi/feed-attributes.md for what each one needs. The theme's base.css cannot reach in here — the widget renders each card in its own shadow root. Parity comes from the design tokens instead: custom properties inherit through the shadow boundary, so --font-*, --color-*, --variant-picker-* and --gap-* all resolve to the same values the native card uses. Never hardcode a value the theme has a token for. */ %> <% if (productCard.product && productCard.product.docType === "content") { %> <% var brContent = productCard.product.content || ""; var brSrc = ""; var brHref = ""; var brAlt = ""; var brI = brContent.indexOf('src="'); if (brI > -1) { brSrc = brContent.substring(brI + 5, brContent.indexOf('"', brI + 5)); } brI = brContent.indexOf('href="'); if (brI > -1) { brHref = brContent.substring(brI + 6, brContent.indexOf('"', brI + 6)); } brI = brContent.indexOf('alt="'); if (brI > -1) { brAlt = brContent.substring(brI + 5, brContent.indexOf('"', brI + 5)); } %>

<% if (brSrc && brHref) { %>

<% } else if (brSrc) { %> <%= brAlt %>

<% } else { %> <%~ brContent %> <% } %>

<% } else { %> <% var brProduct = productCard.product || {}; var brStyle = brProduct.style || ""; var brStyleColourwayUrls = brProduct.style_colourway_urls || []; var brStyleColourwayTitles = brProduct.style_colourway_titles || []; var brStyleColourwaySwatches = brProduct.style_colourway_swatches || []; /* The feed now returns an entry for the product ITSELF alongside its sibling colourways (previously the arrays only ever held siblings, which is why this used to filter the current product out). The design shows the card's own swatch first, then one sibling, then a +N for the rest — so self and siblings are partitioned separately rather than deduped into one list. */ var brStyleColourwaySelfIndex = -1; var brStyleColourwaySiblingIndexes = []; var brSeenStyleColourwayUrls = []; var brCurrentUrl = productCard.productUrl || brProduct.url || ""; brCurrentUrl = brCurrentUrl.split("?")[0]; /* Self-detection compares pathnames: productCard.productUrl arrives as an absolute URL while the feed's colourway urls are site-relative, so a raw string comparison never matches and self would land among the siblings. */ function brPathOnly(urlValue) { if (typeof urlValue !== "string") { return ""; } urlValue = urlValue.split("?")[0]; var brProtocolIndex = urlValue.indexOf("//"); if (brProtocolIndex > -1) { var brPathIndex = urlValue.indexOf("/", brProtocolIndex + 2); urlValue = brPathIndex > -1 ? urlValue.substring(brPathIndex) : "/"; } return urlValue; } var brCurrentPath = brPathOnly(brCurrentUrl); if (brStyleColourwayUrls.forEach && brStyleColourwaySwatches.forEach) { brStyleColourwayUrls.forEach(function(itemUrl, itemIndex) { var itemSwatch = brStyleColourwaySwatches[itemIndex] || ""; if (typeof itemUrl !== "string") { itemUrl = ""; } if (typeof itemSwatch !== "string") { itemSwatch = ""; } var hasSafeUrl = itemUrl.indexOf("/") === 0 || itemUrl.indexOf("https://") === 0; var hasSafeImage = itemSwatch.indexOf("/") === 0 || itemSwatch.indexOf("https://") === 0; var hasSafeHex = itemSwatch.charAt(0) === "#" && (itemSwatch.length === 4 || itemSwatch.length === 7); if (!hasSafeUrl || !(hasSafeImage || hasSafeHex)) { return; } if (brSeenStyleColourwayUrls.indexOf(itemUrl) !== -1) { return; } brSeenStyleColourwayUrls.push(itemUrl); if (brPathOnly(itemUrl) === brCurrentPath) { /* Keep only the first self match — a malformed feed should not be able to claim the "self" slot twice. */ if (brStyleColourwaySelfIndex === -1) { brStyleColourwaySelfIndex = itemIndex; } } else { brStyleColourwaySiblingIndexes.push(itemIndex); } }); } var brStyleColourwayIndexes = brStyleColourwaySiblingIndexes; if (brStyleColourwaySelfIndex !== -1) { brStyleColourwayIndexes = [brStyleColourwaySelfIndex].concat(brStyleColourwaySiblingIndexes); } /* The card shows the style name, not the feed title. Feed titles carry the colourway ("Eliza Collared Knit - Brunette Brown") which would truncate on the design's single-line title; the swatch already conveys the colour. productCard.title is the fallback, and it also tracks the selected variant once Loomi's variant UI is populated. */ var brDisplayTitle = brStyle || productCard.title || ""; /* The design shows two swatches then a +N. Swatches are flat colour only, never a product image: a colourway with no hex value takes no visible slot but still counts toward the +N, because it is still a colourway. */ var brVisibleStyleColourwayLimit = 2; var brHexStyleColourwayIndexes = []; brStyleColourwayIndexes.forEach(function(itemIndex) { var itemSwatch = brStyleColourwaySwatches[itemIndex]; if (typeof itemSwatch === "string" && itemSwatch.charAt(0) === "#") { brHexStyleColourwayIndexes.push(itemIndex); } }); var brVisibleStyleColourwayIndexes = brHexStyleColourwayIndexes.slice(0, brVisibleStyleColourwayLimit); var brHiddenStyleColourwayCount = brStyleColourwayIndexes.length - brVisibleStyleColourwayIndexes.length; /* Second image on hover, matching settings.show_second_image_on_hover on the native card. Needs a feed field — map the product's second media URL to alt_image in the Bloomreach catalogue and add it to the widget's field list. Absent, the card holds the primary image, which is the native behaviour when a product has one image. */ var brHoverImage = brProduct.alt_image || brProduct.hover_image || ""; if (typeof brHoverImage !== "string" || brHoverImage.indexOf("https://") !== 0) { brHoverImage = ""; } /* Promo line under the price ("+ Free Knitwear Comp" in the design). The source of truth is the custom.promo_message metafield — a metaobject with promo_text, background_colour and text_colour — surfaced to the widget as the promo_message feed attribute. The attribute may arrive as the plain promo_text string or as the whole metaobject shape, so both are accepted. promo_label is the older tag-driven attribute; it stays as a fallback so a catalogue mid-migration keeps its promo line. Until promo_message is populated in the Discovery index the slot renders empty and assets/bloomreach-product-card.js fills it from the card fragment — the same interim path as the sizes and colourways. The feed wins: the JS only touches an empty slot. */ var brPromoMessage = brProduct.promo_message; var brPromoText = ""; var brPromoBackground = ""; var brPromoTextColour = ""; if (typeof brPromoMessage === "string") { brPromoText = brPromoMessage; } else if (brPromoMessage && typeof brPromoMessage.promo_text === "string") { brPromoText = brPromoMessage.promo_text; if (typeof brPromoMessage.background_colour === "string") { brPromoBackground = brPromoMessage.background_colour; } if (typeof brPromoMessage.text_colour === "string") { brPromoTextColour = brPromoMessage.text_colour; } } if (!brPromoText && typeof brProduct.promo_label === "string") { brPromoText = brProduct.promo_label; } /* Only a literal hex colour may reach an inline style — the same guard the colourway swatches apply to their values. Anything else is dropped and the stylesheet's defaults stand. */ function brSafeHex(colourValue) { if (typeof colourValue !== "string") { return ""; } var isHex = colourValue.charAt(0) === "#" && (colourValue.length === 4 || colourValue.length === 7); return isHex ? colourValue : ""; } brPromoBackground = brSafeHex(brPromoBackground); brPromoTextColour = brSafeHex(brPromoTextColour); /* The colours travel as custom properties the stylesheet consumes — the --swatch-background pattern — so the CSS keeps its defaults when the payload carries no colours. */ var brPromoStyle = ""; if (brPromoBackground) { brPromoStyle += "--promo-background: " + brPromoBackground + ";"; } if (brPromoTextColour) { brPromoStyle += "--promo-text: " + brPromoTextColour + ";"; } /* Shopify's CDN resizes on a width query param, so a srcset can be built from the single thumb_image the feed gives us. Widths match the theme's own card-gallery ladder. The ladder runs to 1600 so a 4-up card stays sharp on a widescreen desktop: 25vw of a 2560px viewport is 640px, which needs a 1280px file at 2x. Stopping at 960 forced the browser to upscale, which is what made the PLP look soft on a 27-inch monitor while the PDP looked fine. */ function brSrcset(imageUrl) { if (!imageUrl) { return ""; } var joiner = imageUrl.indexOf("?") > -1 ? "&" : "?"; var widths = [160, 320, 480, 640, 800, 960, 1280, 1600]; var entries = []; widths.forEach(function(width) { entries.push(imageUrl + joiner + "width=" + width + " " + width + "w"); }); return entries.join(","); } var brPrimaryImage = productCard.thumbImage || ""; /* Must track .br-products__grid in plp-collections-custom.css: four columns from 750px, two below it. The old value declared a flat 300px above 1200px, so the browser sized every candidate against a card less than half the width it actually renders at. */ var brSizes = "(min-width: 750px) 25vw, 50vw"; /* Size buttons. skuid is the Shopify variant id, so a radio named id posts straight to /cart/add with no JavaScript — the checked radio IS the selection, which is why there is no separate hidden select to keep in sync. variant_title is in the widget's field list but not yet returned; without it there is no size to label a button with, so the row stays out. */ var brVariants = []; if (brProduct.variants && brProduct.variants.forEach) { brProduct.variants.forEach(function(variant) { var variantId = variant.skuid || ""; var variantLabel = variant.variant_title || variant.sku_title || ""; if (typeof variantId !== "string") { variantId = String(variantId); } if (typeof variantLabel !== "string") { variantLabel = ""; } /* "6 / New Blue" — the size is the first option. */ variantLabel = variantLabel.split(" / ")[0].trim(); /* One-size garments ship from the catalogue as "OS", which reads as an abbreviation nobody outside the business knows (SM-529). The theme maps it in snippets/size-label.liquid; this template cannot see Liquid, so the substitution is spelled out here in hardcoded English like every other string in this file. */ if (variantLabel.toUpperCase() === "OS") { variantLabel = "One Size"; } if (variantId && variantLabel) { brVariants.push({ id: variantId, label: variantLabel }); } }); } /* Shopify's own option-value order for Size can put a newly added value (e.g. 2XS added to one combined-listing colourway after the listing existed) last instead of in size order — Shopify platform behaviour, not something the feed sync corrects. Reordered to the canonical apparel ladder here rather than trusting the feed's order. Matches snippets/size-order.liquid on the theme side; duplicated because this template cannot see Liquid. A label off the ladder (a numeric size) keeps its original relative position, appended after the known sizes. */ var brSizeOrder = ["2XS", "XS", "S", "M", "L", "XL", "2XL"]; var brOrderedVariants = []; brSizeOrder.forEach(function(sizeName) { brVariants.forEach(function(variant) { if (variant.label.toUpperCase() === sizeName) { brOrderedVariants.push(variant); } }); }); brVariants.forEach(function(variant) { if (brOrderedVariants.indexOf(variant) === -1) { brOrderedVariants.push(variant); } }); brVariants = brOrderedVariants; %>

<% /* The native card is clickable across its whole area (product-card.js binds navigateToProduct on the host). Here the media link's ::after spans the card to give the same target without a JS handler — the info column sits above it so swatch buttons and colourway links stay clickable. */ %> <% if (brPrimaryImage) { %>

<% if (brHoverImage) { %> <% } %>

<% } else { %>

No image

<% } %> <% if (brHoverImage) { %> <% /* Mobile swipe gallery dots (Figma M-PLP 415:3856, card 426:14007). Coarse-pointer CSS turns the two images into scroll-snap slides and these dots mark the active one; assets/bloomreach-product-card.js binds the scroll listener, and builds the dots itself when the second image arrives via the theme fragment rather than the feed. Hidden on fine pointers, where the second image stays the hover swap. */ %> <% } %> <% /* Badges ("New" in the design) come from the theme's own markup, hydrated into this host by assets/bloomreach-product-card.js — the feed carries no badge flag. Empty until the JS runs. */ %>

<% /* Size selection posts straight to Shopify. Each radio is named id and carries the variant's skuid, so the checked radio is the selection and the form needs no JavaScript to stay in sync — submitting adds that variant to the cart. The row is filled from one of two sources. When the feed carries variant_title the sizes are rendered here, server-side. Until then the fieldset ships empty and assets/bloomreach-product-card.js fills it from the card fragment it already fetches for badges — see templates/product.bloomreach-card.liquid in the Ceres theme. Either way the markup and the POST are identical; only the source differs. The form hides itself while the fieldset holds no sizes, so a product with neither source shows nothing rather than an empty bar. It is a fine-pointer affordance only: on coarse pointers the stylesheet hides it outright and the theme quick add below opens the shared size bottom sheet instead (Figma "Size - overlay", 1811:20500). */ %>

<% /* Announces the quick-buy add's outcome to screen readers (assets/bloomreach-product-card.js #announceQuickBuyStatus), matching the native card's own quick-buy bar (blocks/_product-card-quick-buy.liquid). Guarded, not required: the JS deploys with the theme but this template is a manual console paste (.bloomreach/README.md), so it degrades to silent rather than throwing if an older pasted template is still live. */ %>

Select a size for <%= brDisplayTitle %> <% /* No size pre-selects — the design shows none chosen. The radios are required, so the browser's own constraint validation stops an add until the shopper picks one; the form still needs no JavaScript. The exception is a one-size product ("OS"): there is nothing to choose, so leaving it unchecked made the "+" fail constraint validation with "Please select one of these options" instead of adding the only variant (SM-536). It pre-selects instead. */ var brSingleSize = brVariants.length === 1; %> <% brVariants.forEach(function(variant) { %> checked<% } %> required /> <%= variant.label %> <% }); %>

<% /* The design's quick-buy "+" is a 24px icon, not a text glyph — drawn inline so it needs no asset request and inherits currentColor. Both icons ship in the markup; assets/bloomreach-product-card.js toggles which one shows via data-added after a successful add (Figma "quick buy success", node 426-11328), so there is no extra request on the success path either. */ %>

<% /* Target for the card's notify-me panel — a hidden-trigger back-in-stock instance cloned in from the card fragment's data-bloomreach-notify wrapper (assets/bloomreach-product-card.js #renderNotify). Tapping an unavailable size chip above overwrites its dataset with that variant and opens it (#openNotify) rather than selecting the chip. Empty and invisible until hydration; the drawer itself renders in the top layer once opened, so this wrapper never needs its own visible box. */ %>

<% /* The theme's quick-add serves two paths. On fine pointers it is the "Choose" modal fallback for anything the size row cannot express. On coarse pointers it is the only add path: bloomreach-product-card.js injects it on every card and gives sized cards the complete-the-look context, so the "+" opens the shared size bottom sheet. */ %>

<% /* Design puts the title and the swatch cluster on one row, title left and swatches hard right. Both colourway links and variant swatches land in that cluster. */ %>

<% /* blocks/product-title.liquid renders a

, not a real heading — a grid of h3s breaks heading order on the PLP. */ %>

<%= brDisplayTitle %>

<% /* The colourway cluster is DISPLAY ONLY (SM-522, SM-523). Swatches and the "+N" count are inert spans, never links, buttons or a

disclosure: nothing here is clickable, focusable or pointer-cursored, and the stylesheet takes the cluster out of hit testing entirely. Colour is still announced — each swatch is a labelled role="img" — but the only way to reach another colourway is the product page. */ %>

<% if (brVisibleStyleColourwayIndexes.length > 0) { %>

<% brVisibleStyleColourwayIndexes.forEach(function(itemIndex) { var itemLabel = brStyleColourwayTitles[itemIndex] || brStyle || "Other colourway"; var itemSwatch = brStyleColourwaySwatches[itemIndex]; %> <% }); %> <% if (brHiddenStyleColourwayCount > 0) { %> <% } %>

<% } %> <% /* blocks/swatches.liquid renders a radio-input variant picker. Here the swatch is an inert span — the card's swatches are display only (SM-523), and Bloomreach owns variant selection anyway — but the .swatch span inside carries the theme's swatch sizing, radius and border tokens so it measures the same. Fallback only. Ceres colourways are combined listings, so each product is one colour and its own variant swatches would show a single swatch — the sibling colourway lists above are the real source. This renders when those lists are absent and Loomi's variant swatches are not, so the two never stack into one cluster. */ %> <% if (brStyleColourwayIndexes.length === 0 && productCard.displayVariants && productCard.visibleSwatchItems.length > 0) { %>

<% productCard.visibleSwatchItems.forEach(function(item, idx) { /* Flat colour only — an image-backed variant swatch never renders. */ if (item.type === "image" || !item.hex) { return; } var isSelected = idx === productCard.selectedSwatchIndex; var selectedClass = isSelected ? " ceres-card__variant-swatch--selected" : ""; /* Never let a swatch render unnamed: a colourway with missing label data would ship aria-label="" — a critical axe button-name hit. */ var label = item.label || "Colour " + (idx + 1); %> <% }); %> <% if (productCard.showOverflowButton) { %> <% } %>

<% } %>

<% /* Price markup follows snippets/price.liquid with show_sale_price_first true, which is what templates/collection.json sets on the price block. The feed's price is the list price and sale_price the selling price, so hasDiscount means formattedPrice is the one to strike through. */ %> <% /* Every struck-through price carries its saving, the same -N% treatment as the PDP price row. Guarded: a malformed feed price renders no percentage rather than NaN. */ var brSavingsPct = ""; if (productCard.hasDiscount) { var brListPrice = Number(productCard.price); var brSellPrice = Number(productCard.salePrice); if (brListPrice > 0 && brSellPrice >= 0 && brSellPrice < brListPrice) { var brPct = Math.ceil(((brListPrice - brSellPrice) * 100) / brListPrice); if (brPct > 0) brSavingsPct = "-" + brPct + "%"; } } /* Gift card amounts are chosen on the PDP, so cards show no price — the same rule snippets/price.liquid applies for the theme-rendered card views. product_type is the durable signal (docs/loomi/data-hub-mappings.md) but isn't mapped in this account yet, so the title prefix is the interim check: every gift card product is currently named "eGift Card…" / "eGift Cards…". Drop the title check once product_type lands and every gift card title is confirmed to keep following the convention. */ var brGiftCardTitlePrefix = "egift card"; var brTitle = (productCard.title || "").toLowerCase(); var brIsGiftCard = (productCard.product || {}).product_type === "Gift Card" || brTitle.indexOf(brGiftCardTitlePrefix) === 0; %> <% if (brIsGiftCard) { /* No price for gift cards. */ } else if (productCard.hasDiscount) { %>

Sale price <%= productCard.formattedSalePrice %> Regular price <%= productCard.formattedPrice %> <% if (brSavingsPct) { %> <%= brSavingsPct %> <% } %>

<% } else if (productCard.formattedSalePrice || productCard.formattedPrice) { %>

<%= productCard.formattedSalePrice || productCard.formattedPrice %>

<% } %> <% /* The promo slot always renders — empty, it is invisible (the stylesheet hides :empty) and stands ready for assets/bloomreach-product-card.js to fill from the card fragment. Filled from the feed here, the JS leaves it alone. The text renders verbatim: the desktop Figma frame shows a "+ " prefix the mobile frames omit, so the prefix belongs to the metaobject's promo_text, not to this template. */ %>

style="<%= brPromoStyle %>"<% } %> ><%= brPromoText %>

<% } %>

Slideshow

Subscribe