https://museumofgraffiti.com/cdn/shop/t/16/assets/component-cart-items.js?v=14476580701730542761787335035

1import{Component}from"@theme/component";import{fetchConfig,debounce,onAnimationEnd,prefersReducedMotion,resetShimmer,startViewTransition}from"@theme/utilities";import{morphSection,sectionRenderer}from"@theme/section-renderer";import{ThemeEvents,QuantitySelectorUpdateEvent}from"@theme/events";import{cartPerformance}from"@theme/performance";import{createViewEventElement,CartErrorEvent,CartLinesUpdateEvent,StandardEvents}from"@shopify/events";export class CartItemsComponent extends createViewEventElement(Component){#debouncedOnChange=debounce(event=>{event instanceof QuantitySelectorUpdateEvent&&this.#onQuantityChange(event)},300);#pendingCartFetch=null;#isExternalCartUpdate(event){return!(event.target instanceof Node)||!this.contains(event.target)}#handleDiscountUpdate=event=>{const external=this.#isExternalCartUpdate(event);event.promise?.then(({detail})=>{const sectionsHtml=detail?.sections?.[this.sectionId];sectionsHtml?(morphSection(this.sectionId,sectionsHtml,{mode:this.isDrawer?"hydration":"full"}),this.#updateCartQuantitySelectorButtonStates()):external&&sectionRenderer.renderSection(this.sectionId,{cache:!1,mode:this.isDrawer?"hydration":"full"})}).catch(error=>{error?.name!=="AbortError"&&console.warn("[cart-items] Event promise rejected:",error)})};#handleNoteUpdate=event=>{this.#isExternalCartUpdate(event)&&event.promise?.then(({detail})=>{const sectionsHtml=detail?.sections?.[this.sectionId];sectionsHtml?morphSection(this.sectionId,sectionsHtml,{mode:this.isDrawer?"hydration":"full"}):sectionRenderer.renderSection(this.sectionId,{cache:!1,mode:this.isDrawer?"hydration":"full"})}).catch(error=>{error?.name!=="AbortError"&&console.warn("[cart-items] Event promise rejected:",error)})};connectedCallback(){super.connectedCallback(),document.addEventListener(StandardEvents.cartLinesUpdate,this.#handleCartUpdate),document.addEventListener(ThemeEvents.quantitySelectorUpdate,this.#debouncedOnChange),document.addEventListener(StandardEvents.cartDiscountUpdate,this.#handleDiscountUpdate),document.addEventListener(StandardEvents.cartNoteUpdate,this.#handleNoteUpdate)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(StandardEvents.cartLinesUpdate,this.#handleCartUpdate),document.removeEventListener(ThemeEvents.quantitySelectorUpdate,this.#debouncedOnChange),document.removeEventListener(StandardEvents.cartDiscountUpdate,this.#handleDiscountUpdate),document.removeEventListener(StandardEvents.cartNoteUpdate,this.#handleNoteUpdate)}#onQuantityChange(event){if(!(event.target instanceof Node)||!this.contains(event.target))return;const{quantity,cartLine:line}=event.detail;if(!line)return;if(quantity===0)return this.onLineItemRemove(line);this.updateQuantity({line,quantity,action:"change"});const lineItemRow=this.refs.cartItemRows[line-1];if(!lineItemRow)return;lineItemRow.querySelector("text-component")?.shimmer()}onLineItemRemove(line){this.updateQuantity({line,quantity:0,action:"clear"});const cartItemRowToRemove=this.refs.cartItemRows[line-1];if(!cartItemRowToRemove)return;const rowsToRemove=[cartItemRowToRemove,...this.refs.cartItemRows.filter(row=>row.dataset.parentKey===cartItemRowToRemove.dataset.key)],isEmptyCart=rowsToRemove.length==this.refs.cartItemRows.length,template=document.getElementById("empty-cart-template");if(isEmptyCart&&template instanceof HTMLTemplateElement){const clone=document.importNode(template.content,!0);startViewTransition(()=>{document.getElementById("cart-drawer-heading")?.remove(),this.replaceChildren(clone)},[this.isDrawer?"empty-cart-drawer":"empty-cart-page"]);return}rowsToRemove.forEach(row=>{const remove=()=>row.remove();if(prefersReducedMotion())return remove();row.style.setProperty("--row-height",`${row.clientHeight}px`),row.classList.add("removing"),onAnimationEnd(row,remove)})}updateQuantity(config){const cartPerformaceUpdateMarker=cartPerformance.createStartingMarker(`${config.action}:user-action`);this.#disableCartItems();const{line,quantity}=config,{cartTotal}=this.refs,cartItemsComponents=document.querySelectorAll("cart-items-component"),sectionsToUpdate=new Set([this.sectionId]);

1cartItemsComponents.forEach(item=>{item instanceof HTMLElement&&item.dataset.sectionId&&sectionsToUpdate.add(item.dataset.sectionId)});const body=JSON.stringify({line,quantity,sections:Array.from(sectionsToUpdate).join(","),sections_url:window.location.pathname});cartTotal?.shimmer();const deferredUpdatePromise=CartLinesUpdateEvent.createPromise(),lineId=this.refs.cartItemRows[line-1]?.dataset.key??"";this.dispatchEvent(new CartLinesUpdateEvent({action:config.action==="change"&&quantity>0?"update":"remove",context:"cart",lines:[{id:lineId,quantity}],promise:deferredUpdatePromise.promise})),fetch(`${Theme.routes.cart_change_url}`,fetchConfig("json",{body})).then(response=>response.text()).then(responseText=>{const parsedResponseText=JSON.parse(responseText);if(resetShimmer(this),parsedResponseText.errors){this.#handleCartError(line,parsedResponseText),deferredUpdatePromise.reject(new Error(parsedResponseText.errors));return}const newCartHiddenItemCount=new DOMParser().parseFromString(parsedResponseText.sections[this.sectionId],"text/html").querySelector('[ref="cartItemCount"]')?.textContent,newCartItemCount=newCartHiddenItemCount?parseInt(newCartHiddenItemCount,10):0;this.#updateQuantitySelectors(parsedResponseText),deferredUpdatePromise.resolve({cart:CartLinesUpdateEvent.createCartFromAjaxResponse(parsedResponseText),detail:{sections:parsedResponseText.sections,items:parsedResponseText.items,itemCount:newCartItemCount,source:"cart-items-component",didError:!1}}),morphSection(this.sectionId,parsedResponseText.sections[this.sectionId],{mode:this.isDrawer?"hydration":"full"}),this.#updateCartQuantitySelectorButtonStates()}).catch(error=>{console.error(error),deferredUpdatePromise.reject(error),this.dispatchEvent(new CartErrorEvent({error:error?.message||"Failed to update cart",code:"SERVICE_UNAVAILABLE"}))}).finally(()=>{this.#enableCartItems(),cartPerformance.measureFromMarker(cartPerformaceUpdateMarker)})}#handleCartError=(line,parsedResponseText)=>{const quantityInput=this.refs.quantitySelectors[line-1]?.querySelector("input");if(!quantityInput)throw new Error("Quantity input not found");quantityInput.value=quantityInput.defaultValue;const cartItemError=this.refs[`cartItemError-${line}`],cartItemErrorContainer=this.refs[`cartItemErrorContainer-${line}`];if(!(cartItemError instanceof HTMLElement))throw new Error("Cart item error not found");if(!(cartItemErrorContainer instanceof HTMLElement))throw new Error("Cart item error container not found");cartItemError.textContent=parsedResponseText.errors,cartItemErrorContainer.classList.remove("hidden"),this.dispatchEvent(new CartErrorEvent({error:parsedResponseText.errors||"Cart update failed",code:"INVALID"}))};#handleCartUpdate=event=>{event.target!==this&&event.promise?.then(async({detail})=>{const cartItemsHtml=detail?.sections?.[this.sectionId],wasEmptyCartDrawer=this.isDrawer&&this.querySelector("[data-cart-drawer-empty]")!==null,morphOptions={mode:this.isDrawer?"hydration":"full",injectStylesheet:wasEmptyCartDrawer};if(cartItemsHtml){const existingKeys=new Set(this.refs.cartItemRows?.map(row=>row.dataset.key)??[]);if(wasEmptyCartDrawer?startViewTransition(()=>{morphSection(this.sectionId,cartItemsHtml,morphOptions)},["fill-cart-drawer"]):await morphSection(this.sectionId,cartItemsHtml,morphOptions),!wasEmptyCartDrawer&&!prefersReducedMotion())for(const row of this.refs.cartItemRows??[])existingKeys.has(row.dataset.key)||(row.classList.add("adding"),onAnimationEnd(row,()=>row.classList.remove("adding")));this.#updateCartQuantitySelectorButtonStates()}else sectionRenderer.renderSection(this.sectionId,{cache:!1,...morphOptions})}).catch(error=>{error?.name!=="AbortError"&&console.warn("[cart-items] Event promise rejected:",error)})};#disableCartItems(){this.classList.add("cart-items-disabled")}#enableCartItems(){this.classList.remove("cart-items-disabled")}#updateQuantitySelectors(updatedCart){if(updatedCart.items)for(const item of updatedCart.items){const variantId=item.variant_id.toString(),selectors=document.querySelectorAll(`quantity-selector-component[data-variant-id="${variantId}"]`);for(const selector of selectors){const input=selector.querySelector("input[data-cart-quantity]");input&&(input.setAttribute("data-cart-quantity",item.quantity.toString()),"updateCartQuantity"in selector&&typeof selector.updateCartQuantity=="function"&&selector.updateCartQuantity())}}}#updateCartQuantitySelectorButtonStates(){for(const selector of document.querySelectorAll("cart-quantity-selector-component"))selector.updateButtonStates?.()}async fetchCartData(){return this.#pendingCartFetch?this.#pendingCartFetch:(this.#pendingCartFetch=(async()=>{const response=await fetch(`${Theme.routes.cart_url}.json`,{headers:{Accept:"application/json"},credentials:"same-origin"});if(!response.ok)throw new Error(`Failed to fetch cart: ${response.status} ${response.statusText}`);return await response.json()})().finally(()=>{this.#pendingCartFetch=null}),this.#pendingCartFetch)}get sectionId(){const{sectionId}=this.dataset;if(!sectionId)throw new Error("Section id missing");return sectionId}get isDrawer(){return this.dataset.drawer!==void 0}}customElements.get("cart-items-component")||customElements.define("cart-items-component",CartItemsComponent);
2//# sourceMappingURL=/cdn/shop/t/16/assets/component-cart-items.js.map?v=14476580701730542761787335035