<% /* Loomi AI > Experience customization > Product card. Keep in sync with the Loomi admin. */ %> <% function removeProtocol(path) { return path.replace(/http(s)?:/, '').replace('cdn.shopify.com/s/files/1/0862/1332/9239/files', 'www.zeb.be/cdn/shop/files'); } function formatMoney(price) { if (price === null || price === undefined) { return ''; } // Loomi has no config.format_money: reproduce the old "€ 1.234,56" output const currencySymbol = window.bloomreach && window.bloomreach.currencySymbol ? window.bloomreach.currencySymbol : '€'; const [whole, cents] = Number(price).toFixed(2).split('.'); return `${currencySymbol} ${whole.replace(/\B(?=(\d{3})+(?!\d))/g, '.')},${cents}`; } // Loomi returns list fields as real arrays/objects; Discovery returned JSON strings function parseJsonValue(value, fallback) { if (value === null || value === undefined || value === '') return fallback; if (typeof value !== 'string') return value; try { return JSON.parse(value); } catch (e) { return fallback; } } function getPrice(product) { const price = product.price_range && product.price_range.length > 0 ? product.price_range[0] : product.price; return price; } function getSalePrice(product) { const price = getPrice(product); const salePriceFromRange = product.sale_price_range && product.sale_price_range.length > 0 && product.sale_price_range[0] < product.sale_price ? product.sale_price_range[0] : product.sale_price; const salePrice = product.sale_price !== undefined && product.sale_price !== 0 ? salePriceFromRange : price; return salePrice; } function getProductHasStartingPrice(product) { const salePriceRange = product.sale_price_range; if (salePriceRange && salePriceRange.length > 0) { return !salePriceRange.every(price => price === salePriceRange[0]); } const priceRange = product.price_range; if (priceRange && priceRange.length > 0) { return !priceRange.every(price => price === priceRange[0]); } return false; } function getSizedImageUrl(src, size) { if (size === null) { return src; } if (!src) { return null; } if (size === 'master') { return removeProtocol(src); } const match = src.match(/\\.(jpg|jpeg|gif|png|webp|bmp|bitmap|tiff|tif)(\\?v=\\d+)?$/i); if (match !== null) { const prefix = src.split(match[0]); const suffix = match[0]; return removeProtocol(`${prefix[0]}${suffix}&width=${size}&quality=70`); } return null; } /** * Generates a Shopify srcset string with multiple widths and optional format * * @param {string} src - Original image URL * @param {number[]} widths - Array of widths to include in srcset * @param {string|null} format - Optional format ('webp', 'jpg', etc.) * @returns {string} - srcset string */ function generateSrcset(src, widths = [], format = null) { if (!src || !Array.isArray(widths) || widths.length === 0) return src || ''; const buildUrl = (width) => { let [baseUrl, queryString] = src.split('?'); const params = new URLSearchParams(queryString || ''); if (width) params.set('width', width); if (format) params.set('format', format); params.set('quality', '70'); const url = `${baseUrl}?${params.toString()}`; return removeProtocol(url); }; return widths.map((w) => `${buildUrl(w)} ${w}w`).join(', '); } function getVariantTitle(variant) { const option1 = variant.option1 ? (Array.isArray(variant.option1) ? variant.option1[0].toString() : variant.option1.toString()) : ''; const option2 = variant.option2 ? (Array.isArray(variant.option2) ? variant.option2[0].toString() : variant.option2.toString()) : ''; return option2 !== '' && option2 !== 'nl' && option2 !== 'fr' ? `${option1} / ${option2}` : option1; } function getVariantDisplayTitle(variant) { const option1 = variant.option1 ? (Array.isArray(variant.option1) ? variant.option1[0].toString() : variant.option1.toString()) : ''; const option2 = variant.option2 ? (Array.isArray(variant.option2) ? variant.option2[0].toString() : variant.option2.toString()) : ''; return option2 !== '' && option2 !== 'nl' && option2 !== 'fr' ? `${option1}x${option2}` : option1; } function getTodayInCEST() { const now = new Date(); const year = now.getUTCFullYear(); const month = String(now.getUTCMonth() + 1).padStart(2, '0'); const day = String(now.getUTCDate()).padStart(2, '0'); const hours = String(now.getUTCHours() + 2).padStart(2, '0'); const minutes = String(now.getUTCMinutes()).padStart(2, '0'); const seconds = String(now.getUTCSeconds()).padStart(2, '0'); const isoString = year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':' + seconds + '+02:00'; return new Date(isoString); } function parseDateStringInCEST(dateString, dateFormat, timing = 'start') { if (!dateString) return null; let dayPartIndex = 0; let monthPartIndex = 1; let yearPartIndex = 2; if (dateFormat === 'yyyy-mm-dd') { dayPartIndex = 2; monthPartIndex = 1; yearPartIndex = 0; } const parts = dateString.split(' '); const dateParts = parts[0].split('-'); if (dateParts.length !== 3) return null; const day = parseInt(dateParts[dayPartIndex], 10); const month = parseInt(dateParts[monthPartIndex], 10); const year = parseInt(dateParts[yearPartIndex], 10); let hours = 0; let minutes = 0; let seconds = 0; if (parts.length === 2 && parts[1]) { const timeParts = parts[1].split(':'); if (timeParts.length === 2) { hours = parseInt(timeParts[0], 10); minutes = parseInt(timeParts[1], 10); if (isNaN(hours) || isNaN(minutes)) { hours = 0; minutes = 0; } } } else { if (timing === 'end') { hours = 23; minutes = 59; seconds = 59; } } const isoString = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0') + 'T' + String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0') + '+01:00'; return new Date(isoString); } function getProductDiscountCampaign(product) { if (window.discountCollections && typeof window.getProductDiscountCampaignData === 'function') { const campaignData = window.getProductDiscountCampaignData( product.price, product.sale_price, product.discount_start_date, product.discount_end_date, product.discount_campaigns ); if (campaignData) { const firstDiscountCampaignLabel = campaignData.discountCampaignLabels && campaignData.discountCampaignLabels.length > 0 ? campaignData.discountCampaignLabels[0] : null; // Like snippets/product-preview-tags.liquid: no campaign text -> show "-X%" const discountPercentage = product.price ? Math.round((campaignData.discountAmount / product.price) * 100) : 0; const fallbackLabel = discountPercentage > 0 ? `-${discountPercentage}%` : ''; if (firstDiscountCampaignLabel) { return { isDiscounted: campaignData.isDiscounted, discountAmount: campaignData.discountAmount, discountLabel: firstDiscountCampaignLabel.discountLabel || fallbackLabel, promoColor: firstDiscountCampaignLabel.promoColor, promoTextColor: firstDiscountCampaignLabel.promoTextColor }; } return { isDiscounted: campaignData.isDiscounted, discountAmount: campaignData.discountAmount, discountLabel: fallbackLabel, promoColor: '', promoTextColor: '' }; } } const discountAmount = product.price && product.sale_price ? (product.price - product.sale_price) : 0; let isDiscounted = false; const discountPercentage = Math.round((discountAmount / product.price) * 100); const discountStartDate = parseDateStringInCEST(product.discount_start_date, 'yyyy-mm-dd'); const discountEndDate = parseDateStringInCEST(product.discount_end_date, 'yyyy-mm-dd', 'end'); const today = getTodayInCEST(); isDiscounted = discountStartDate && discountEndDate && today >= discountStartDate && today <= discountEndDate; let discountLabel = discountPercentage > 0 ? `-${discountPercentage}%` : ''; let schedule1PromoColor = null; let schedule1PromoTextColor = null; let schedule1StartDate = null; let schedule1EndDate = null; let schedule2PromoColor = null; let schedule2PromoTextColor = null; let schedule2StartDate = null; let schedule2EndDate = null; let collectionPromoColors = {}; let discountCampaigns = []; try { collectionPromoColors = parseJsonValue(product.collection_promo_colors, {}); discountCampaigns = parseJsonValue(product.discount_campaigns, []); } catch (error) { console.error('Error parsing promo colors or discount campaigns:', error); } if (collectionPromoColors && typeof collectionPromoColors === 'object' && discountCampaigns && discountCampaigns.length > 0) { for (const campaignName of discountCampaigns) { const campaignKey = campaignName.toLowerCase().replace(/ /g, '-'); const campaign = collectionPromoColors[campaignKey]; if (campaign) { discountLabel = campaign.promo_campaign_text; schedule1PromoColor = campaign.promo_color; schedule1PromoTextColor = campaign.promo_text_color; schedule1StartDate = parseDateStringInCEST(campaign.start_date_schedule_1); schedule1EndDate = parseDateStringInCEST(campaign.end_date_schedule_1); schedule2PromoColor = campaign.promo_color_schedule_2; schedule2PromoTextColor = campaign.promo_text_color_schedule_2; schedule2StartDate = parseDateStringInCEST(campaign.start_date_schedule_2); schedule2EndDate = parseDateStringInCEST(campaign.end_date_schedule_2); break; } } } let promoColor = schedule1PromoColor; let promoTextColor = schedule1PromoTextColor; if (schedule1StartDate && schedule1EndDate && today >= schedule1StartDate && today <= schedule1EndDate) { promoColor = schedule1PromoColor; promoTextColor = schedule1PromoTextColor; } else if (schedule2StartDate && schedule2EndDate && today >= schedule2StartDate && today <= schedule2EndDate) { promoColor = schedule2PromoColor; promoTextColor = schedule2PromoTextColor; } return { isDiscounted, discountAmount, discountLabel, promoColor, promoTextColor }; } function getActiveDiscountCampaigns(product) { if (!product || !product.discount_campaigns) return ''; try { const campaigns = parseJsonValue(product.discount_campaigns, []); if (Array.isArray(campaigns)) { return campaigns.filter(Boolean).join(','); } } catch (error) { console.error('Error parsing active discount campaigns:', error); } return ''; } function normalizeSize(value) { if (!value) return ''; const v = value.toString().trim().toUpperCase(); if (v === '1SIZE' || v === '1TAILLE' || v === 'UNIEK') { return window.bloomreach && window.bloomreach.oneSize ? window.bloomreach.oneSize : 'One size'; } return value; } // Loomi exposes the raw search doc as productCard.product. // Map the Loomi field names onto the ones the old Bloomreach Discovery template used // (id -> pid, link -> url, image -> thumb_image) so the markup below stays identical. const product = Object.assign({}, productCard.product || {}); product.id = product.id || product.pid || productCard.pid; product.link = productCard.productUrl || product.link || product.url; product.image = product.image || product.thumb_image || productCard.thumbImage; product.variants = Array.isArray(product.variants) ? product.variants : []; // Some Loomi docs have only thumb_image (no images): use it as a one-image slider. Otherwise the // old per-variant image fallback below renders an image for every size, stacked under each other. if ((!Array.isArray(product.images) || product.images.length === 0) && product.image) { product.images = [product.image]; } // Loomi: the campaign price is in final_sale_price (sale_price equals price); 0 means "not set" const finalSalePrice = Number(product.final_sale_price); if (finalSalePrice > 0 && finalSalePrice < Number(product.price)) { product.sale_price = finalSalePrice; product.sale_price_range = [finalSalePrice, finalSalePrice]; } const selectedColors = []; const placeholderImage = window.theme && window.theme.images ? window.theme.images.productPlaceholderPNG : ''; %> title="<%~ product.variant_name %>"<% } %>> <% const currentVariant = product.variants.length > 0 ? product.variants[0] : null; let currentVariantTitle = ''; if (currentVariant) { currentVariantTitle = getVariantTitle(currentVariant); } const matchingVariant = product.variants.length === 0 ? null : 'variant_index' in product ? product.variants[product.variant_index] : product.variants.find(variant => selectedColors.includes(variant.sku_color_group ? variant.sku_color_group.toLowerCase() : null)); const soldOut = product.stock_level == 0; const { isDiscounted, discountAmount, discountLabel, promoColor, promoTextColor } = getProductDiscountCampaign(product); const activeDiscountCampaigns = isDiscounted ? getActiveDiscountCampaigns(product) : ''; const discountedPrice = isDiscounted ? getSalePrice(product) : ''; %>

data-collection-id="<%= window.collection.id %>"<% } %> <% if (window.collection) { %>data-collection-name="<%= window.collection.title %>"<% } %> data-unit-price="<%= product.sale_price ? product.sale_price : product.price %>" data-compare-at-price="<%= product.price %>" data-discount-amount="<%= discountAmount %>" data-is-discounted="<%= isDiscounted %>" <% if (discountedPrice) { %>data-discounted-price="<%= discountedPrice %>"<% } %> <% if (activeDiscountCampaigns) { %>data-active-discount-campaigns="<%= activeDiscountCampaigns %>"<% } %> >

