function groupVariantsByColor(products) { const colorGroupedProducts = []; products.forEach(product => { try { const colorOption = product.options?.find(opt => opt.name?.toLowerCase() === 'color'); // No "Color" option -> pass through unchanged. if (!colorOption) { colorGroupedProducts.push(product); return; } // Deep-clone the source once so per-color groups don't share array/object refs. const sourceProduct = JSON.parse(JSON.stringify(product)); const colorOptionKey = `option${colorOption.position ?? 1}`; const parentMediaIds = new Set((sourceProduct.media || []).map(m => String(m.id))); const variantsByColor = {}; (sourceProduct.variants || []).forEach(variant => { const colorValue = variant[colorOptionKey]; if (!colorValue) return; // Trim "Color / Size" -> "Size". Guard against undefined public_title. const publicTitle = variant.public_title || ''; variant.public_title = publicTitle.includes('/') ? publicTitle.split('/').slice(1).join('/').trim() || publicTitle : publicTitle; variant.option1Value = colorValue; const colorKey = String(colorValue).trim(); if (!variantsByColor[colorKey]) { const { variants, ...productAttrs } = sourceProduct; variantsByColor[colorKey] = { ...productAttrs, randomKey: `${sourceProduct.id}-${colorKey}`, filteredByOptions: { option1: true }, variants: [] }; } variantsByColor[colorKey].variants.push(variant); }); Object.entries(variantsByColor).forEach(([colorKey, colorGroupProduct]) => { try { // Defensive media injection: if the first variant's featured_media isn't in // the parent media list (e.g., stale variant-image link in Shopify admin), // build a synthetic media entry from variant.image so removeUnUsedVariantImages // doesn't wipe the thumbnail. const firstV = colorGroupProduct.variants[0]; const fmId = firstV?.featured_media?.id ? String(firstV.featured_media.id) : null; const needsSyntheticMedia = firstV?.image && (!fmId || !parentMediaIds.has(fmId)); if (needsSyntheticMedia) { const syntheticId = fmId || `synthetic-${firstV.id}`; const syntheticMedia = { id: syntheticId, gid: firstV.featured_media?.gid || `gid://shopify/ProductImage/${syntheticId}`, src: firstV.image, alt: colorKey, position: 1, computedPosition: 1 }; colorGroupProduct.media = [syntheticMedia, ...(colorGroupProduct.media || [])]; colorGroupProduct.images = [firstV.image, ...(colorGroupProduct.images || [])]; // Make sure variants reference the synthetic media id so the downstream // filter keeps it instead of stripping it. colorGroupProduct.variants.forEach(v => { v.featured_media = { ...(v.featured_media || {}), id: syntheticId, gid: syntheticMedia.gid, src: v.image || firstV.image }; }); } const updatedProduct = gbb.gbbAddProductsPage.f .updateProductDataWithFirstVariantData(colorGroupProduct); // Final safety net: even after all processing, if images ended up empty, // fall back to the variant image so the card thumbnail renders. if ((!updatedProduct.images || updatedProduct.images.length === 0) && firstV?.image) { updatedProduct.images = [firstV.image]; updatedProduct.featured_image = updatedProduct.featured_image || firstV.image; } updatedProduct.title = `${updatedProduct.title || ''} ${colorKey}`.trim(); colorGroupedProducts.push(updatedProduct); } catch (innerErr) { gbb.utility.debugError(`groupVariantsByColor: failed building color group "${colorKey}"`, innerErr); } }); } catch (outerErr) { gbb.utility.debugError('groupVariantsByColor: failed processing product', outerErr); // Fall back to passing the product through so we never drop it entirely. colorGroupedProducts.push(product); } }); return colorGroupedProducts; } /** * Fetches the next batch of products, processes them, and updates the application state. * This function is designed to be asynchronous to handle API calls gracefully. * * @param {any} noteAttribute - An attribute for the note, its specific use should be documented. * @param {Array

GIFTS 500+

Shop the look

Choose Options

Edit Option