gbb.f.renderProductsHTML = function (products, noteAttribute, category) { category = category ?? gbb.gbbMultipleCategoriesPage?.state?.currentCategory?.categoryId; products = JSON.parse(JSON.stringify(products)); const renderChooseVariantDropdown = gbb.gbbAddProductsPage.state.renderChooseVariantDropdown; let updateProductPriceBasedOnActiveDiscount = gbb.settings?.app?.updateProductPriceBasedOnActiveDiscount ?? false; let isPurchaseTypeSubscription = gbb.gbbSubscriptionProductsPage.f.checkIfPurchaseTypeIsSubscription(); // subscription bundle template if ( gbb.gbbSubscriptionWidget.state.isEnabled && gbb.gbbBrowser.getSubscriptionType() == 'saveSubscription' ) { isPurchaseTypeSubscription = true; } const gbbProductsLabel = gbb.$('

').addClass('gbbProductsLabel'); let gbbProductsItemsContainer = gbb .$('

') .addClass('gbbProductsItemsContainer'); const gbbProductsItemsArray = []; let addProductsPageArr = ADDPRODUCT_PAGES_LIST; if (addProductsPageArr.includes(noteAttribute)) { gbbProductsLabel.text( gbb.utility.renderLanguageValue( gbb.settings.languageData.productPage.selectProductsLabel ) ); } else if (noteAttribute == 'reviewPage') { gbbProductsLabel.text( gbb.utility.renderLanguageValue( gbb.settings.languageData.reviewPage.addOnsLabel ) ); } if (!products || products.length == 0) { if (noteAttribute == 'reviewPage') { //no need to show no products label when on review page return; } } else { products = products?.filter((product) => product.available); products.forEach((product, index) => { if (!product) return; let currentProductPersonalization = gbb.utility.getCurrentProductPersonalization(product); let variantDropdownHTML = renderChooseVariantDropdown && gbb.gbbAddProductsPage.f.prepareCustomVariantSelectionDropdown(product); // prepare custom dropdown for variant selection let activeVariantId = variantDropdownHTML && variantDropdownHTML ?.find('.gbbSelectedVariant') .attr('data-variant-id'); // get the active variant id let activeVariantIndex = !activeVariantId ? 0 : product?.variants?.findIndex( (variant) => variant.id == activeVariantId ); // maintain index so that its easy to render prices and ATC functions let selectedVariant = product.variants[activeVariantIndex]; let doesThisProductHavePersonalization = currentProductPersonalization.isProductPersonalizationEnabled || false; if (doesThisProductHavePersonalization) { product.renderChooseOptionsButton_forcefully = true; } const gbbProductItem = gbb.$('

').addClass('gbbProductItem').clone(); gbbProductItem.css( 'background', gbb.settings.pageCustomizationData.productCard.productCardBgColor ); gbbProductItem.css( 'color', gbb.settings.pageCustomizationData.productCard.productCardTextColor ); const gbbProductTextContainer = gbb .$('

') .addClass('gbbProductTextContainer'); const gbbProductDynamicContentContainer = gbb .$('

') .addClass('gbbProductDynamicContentContainer'); const metafieldContent = gbb.gbbAddProductsPage.f.renderProductDynamicContent( product, 'PRODUCT_CARD', selectedVariant ); if (true || metafieldContent[0]?.children?.length) { gbbProductDynamicContentContainer.html(metafieldContent); } const gbbProductItemTitle = gbb .$('

') .addClass('gbbProductItemTitle') .css('cursor', 'pointer'); const gbbProductActionContainer = gbb .$('

') .addClass('gbbProductActionContainer'); const gbbProductItemPricesContainer = gbb .$('

') .addClass('gbbProductItemPricesContainer'); const gbbProductItemPrice = gbb .$('

') .addClass('gbbProductItemPrice'); const gbbProductItemCompareAtPrice = gbb .$('

') .addClass('gbbProductItemCompareAtPrice'); const gbbProductButtonWrapper = gbb .$('

') .addClass('gbbProductButtonWrapper'); const gbbProductButton = gbb.$('

').addClass('gbbProductAddButton'); const gbbProductImageContainer = gbb .$('

') .addClass('gbbProductImageContainer'); const gbbProductItemOverLay = gbb .$('

') .addClass('gbbProductItemOverLay'); const gbbOverLayIconContainer = gbb .$('

') .addClass('gbbOverLayIconContainer'); gbbProductItem.attr('productId', product?.id); let firstvariantid = product.variants.length > 0 ? product?.variants[0]?.id : ''; gbbProductItem.attr('firstvariantid', firstvariantid); if (product.customProductAttribute) { gbbProductItem.attr( 'custom-product-attribute', product.customProductAttribute ); } for (let i = 0; i < product.images.length; i++) { let image = product.images[i]; if (!image) continue; const imageEle = gbb .$('', { class: `gbbProductImageContainerImg${i} gbbProductImageContainerImg gbbFade`, }) .attr('src', image); imageEle.on('click', (event) => { event.preventDefault(); event.stopPropagation(); gbb.f.showProductVariantsModal( product, gbbProductButton, noteAttribute, category ); }); gbbProductImageContainer.append(imageEle); break; } if (product.images.length > 1) { const gbbPrevImage = gbb .$('', { class: 'gbbPrevImage' }) .html('❮') .css('display', 'none'); const gbbNextImage = gbb .$('', { class: 'gbbNextImage' }) .html('❯') .css('display', 'none'); gbbPrevImage.on('click', () => gbb.utility.slider.plusSlides(gbbProductImageContainer, 1) ); gbbNextImage.on('click', () => gbb.utility.slider.minusSlides(gbbProductImageContainer, 1) ); gbbProductImageContainer.append(gbbPrevImage, gbbNextImage); } gbbProductImageContainer.append( gbb.f.renderTagsPillsHTML(product, noteAttribute, category) ); gbbProductItem.append(gbbProductImageContainer); gbbProductItemTitle.on('click', () => gbb.f.showProductVariantsModal( product, gbbProductButton, noteAttribute, category ) ); gbbProductItemOverLay.on('click', () => gbb.f.showProductVariantsModal( product, gbbProductButton, noteAttribute, category ) ); let _productPrice = product.variants[activeVariantIndex]?.price || product.price; let _compareAtPrice = product.variants[activeVariantIndex]?.compare_at_price || product.compare_at_price; let isAddonProduct = product.customProductAttribute?.includes('addonProduct'); if (isPurchaseTypeSubscription && !isAddonProduct) { let subscriptionPrice = gbb.gbbSubscriptionProductsPage.f.getSubscriptionPriceByVariantId( product.variants[activeVariantIndex].id ); if (_productPrice > subscriptionPrice) { _compareAtPrice = _productPrice; } _productPrice = subscriptionPrice; } if (updateProductPriceBasedOnActiveDiscount && !isAddonProduct) { _productPrice = gbb.gbbAddProductsPage.f.getVariantPriceBasedOnActiveDiscount( product.variants[activeVariantIndex].id ); } if ( gbb.settings?.merchantInfo?.bundleSettings?.showCompareAtPrice == true && _compareAtPrice && _compareAtPrice > _productPrice ) { gbbProductItemCompareAtPrice.text( gbb.utility.formatPrice(_compareAtPrice) ); } gbbProductItemPrice.text(gbb.utility.formatPrice(_productPrice)); gbbProductItemPricesContainer.append(gbbProductItemCompareAtPrice); gbbProductItemPricesContainer.append(gbbProductItemPrice); // --- *** LOGIC CORRECTION STARTS HERE *** --- // **STEP 1:** Add the placeholder button to its wrapper first. gbbProductButtonWrapper.append(gbbProductButton); const isSingleVariant = product.variants?.length == 1 && product.renderChooseOptionsButton_forcefully != true; const isMultiVariant = product.renderChooseOptionsButton_forcefully == true || (product.variants?.length > 1 && product.available == true); // **STEP 2:** Now call the function to replace the button that is already in place. if (isSingleVariant || renderChooseVariantDropdown) { let variantData = product.variants[activeVariantIndex] || product.variants[0]; const typeOfProduct = 'singleVariant'; const activeVariantImage = variantData.image; let price = variantData.price; let compareAtPrice = variantData?.compare_at_price || null; compareAtPrice = compareAtPrice > price ? compareAtPrice : null; const data = { productData: product, variant: variantData, }; if (renderChooseVariantDropdown && activeVariantImage) { gbbProductImageContainer .find('.gbbProductImageContainerImg') .eq(0) .attr('src', activeVariantImage); } if (isPurchaseTypeSubscription && !isAddonProduct) { price = gbb.gbbSubscriptionProductsPage.f.getSubscriptionPriceByVariantId( variantData.id ); if (variantData.price > price) { compareAtPrice = variantData.price; } } if (updateProductPriceBasedOnActiveDiscount && !isAddonProduct) { price = gbb.gbbAddProductsPage.f.getVariantPriceBasedOnActiveDiscount( variantData.id ); } if ( gbb?.settings?.merchantInfo?.bundleSettings?.showCompareAtPrice && compareAtPrice && compareAtPrice > price ) { gbbProductItemCompareAtPrice.text( gbb.utility.formatPrice(compareAtPrice) ); } else if (!compareAtPrice || compareAtPrice <= price) { gbbProductItemCompareAtPrice.text(''); } gbbProductItemPrice.text(gbb.utility.formatPrice(price)); gbb.utility.activateQuantityButtons( gbbProductButton, data, noteAttribute, typeOfProduct, category ); } else if (isMultiVariant) { const typeOfProduct = 'multipleVariants'; let variantProduct = gbb.utility.getTheVariantProductPresentInCart(product); if (variantProduct && Object.keys(variantProduct).length > 0) { let data = { productData: product, variant: variantProduct, }; let variantPrice = variantProduct.price; let compareAtPrice = variantProduct.compare_at_price; if (isPurchaseTypeSubscription && !isAddonProduct) { variantPrice = gbb.gbbSubscriptionProductsPage.f.getSubscriptionPriceByVariantId( variantProduct.id ); } if (updateProductPriceBasedOnActiveDiscount && !isAddonProduct) { variantPrice = gbb.gbbAddProductsPage.f.getVariantPriceBasedOnActiveDiscount( variantProduct.id ); } gbb.utility.activateQuantityButtons( gbbProductButton, data, noteAttribute, typeOfProduct, category ); gbbProductItemPrice.text(gbb.utility.formatPrice(variantPrice)); if ( gbb.settings?.merchantInfo?.bundleSettings?.showCompareAtPrice && compareAtPrice && compareAtPrice > variantPrice ) { gbbProductItemCompareAtPrice.text( gbb.utility.formatPrice(compareAtPrice) ); } else if (!compareAtPrice || compareAtPrice <= variantPrice) { gbbProductItemCompareAtPrice.text(''); } } else { let data = { productData: product, variant: product.variants[0], }; gbb.utility.activateQuantityButtons( gbbProductButton, data, noteAttribute, typeOfProduct, category ); } } let gbbProductTitleOnly = gbb .$('

') .addClass('gbbProductTitleOnly') .html(product.title); if (renderChooseVariantDropdown && product?.default_options?.length > 0) { let optionContent = ``; product?.default_options?.forEach((option) => { optionContent += ` | ${option.value}`; }); gbbProductTitleOnly.html( product.title + `${optionContent}` ); } let gbbVariantTitle = gbb .$('

') .addClass('gbbVariantTitle') .text(product?.variantName); let divsForTitle = []; divsForTitle.push(gbbProductTitleOnly); divsForTitle.push(gbbVariantTitle); gbbProductItemOverLay.append(gbbOverLayIconContainer); gbbProductItemTitle.html(divsForTitle); gbbProductTextContainer.append(gbbProductItemTitle); gbbProductActionContainer.append(gbbProductItemPricesContainer); gbbProductActionContainer.append(gbbProductButtonWrapper); gbbProductImageContainer.append(gbbProductItemOverLay); gbbProductItem.append(gbbProductTextContainer); if (gbb.settings?.app?.integrations?.judgeme?.isEnabled) { let starsHTML = gbb.gbbIntegrations?.judgeme?.f?.getStarsHTMLByProductId(product.id); if (starsHTML) { let reviewStarsContainer = gbb .$('

') .addClass('gbbReviewStarsContainer'); let reviewStars = gbb.$('

').addClass('gbbReviewStars'); reviewStars.html(starsHTML); reviewStarsContainer.append(reviewStars); let appendTo = gbb.$('.gbbProductsCardLayoutV2').length > 0 ? gbbProductItem : gbbProductTextContainer; appendTo.append(reviewStarsContainer); } } if ( gbb.settings.bundleSettings?.metafieldNameSpaceAndKeys.length > 0 || gbb.settings.app?.dynamicScriptForHTMLContent ) { gbbProductItem.append(gbbProductDynamicContentContainer); } if (renderChooseVariantDropdown && variantDropdownHTML) { gbbProductItem.append(variantDropdownHTML); } gbbProductItem.append(gbbProductActionContainer); if ( isPurchaseTypeSubscription && gbb.gbbSubscriptionProductsPage.state.showDiscountOnProductCards ) { const discountRibbon = gbb.gbbSubscriptionProductsPage.f.prepareSubscriptionProductDiscountRibbonUI( product.variants[0] ); if (discountRibbon) { gbbProductItem.append(discountRibbon); } } if ( gbb.state.currentPageId == 'personalizationPage' && gbb.gbbAddonProducts.state.isEnabled ) { let { type, value, discountText: addonsDiscountRibbonContent, } = gbb.gbbAddonProducts.f.prepareDiscountRibbonContentForProductAddons(); if (addonsDiscountRibbonContent) { let isFreeProduct = value == 100; if (isFreeProduct) { gbbProductItem.attr('free-addon-product', true); } let ribbonUIOptions = { ribbonContent: addonsDiscountRibbonContent, ribbonClassName: 'gbbAddonDiscountRibbon', }; let addonDiscountsRibbonHTML = gbb.utility.prepareProductCardRibbonUI(ribbonUIOptions); gbbProductItem.append(addonDiscountsRibbonHTML); } } gbbProductsItemsContainer.append(gbbProductItem); gbbProductsItemsArray.push(gbbProductItem); }); let totalNumberOfItemsInArray = gbbProductsItemsArray.length; let loadMoreIndicatorItem; if (totalNumberOfItemsInArray > 0) { let indexToAttachLoadMoreIndicator = Math.floor( totalNumberOfItemsInArray * 0.7 ); loadMoreIndicatorItem = gbbProductsItemsArray[indexToAttachLoadMoreIndicator]; loadMoreIndicatorItem.attr('data-load-more-indicator-status', 'active'); } return gbbProductsItemsArray; } }; gbb.utility.activateQuantityButtons = async function ( buttonEle, data, noteAttribute, typeOfProduct, category ) { // --- FINAL FIX START --- // Find the parent wrapper and remove any existing quantity selector. // This prevents stacking/duplication when the button is updated after a modal action. const buttonWrapper = gbb.$(buttonEle).closest('.gbbProductButtonWrapper'); if (buttonWrapper.length) { buttonWrapper.find('.gbbProductQuantityHTML').remove(); } // --- FINAL FIX END --- const isMinimilisticLayout = gbb.$('.gbbMinimilisticLayout').length > 0; // in future for new template just update the condition so that we add svg in buttons instead of +, - let allowQuantityInput = gbb.settings?.bundleSettings?.allowQuantityInput || false; let incrementProductQtyBy = gbb.gbbAddProductsPage.state.incrementProductQtyBy || 1; let decrementProductQtyBy = gbb.gbbAddProductsPage.state.decrementProductQtyBy || 1; let gbbProductQuantityHTML = gbb .$('

') .addClass('gbbProductQuantityHTML'); if (gbb.$('.gbbProductsCardLayoutV2').length > 0) { gbbProductQuantityHTML.css( 'background', gbb.settings.pageCustomizationData?.productCard ?.productCardQuantitySelectorBgColor ); } let productCardPageCustomization = gbb.settings.pageCustomizationData?.productCard; let buttonTextColor = productCardPageCustomization.productCardQuantitySelectorButtonTextColor || productCardPageCustomization.productCardButtonTextColor || gbb.settings.pageCustomizationData?.quickSettings?.colors?.buttonTextColor; let gbbProductQuantityAddButton = gbb .$('

') .addClass('gbbProductQuantityAddButton') .css( 'background', gbb.settings.pageCustomizationData?.productCard?.productCardButtonColor || gbb.settings.pageCustomizationData?.quickSettings?.colors?.buttonBgColor ) .css( 'color', productCardPageCustomization.productCardButtonTextColor || gbb.settings.pageCustomizationData?.quickSettings?.colors ?.buttonTextColor ); let gbbProductQuantityRemoveButton = gbb .$('

') .addClass('gbbProductQuantityRemoveButton') .css( 'background', gbb.settings.pageCustomizationData?.productCard?.productCardButtonColor || gbb.settings.pageCustomizationData?.quickSettings?.colors?.buttonBgColor ) .css( 'color', productCardPageCustomization.productCardButtonTextColor || gbb.settings.pageCustomizationData?.quickSettings?.colors ?.buttonTextColor ); if (isMinimilisticLayout) { gbbProductQuantityHTML.css( 'background', gbb.settings.pageCustomizationData?.productCard?.productCardButtonColor || gbb.settings.pageCustomizationData?.quickSettings?.colors?.buttonBgColor ); gbbProductQuantityHTML.css( 'color', productCardPageCustomization.productCardButtonTextColor || gbb.settings.pageCustomizationData?.quickSettings?.colors ?.buttonTextColor ); } let gbbProductQuantityLabel = gbb .$('

') .addClass('gbbProductQuantityLabel'); let gbbProductQuantityInput = gbb .$('') .addClass('gbbProductQuantityInput') .attr('type', 'number') .attr('min', 0); const uniqueItemKey = gbb.utility.getUniqueIdForVariant({ variantId: data.variant?.id, productData: data.productData, }); const isItemInCart = gbb.utility.checkIfItemPresentInGiftBoxCart( data.variant?.id, { uniqueItemKey } ); let currentQuantity = 0; // Default to 0 if (isItemInCart) { currentQuantity = await gbb.utility.getProductQuantityFromCart(data); } let quanitiyAddBtn = '+'; let quanitiySubtractBtn = '-'; if (isMinimilisticLayout) { quanitiyAddBtn = PLUS_SVG; quanitiySubtractBtn = MINUS_SVG; } gbbProductQuantityAddButton.append( gbb .$('

') .addClass('gbbProductQuantityAddButtonWrapper') .html(quanitiyAddBtn) ); gbbProductQuantityRemoveButton.append( gbb .$('

Contact Us

Contact form