<% if (soldOut) { %> <%= window.bloomreach && window.bloomreach.soldOut ? window.bloomreach.soldOut : 'Sold out' %> <% } %> <% if (isDiscounted && discountLabel) { %> style="<%= promoColor ? `background-color: ${promoColor};` : '' %><%= promoTextColor ? ` color: ${promoTextColor};` : '' %>"<% } %>> <%~ discountLabel %> <% } %>

<% const fitProduct = product.fit ? product.fit.toString().trim() : ''; const newProduct = product.new; // One card template for both pages, as live: the search page shows "New" next to the // fit label (search-template-product-list.ejs), collections only without a fit label const isSearchPage = /\/search\/?$/.test(window.location.pathname); %> <% if ((fitProduct && fitProduct !== '') || newProduct === 'true') { %>

<% if (fitProduct && fitProduct !== '') { %> <%= fitProduct %> <% } %> <% if (newProduct === 'true' && (isSearchPage || !(fitProduct && fitProduct !== ''))) { %> <%= window.bloomreach && window.bloomreach.new ? window.bloomreach.new : 'New' %> <% } %>

<% } %> <% if (product.images && product.images.length > 0) { %>

<% product.images.forEach(function(image, index) { %>

<% if (index === 0) { %>

<%= product.title %> - Image <%= index + 1 %>

<% } else { %>

<% } %>

<% }); %>

<% if (product.images.length > 1) { %>

<% } %> <% } else if (product.variants.length > 1 && product.variants.some(variant => variant.image)) { %> <% product.variants.forEach(function(variant, index) { %> <% const isActiveVariant = !('variant_index' in product) && !selectedColors.length ? index === 0 : 'variant_index' in product ? product.variant_index === index : matchingVariant == variant %>

style="display: block"<% } %> >

<% }); %> <% } else { %>

<% } %>

