// ============================================================================ // CAPTURE CANONICAL HANDLERS — must run BEFORE any of our overrides below. // These are the real implementations from the app bundle. The page-aware // wrappers delegate to them on every step that doesn't use our color-grouped // product flow (addons / personalizationPage, review, etc.), so the entire // custom script effectively "doesn't run" outside the product-add steps. // ============================================================================ const _canonical = { handleVariantSelection: gbb.gbbAddProductsPage.f.handleVariantSelectionForDrawerAndDropdown || function () {}, updateProductCard: gbb.gbbAddProductsPage.f.updateProductCard || function () {}, getProductDetailsFromState: gbb.utility.getProductDetailsFromState || function () {}, prepareCustomVariantSelectionDropdown: gbb.gbbAddProductsPage.f.prepareCustomVariantSelectionDropdown || function () {}, toggleVariantDropdownAndDrawer: gbb.gbbAddProductsPage.f.toggleVariantDropdownAndDrawer || function () {}, fetchNextProductsBatch: gbb.gbbAddProductsPage.fetchNextProductsBatch || async function () {}, initialFetch: gbb.gbbAddProductsPage.initialFetch || async function () {}, }; function _isCustomProductAddStep() { const id = gbb.state?.currentPageId || ''; return /^addProductsPage/i.test(id); } // Wrap an override so it runs ONLY on product-add steps. On every other step // (addons / personalizationPage, review, etc.) it transparently delegates to // the canonical app implementation captured above. The page-gate is enforced // at call time, so it correctly follows the user as they navigate between // steps within a single page load. function gateOverride(canonicalFn, customFn) { return function () { if (!_isCustomProductAddStep()) { return canonicalFn.apply(this, arguments); } return customFn.apply(this, arguments); }; } // ============================================================================ // Helpers used by the gated overrides below. Not gated themselves — they're // only ever reached from gated entrypoints. // ============================================================================ 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; // 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 }; 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 ); console.log( 'updatedProduct.title is ', updatedProduct?.title + ' ' + (colorGroupProduct?.option1Value || ''), 'colorKey:', colorKey ); updatedProduct.title = updatedProduct?.title + ' ' + colorKey; colorGroupedProducts.push(updatedProduct); }); }); return colorGroupedProducts; } // ============================================================================ // Gated overrides — exactly ONE definition of each function. Every override // is wrapped with `gateOverride`, so on the addons step (or any non-product- // add step) the canonical app implementation runs and our custom code is // effectively bypassed. // ============================================================================ /** * Fetches the next batch of products, processes them, and updates the application state. * * @param {any} noteAttribute - An attribute for the note, its specific use should be documented. * @param {Array

Thank you for sharing!