https://justfoodfordogs.com/cdn/shop/t/10/assets/sticky-add-to-cart.js?v=115132161735632289391790174304

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","stickyError","stickyErrorText"];static#footerPaddingVar="--sticky-add-to-cart-footer-padding-bottom";#buyButtonsIntersectionObserver=null;#mainBottomObserver=null;#resetTimeout;#isStuck=!1;#animationTimeout=null;#abortController=new AbortController;#targetAddToCartButton=null;#currentQuantity=1;#hiddenByBottom=!1;#productFormErrorObserver=null;#stickyBarResizeObserver=null;#errorResetTimeout=null;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.#handleCartError,{signal}),document.addEventListener(ThemeEvents.quantitySelectorUpdate,this.#handleQuantityUpdate,{signal}),window.addEventListener("resize",this.#syncFooterBottomPadding,{signal}),this.#getInitialQuantity(),this.#setupProductFormErrorMirror(),this.#setupFooterBottomPaddingSync(),this.#syncFooterBottomPadding()}disconnectedCallback(){super.disconnectedCallback(),this.#buyButtonsIntersectionObserver?.disconnect(),this.#mainBottomObserver?.disconnect(),this.#productFormErrorObserver?.disconnect(),this.#stickyBarResizeObserver?.disconnect(),this.#abortController.abort(),this.#animationTimeout&&clearTimeout(this.#animationTimeout),this.#errorResetTimeout&&clearTimeout(this.#errorResetTimeout),this.#clearFooterBottomPadding()}#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.#syncQuantityToProductForm(this.#getStickyQuantity()),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");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.#setupProductFormErrorMirror(),this.#updateButtonText(),this.#syncFooterBottomPadding()};#handleVariantSelected=event=>{const selectedOption=(event.target instanceof HTMLElement?event.target.closest("variant-picker"):null)?.querySelector("select option[selected], fieldset input:checked"),variantId=selectedOption instanceof HTMLElement?selectedOption.dataset.variantId:void 0;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")};#handleCartError=event=>{this.#handleCartAddComplete(event);const message=event.detail?.message||event.detail?.description;message&&this.#showStickyError(message)};#handleQuantityUpdate=event=>{event.detail.cartLine||(this.#currentQuantity=event.detail.quantity,event.target instanceof HTMLElement&&this.refs.stickyBar.contains(event.target)&&this.#syncQuantityToProductForm(this.#currentQuantity),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"}

1#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()}#getStickyQuantity(){const quantitySelector=this.refs.stickyBar.querySelector("quantity-selector-component");return quantitySelector?.getValue?Number(quantitySelector.getValue())||this.#currentQuantity||1:this.#currentQuantity||1}#syncQuantityToProductForm(quantity){const productForm=this.#getProductForm(),quantitySelector=productForm?.querySelector("quantity-selector-component");if(quantitySelector?.setValue){quantitySelector.setValue(quantity.toString()),quantitySelector.updateButtonStates?.(),quantitySelector.onQuantityChange?.();return}const quantityInput=productForm?.querySelector('input[name="quantity"]');quantityInput&&(quantityInput.value=quantity.toString())}#setupProductFormErrorMirror(){const productErrorElement=this.#getProductFormErrorElement();productErrorElement&&(this.#productFormErrorObserver?.disconnect(),this.#productFormErrorObserver=new MutationObserver(()=>{this.#mirrorProductFormError()}),this.#productFormErrorObserver.observe(productErrorElement,{attributes:!0,attributeFilter:["class"],childList:!0,subtree:!0,characterData:!0}),this.#mirrorProductFormError())}#mirrorProductFormError(){const productErrorElement=this.#getProductFormErrorElement();if(!productErrorElement)return;if(productErrorElement.classList.contains("hidden")){this.#hideStickyError();return}const message=productErrorElement.textContent?.trim();message&&this.#showStickyError(message)}#getProductFormErrorElement(){return this.#getProductForm()?.querySelector('[ref="addToCartTextError"]')}#isMobileViewport(){return window.matchMedia("(max-width: 990px)").matches}#showStickyError(message){this.#isMobileViewport()&&(!this.refs.stickyError||!this.refs.stickyErrorText||(this.refs.stickyErrorText.textContent=message,this.refs.stickyError.classList.remove("hidden"),this.#errorResetTimeout&&clearTimeout(this.#errorResetTimeout),this.#errorResetTimeout=window.setTimeout(()=>{this.#hideStickyError()},1e4)))}#hideStickyError(){!this.refs.stickyError||!this.refs.stickyErrorText||(this.refs.stickyError.classList.add("hidden"),this.refs.stickyErrorText.textContent="")}#setupFooterBottomPaddingSync(){!this.refs.stickyBar||typeof ResizeObserver>"u"||(this.#stickyBarResizeObserver?.disconnect(),this.#stickyBarResizeObserver=new ResizeObserver(()=>{this.#syncFooterBottomPadding()}),this.#stickyBarResizeObserver.observe(this.refs.stickyBar))}#syncFooterBottomPadding=()=>{if(!this.#isMobileViewport()||!this.refs.stickyBar){this.#clearFooterBottomPadding();return}if(window.getComputedStyle(this.refs.stickyBar).display==="none"){this.#clearFooterBottomPadding();return}const height=Math.ceil(this.refs.stickyBar.getBoundingClientRect().height);height>0&&document.documentElement.style.setProperty(StickyAddToCartComponent.#footerPaddingVar,`${height}px`)};#clearFooterBottomPadding(){document.documentElement.style.removeProperty(StickyAddToCartComponent.#footerPaddingVar)}#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/10/assets/sticky-add-to-cart.js.map?v=115132161735632289391790174304