<% // Loomi's own variants have no size (option1) until loomiResults.js enriches the card const availableVariants = product.variants.filter(variant => variant.option1 && variant.option1.length && (variant.sku_availability ? variant.sku_availability.includes('true') : true)); const availableVariantsCount = availableVariants.length; const variantLimit = availableVariantsCount > 6 ? 5 : 6; const showPlusButton = availableVariantsCount > 6; if (availableVariantsCount > 0) { %>

<%= variantTitle %>
+

<% } %>

<% const vendor = product.vendor ? product.vendor.toString() : ''; const brand = product.brand ? product.brand.toString() : ''; const brandText = vendor || brand || ''; const brandTextWithTrademark = brandText.replace(/®/g, '^®'); const brandTextWithDash = ` - ${brandText}`; const titleText = product.title ? product.title.replace(brandTextWithDash, '') : ''; const isGiftCard = product.link && product.link.includes('/products/dig-gif-zeb'); %>

<% if (isGiftCard) { %> <%= window.bloomreach && window.bloomreach.giftcard ? window.bloomreach.giftcard : '' %> <% } else { %> <%~ brandTextWithTrademark %> <% } %>

<% if (isGiftCard) { %>

<% const hasStartingPrice = getProductHasStartingPrice(product); const hasSingleProductSale = product.sale_price !== undefined && product.sale_price !== product.price && product.sale_price !== 0; %>

<% if (hasStartingPrice) { %> <%= window.bloomreach && window.bloomreach.from ? window.bloomreach.from : 'From' %> <% } %> <% if (hasSingleProductSale) { %> ~~<%= formatMoney(getPrice(product)) %>~~ <% } %> <%= formatMoney(getSalePrice(product)) %>

<% let productVariants = []; try { // Only resolved entries ({ url, color, image, available }) can render a swatch productVariants = (parseJsonValue(product.product_variants, []) || []).filter(variant => variant && typeof variant === 'object'); } catch (e) { console.error('Error parsing product_variants:', e); } %> <% if (product.type !== 'Giftcard' && product.type !== 'Gift card' && product.type !== 'Cadeaubon' && productVariants.length > 0) { %>

<% productVariants.forEach(function(variant) { if (!variant.available) return; const colorValue = variant.color || variant.fc_color; const isWhite = colorValue && (colorValue.toLowerCase() === 'white' || colorValue.toLowerCase() === '#ffffff'); %>

<% }); %>

<% } %>

Glitter voor heren

Producten

Klantenservice

Over ons