gbb.gbbAddProductsPage.f.renderCartIconWithQuantityHTML = function () { try { const isDrawerOpen = gbb.gbbAddProductsPage.state.showBoxProductsInFooter; let _boxData = gbb.gbbBrowser.getRelevantBoxDataFromSessionStorage(); let cartIconWithQuantity = gbb .$('

') .addClass('gbbCartIconWithQuantityContainer'); let cartIconWithQuantityText = gbb .$('

') .addClass('gbbCartIconWithQuantityText'); let cartQuantity = gbb.$('

').addClass('gbbCartQuantity'); let cartQuantityValue = _boxData?.item_count - 1 || 0; cartIconWithQuantity.css( 'background', gbb.settings?.pageCustomizationData?.cartFooter ?.cartFooterNextButtonColor || '#000000' ); cartIconWithQuantity.css( 'color', gbb.settings?.pageCustomizationData?.cartFooter ?.cartFooterNextButtonTextColor || '#ffffff' ); // cartIconWithQuantity.click(gbb.gbbAddProductsPage.f.toggleBoxProductsDisplayFooter) cartQuantity.text(cartQuantityValue); cartIconWithQuantityText.append(cartQuantity); const SVG_TO_APPEND = window.innerWidth > 600 ? CART_SVG : CARET_UP_SVG; cartIconWithQuantity.append(SVG_TO_APPEND); if (isDrawerOpen) { cartIconWithQuantity.find('svg').css('transform', 'rotate(180deg)'); } cartIconWithQuantity.append(cartIconWithQuantityText); // cartIconWithQuantity.append(CART_SVG) return cartIconWithQuantity; } catch (error) { gbb.utility.debugError('error in renderCartIconWithQuantityHTML', error); } }; gbb.f.renderProductSlotsFooterHTML = function ( noteAttribute, includeDefaultProductsInSlotCount = true ) { try { let gbbSlotFooterProductsContainerWrapper = gbb .$('

') .addClass('gbbSlotFooterProductsContainerWrapper'); let gbbSlotFooterProductsContainer = gbb .$('

') .addClass('gbbSlotFooterProductsContainer'); let totalNoOfSlotsRequired = gbb.gbbAddProductsPage?.state?.totalProductSlotsRequired || 0; let boxData = gbb.gbbBrowser.getRelevantBoxDataFromSessionStorage(); let totalDefaultProductsInCart = boxData?.items?.filter( (item) => item.properties._boxProduct == 'defaultProduct' ).length || 0; if (includeDefaultProductsInSlotCount) { totalNoOfSlotsRequired = totalNoOfSlotsRequired + totalDefaultProductsInCart; } let boxProducts = boxData?.items || []; boxProducts.forEach((product) => { let gbbSlotFooterProductContainer = gbb .$('

') .addClass('gbbSlotFooterProductContainer'); gbbSlotFooterProductContainer.attr('productId', product?.product_id); gbbSlotFooterProductContainer.attr('variantId', product?.variant_id); gbbSlotFooterProductContainer.attr( '_boxProduct', product?.properties['_boxProduct'] ); gbbSlotFooterProductContainer.attr( '_Category', product?.properties['_Category'] ); let argsObj = { variantId: product.variant_id, productData: product, }; let uniqueGbbItemKey = gbb.utility.getUniqueIdForVariant(argsObj); gbbSlotFooterProductContainer.attr('_uniqueGbbItemKey', uniqueGbbItemKey); const gbbSlotFooterProductImageContainer = gbb .$('

') .addClass('gbbSlotFooterProductImageContainer'); const gbbSlotFooterProductImage = gbb .$('') .addClass('gbbSlotFooterProductImage'); gbbSlotFooterProductImage.attr('src', product.image); //a button to remove the product from the cart const gbbSlotFooterProductRemoveButton = gbb .$('

') .addClass('gbbSlotFooterProductRemoveButton'); // x icon for the remove button const gbbSlotFooterProductRemoveButtonIcon = gbb .$('

') .addClass('gbbSlotFooterProductRemoveButtonIcon'); const gbbSlotFooterProductQuantity = gbb .$('

') .addClass('gbbSlotFooterProductQuantity'); gbbSlotFooterProductQuantity.text('x' + product.quantity); gbbSlotFooterProductRemoveButtonIcon.append(CONSTANT_CLOSE_ICON_SVG); gbbSlotFooterProductRemoveButton.append( gbbSlotFooterProductRemoveButtonIcon ); gbbSlotFooterProductRemoveButton.on('click', async () => { // await gbb.f.removeProductFromCart({id: product.variant_id}); let variant = { id: product.variant_id, _boxProduct: product?.properties['_boxProduct'], _Category: product?.properties['_Category'], _uniqueGbbItemKey: uniqueGbbItemKey, // _uniqueGbbItemKey : gbbSlotFooterProductContainer.attr("_uniqueGbbItemKey") }; if ( gbb.settings.giftMessage.messageProduct && gbb.settings.giftMessage.messageProduct.product && gbb.settings.giftMessage.messageProduct.product.variants ) { const variantIdForMessage = gbb.settings.giftMessage.messageProduct.product.variants[0].id; if (variantIdForMessage == product.variant_id) { gbb.gbbPersonalizePage.state.customerUploadsResponse = {}; } } await gbb.utility.removeFromCart({ variant: variant }); gbb.gbbAddProductsPage.f.updateProductCard( product.product_id, variant.id ); gbb.$('.gbbPageFooterHTML').replaceWith( gbb.f.renderCartProductsFooterHTML(noteAttribute, { flow: 'updateFooterWithoutAppending', }) ); gbb.gbbBrowser.emitCustomEvent({ eventName: 'gbb-footer-rendered' }); }); gbbSlotFooterProductImageContainer.append(gbbSlotFooterProductImage); let pageIdTheProductWasAddedFrom = product?.properties['_boxProduct']; if ( gbb.utility.checkIfRemoveButtonShouldBeAppended( product?.variant_id, pageIdTheProductWasAddedFrom ) ) { gbbSlotFooterProductContainer.append(gbbSlotFooterProductRemoveButton); } gbbSlotFooterProductContainer.append(gbbSlotFooterProductImageContainer); if (product.quantity > 1) { gbbSlotFooterProductContainer.append(gbbSlotFooterProductQuantity); } gbbSlotFooterProductsContainer.append(gbbSlotFooterProductContainer); }); let customPlaceholderForSlots = gbb.settings.stepsConfigurationData?.customPlaceholderForSlots || gbb.settings.merchantInfo.customSettings?.customPlaceholderForSlots; let renderPlusForSlots = new Date(gbb.settings.merchantInfo.createdAt) >= new Date('2025-09-22'); // render empty slots let totalItemCount = boxData?.item_count || 0; for ( let startIdx = totalItemCount - 1; startIdx < totalNoOfSlotsRequired - 1; startIdx++ ) { let slotsPlaceHolder = renderPlusForSlots ? PLUS_SVG : `${startIdx + 1}`; if (customPlaceholderForSlots) { slotsPlaceHolder = customPlaceholderForSlots; } let gbbSlotFooterProductContainer = gbb .$('

', { class: 'gbbSlotFooterProductContainer gbbSlotFooterProductContainerEmpty', }) .html(slotsPlaceHolder); gbbSlotFooterProductsContainer.append(gbbSlotFooterProductContainer); } gbbSlotFooterProductsContainerWrapper.append( gbbSlotFooterProductsContainer ); return gbbSlotFooterProductsContainerWrapper; } catch (error) { gbb.utility.debugError('error in renderProductSlotsFooterHTML:', error); } };

Build Your Snack Box

Founders Interview | Hamish McCall & Katja Thrane @ POP