`; pointerFineDiv.appendChild(button1); let pointerCoarseDiv = document.createElement('div'); pointerCoarseDiv.classList.add('pointer-coarse:hidden'); let button2 = document.createElement('button'); button2.type = 'button'; button2.classList.add('button'); button2.setAttribute('aria-controls', `quick-buy-template--${product.id}`); button2.setAttribute('aria-expanded', 'false'); button2.setAttribute('is', 'custom-button'); button2.innerHTML = `

+ Quick add

`; pointerCoarseDiv.appendChild(button2); let quickBuyDrawer = document.createElement('quick-buy-drawer'); quickBuyDrawer.setAttribute('id', `quick-buy-template--${product.id}`); quickBuyDrawer.setAttribute('header-bordered', ''); quickBuyDrawer.setAttribute('open-from', 'bottom'); quickBuyDrawer.setAttribute('handle', `${productCard.getAttribute('data-st-product-handle')}?variant=${productCard.getAttribute('data-st-product-activevariant-id')}`); quickBuyDrawer.setAttribute('role', 'dialog'); quickBuyDrawer.setAttribute('aria-live', 'polite'); quickBuyDrawer.classList.add('quick-buy-drawer', 'drawer'); quickBuyDrawer.setAttribute('aria-modal', 'true'); quickBuyDiv.appendChild(pointerFineDiv); quickBuyDiv.appendChild(pointerCoarseDiv); quickBuyDiv.appendChild(quickBuyDrawer); // Append the quick buy div to the product's image container if (imageWrapper) { imageWrapper.appendChild(quickBuyDiv); } } }, 1000); }); }); }); window.stCustomAddToCart = (id) => { let baseUrl = `${window.location.protocol}//${window.location.host}`; let url = `${baseUrl}/cart/add.js`; let url2 = `${baseUrl}/cart.js`; let data = encodeURI(`items[0][id]=${id}&items[0][quantity]=1`); let cartdrawer = document.querySelector('cart-drawer'); // document.documentElement.dispatchEvent(new CustomEvent("theme:loading:start", {bubbles: true})); let sectionsToBundle = []; document.documentElement.dispatchEvent(new CustomEvent("cart:prepare-bundled-sections", { bubbles: true, detail: {sections: sectionsToBundle} })); const formData = new FormData(); formData.append("form_type", "product"); formData.append("utf8", "✓"); formData.append("id", id); formData.append("product-id", id); formData.set("sections", sectionsToBundle.join(",")); formData.set("sections_url", `${Shopify.routes.root}variants/${id}`); fetch(url, { method: "POST", headers: { "X-Requested-With": "XMLHttpRequest", }, body: formData, }) .then((response) => { if (!response.ok) { throw Error(response.statusText); } return response; }) .then((response) => response.json()) .then((responseJson) => { fetch(url2) .then(response => response.json()) .then((cartJson) => { const cartContent = cartJson; cartContent["sections"] = responseJson["sections"]; this.dispatchEvent(new CustomEvent("variant:add", { bubbles: true, detail: { items: responseJson.hasOwnProperty("items") ? responseJson["items"] : [responseJson], cart: cartContent } })); document.documentElement.dispatchEvent(new CustomEvent("cart:change", { bubbles: true, detail: { baseEvent: "variant:add", cart: cartContent } })); cartdrawer.setAttribute('open', ''); }).catch(() => { this.dispatchEvent(new CustomEvent("cart:error", { bubbles: true, detail: { error: responseJson["description"] } })); }) }); };

Classic Styles