function groupVariantsByColor (products) { const colorGroupedProducts = []; products.forEach(product => { // Find the product option that defines color. Case-insensitive search. const colorOption = product.options.find(opt => opt.name.toLowerCase() === 'color'); // If there's no "Color" option on this product, we can't group by color. // So, we just add the product as-is and move to the next one. if (!colorOption) { colorGroupedProducts.push(product); return; } // Determine which variant option field corresponds to color (e.g., 'option1', 'option2'). const colorOptionKey = `option${colorOption.position || 1}`; // This object will hold the newly created color-specific products. // e.g., { 'Red': { product data for Red, variants: [...] }, 'Blue': { ... } } const variantsByColor = {}; // Iterate through each variant of the original product. product.variants.forEach(variant => { const colorValue = variant[colorOptionKey]; // Skip if for some reason a variant doesn't have a value for the color option. if (!colorValue) return; variant.public_title = variant.public_title.split("/")[1] || variant.public_title; // If we haven't seen this color before, create a new parent product for it. if (!variantsByColor[colorValue]) { const { variants, ...productAttrs } = product; // Get product attributes, excluding the original full variant list. variantsByColor[colorValue] = { ...productAttrs, randomKey : Math.random() * 1000000, // This new product group will have its own list of variants (all of the same color). variants: [] }; } product.filteredByOptions = {option1: true}; // product.option1Value = variant.option1Value = colorValue || ""; // Add the current variant to its corresponding color group. variantsByColor[colorValue].variants.push(variant); }); // Now that all variants are grouped by color, process each group. Object.entries(variantsByColor).forEach(([colorKey, colorGroupProduct]) => { // This helper function likely sets the main product image, price, etc., // based on the first variant in the list. This is crucial for UI display. const updatedProduct = gbb.gbbAddProductsPage.f.updateProductDataWithFirstVariantData(colorGroupProduct); console.log("updatedProduct.title", updatedProduct.title, colorGroupProduct, "colorKey:", colorKey); debugger; // updatedProduct.title = updatedProduct?.title + " " + (colorGroupProduct?.option1Value || ""); console.log("updatedProduct.title is ", updatedProduct?.title + " " + (colorGroupProduct?.option1Value || ""), "colorKey:", colorKey); updatedProduct.title = updatedProduct?.title + " " + colorKey; // You can now use colorKey here as needed colorGroupedProducts.push(updatedProduct); }); }); 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

Behind the Threads

Shop the look

Choose Options

Edit Option