https://shop.newbelgium.com/cdn/shop/t/4/assets/sticky-add-to-cart.js?v=48956925339276737091774386995

1import{Component}from"@theme/component";import{ThemeEvents}from"@theme/events";import{morph}from"@theme/morph";import{onAnimationEnd}from"@theme/utilities";class StickyAddToCartComponent extends Component{requiredRefs=["stickyBar","addToCartButton","quantityDisplay","quantityNumber"];#buyButtonsIntersectionObserver=null;#mainBottomObserver=null;#resetTimeout;#isStuck=!1;#animationTimeout=null;#abortController=new AbortController;#targetAddToCartButton=null;#currentQuantity=1;#hiddenByBottom=!1;connectedCallback(){super.connectedCallback(),this.#setupIntersectionObserver();const{signal}=this.#abortController,target=this.closest(".shopify-section");target?.addEventListener(ThemeEvents.variantUpdate,this.#handleVariantUpdate,{signal}),target?.addEventListener(ThemeEvents.variantSelected,this.#handleVariantSelected,{signal}),document.addEventListener(ThemeEvents.cartUpdate,this.#handleCartAddComplete,{signal}),document.addEventListener(ThemeEvents.cartError,this.#handleCartAddComplete,{signal}),document.addEventListener(ThemeEvents.quantitySelectorUpdate,this.#handleQuantityUpdate,{signal}),this.#getInitialQuantity()}disconnectedCallback(){super.disconnectedCallback(),this.#buyButtonsIntersectionObserver?.disconnect(),this.#mainBottomObserver?.disconnect(),this.#abortController.abort(),this.#animationTimeout&&clearTimeout(this.#animationTimeout)}#setupIntersectionObserver(){const productForm=this.#getProductForm();if(!productForm)return;const buyButtonsBlock=productForm.closest(".buy-buttons-block");if(!buyButtonsBlock)return;const footer=document.querySelector("footer")??document.querySelector('[class*="footer-group"]');footer&&(this.#buyButtonsIntersectionObserver=new IntersectionObserver(entries=>{const[entry]=entries;

1if(entry)if(!entry.isIntersecting&&!this.#isStuck){const rect=entry.target.getBoundingClientRect();(rect.bottom<0||rect.top<0)&&this.#showStickyBar()}else entry.isIntersecting&&this.#isStuck&&(this.#hiddenByBottom=!1,this.#hideStickyBar())}),this.#mainBottomObserver=new IntersectionObserver(entries=>{const[entry]=entries;if(entry){if(entry.isIntersecting&&this.#isStuck)this.#hiddenByBottom=!0,this.#hideStickyBar();else if(!entry.isIntersecting&&this.#hiddenByBottom){const rect=buyButtonsBlock.getBoundingClientRect();(rect.bottom<0||rect.top<0)&&(this.#hiddenByBottom=!1,this.#showStickyBar())}}},{rootMargin:"200px 0px 0px 0px"}),this.#buyButtonsIntersectionObserver.observe(buyButtonsBlock),this.#mainBottomObserver.observe(footer),this.#targetAddToCartButton=productForm.querySelector('[ref="addToCartButton"]'))}handleAddToCartClick=async()=>{if(!this.#targetAddToCartButton)return;this.#targetAddToCartButton.dataset.puppet="true",this.#targetAddToCartButton.click();const cartIcon=document.querySelector(".header-actions__cart-icon");if(this.refs.addToCartButton.dataset.added!=="true"&&(this.refs.addToCartButton.dataset.added="true"),!cartIcon||!this.refs.addToCartButton||!this.refs.productImage)return;this.#resetTimeout&&clearTimeout(this.#resetTimeout);const flyToCartElement=document.createElement("fly-to-cart"),sourceStyles=getComputedStyle(this.refs.productImage);flyToCartElement.classList.add("fly-to-cart--sticky"),flyToCartElement.style.setProperty("background-image",`url(${this.refs.productImage.src})`),flyToCartElement.useSourceSize="true",flyToCartElement.source=this.refs.productImage,flyToCartElement.destination=cartIcon,document.body.appendChild(flyToCartElement),await onAnimationEnd([this.refs.addToCartButton,flyToCartElement]),this.#resetTimeout=setTimeout(()=>{this.refs.addToCartButton.removeAttribute("data-added")},800)};#handleVariantUpdate=event=>{if(event.detail.data.productId!==this.dataset.productId)return;const variant=event.detail.resource,newStickyAddToCart=event.detail.data.html.querySelector("sticky-add-to-cart");if(!newStickyAddToCart)return;const newStickyBar=newStickyAddToCart.querySelector('[ref="stickyBar"]');if(!newStickyBar)return;const currentStuck=this.refs.stickyBar.getAttribute("data-stuck")||"false",variantAvailable=newStickyAddToCart.dataset.variantAvailable;morph(this.refs.stickyBar,newStickyBar,{childrenOnly:!0}),this.refs.stickyBar.setAttribute("data-stuck",currentStuck),this.dataset.variantAvailable=variantAvailable,variant&&variant.id&&(this.dataset.currentVariantId=variant.id);const productForm=this.#getProductForm();productForm&&(this.#targetAddToCartButton=productForm.querySelector('[ref="addToCartButton"]')),variant==null&&this.#handleVariantUnavailable(),this.#updateButtonText()};#handleVariantSelected=event=>{const variantId=event.detail.resource?.id;variantId&&(this.dataset.currentVariantId=variantId)};#handleVariantUnavailable=()=>{this.dataset.currentVariantId="";const variantTitleElement=this.querySelector(".sticky-add-to-cart__variant"),productId=this.dataset.productId,variantPicker=document.querySelector(`variant-picker[data-product-id="${productId}"]`);if(!variantTitleElement||!variantPicker)return;const selectedOptions=Array.from(variantPicker.querySelectorAll("input:checked")).map(option=>option.value).filter(value=>value!=="").join(" / ");selectedOptions&&(variantTitleElement.textContent=selectedOptions)};#handleCartAddComplete=_event=>{this.#targetAddToCartButton&&(this.#targetAddToCartButton.dataset.puppet="false")};#handleQuantityUpdate=event=>{event.detail.cartLine||(this.#currentQuantity=event.detail.quantity,this.#updateButtonText())};#showStickyBar(){const{stickyBar}=this.refs;this.#isStuck=!0,stickyBar.dataset.stuck="true"}#hideStickyBar(){const{stickyBar}=this.refs;this.#isStuck=!1,stickyBar.dataset.stuck="false"}#getProductForm(){const productId=this.dataset.productId;if(!productId)return null;const sectionElement=this.closest(".shopify-section");if(!sectionElement)return null;const sectionId=sectionElement.id.replace("shopify-section-","");return document.querySelector(`#shopify-section-${sectionId} product-form-component[data-product-id="${productId}"]`)}#getInitialQuantity(){this.#currentQuantity=parseInt(this.dataset.initialQuantity||"1")||1,this.#updateButtonText()}#updateButtonText(){const{addToCartButton,quantityDisplay,quantityNumber}=this.refs,available=!addToCartButton.disabled;quantityNumber.textContent=this.#currentQuantity.toString(),available&&this.#currentQuantity>1?quantityDisplay.style.display="inline":quantityDisplay.style.display="none"}}customElements.get("sticky-add-to-cart")||customElements.define("sticky-add-to-cart",StickyAddToCartComponent);
2//# sourceMappingURL=/cdn/shop/t/4/assets/sticky-add-to-cart.js.map?v=48956925339276737091774386995