/* Paste this into: CornerCart app admin → Cart Drawer → Advanced settings → Add custom JavaScript Pair with shipping-protection-widget.html pasted into the Custom HTML slot in the same section. Uses the documented Corner Cart Web SDK (window.corner.do / .on / .overrideCartEdit) plus the standard Shopify Ajax Cart API, mirroring the /cart write + corner.do("refreshCart") pattern already used elsewhere on this store (assets/free-gift-automation.js). */ (function () { if (window.__spWidgetInit) return; window.__spWidgetInit = true; var VARIANT_ID = 44151168696500; var DISABLED_ATTR = 'shipping_protection_disabled'; var syncing = false; // Storefront API access token (Settings → Apps and sales channels → // Develop apps → create an app → enable Storefront API → install → copy // the "Storefront API access token"). Public, read-only — safe to embed // in client-side JS. Leave blank to skip the fallback fetch below and // rely only on cart-line data / the static defaults in the Custom HTML. var STOREFRONT_ACCESS_TOKEN = ''; var STOREFRONT_API_VERSION = '2025-07'; var DETAILS_CACHE_KEY = 'sp_variant_details_cache'; var cachedDetails = null; function cartFetch(url, opts) { return fetch(url, Object.assign({ headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, }, opts || {})).then(function (r) { return r.json(); }); } function getCart() { return cartFetch('/cart.js', { method: 'GET' }); } function addProtection() { return cartFetch('/cart/add.js', { method: 'POST', body: JSON.stringify({ items: [{ id: VARIANT_ID, quantity: 1 }] }), }); } function setProtectionQty(lineKey, qty) { return cartFetch('/cart/change.js', { method: 'POST', body: JSON.stringify({ id: lineKey, quantity: qty }), }); } function setDisabledAttribute(disabled) { var attributes = {}; attributes[DISABLED_ATTR] = disabled ? 'true' : ''; return cartFetch('/cart/update.js', { method: 'POST', body: JSON.stringify({ attributes: attributes }), }); } // Removing the line and setting the disabled flag as two separate parallel // requests leaves a window where a concurrent sync() (triggered by // CornerCart's own cart-edit detection) can see the line gone but the flag // not committed yet, and re-add it. /cart/update.js accepts "updates" (line // quantity, keyed by variant ID) and "attributes" together in one atomic // request, so there's no such window. function removeAndDisable() { var updates = {}; updates[VARIANT_ID] = 0; var attributes = {}; attributes[DISABLED_ATTR] = 'true'; return cartFetch('/cart/update.js', { method: 'POST', body: JSON.stringify({ updates: updates, attributes: attributes }), }); } function refreshCornerCart() { if (window.corner && typeof window.corner.do === 'function') { window.corner.do('refreshCart'); } } function findLine(cart) { return cart.items.filter(function (item) { return item.variant_id === VARIANT_ID; })[0]; } function otherLines(cart) { return cart.items.filter(function (item) { return item.variant_id !== VARIANT_ID; }); } function formatMoney(amount, currencyCode) { var value = (Math.round(Number(amount) * 100) / 100).toFixed(2); return currencyCode === 'AUD' || !currencyCode ? '$' + value : currencyCode + ' ' + value; } // Prefer live cart-line data (real, free, no extra request) whenever the // line is actually in the cart. Otherwise fall back to whatever we have // cached from a previous Storefront API fetch or cart line. function applyDetails(cart) { var nameEl = document.getElementById('sp-widget-name'); var priceEl = document.getElementById('sp-widget-price'); var iconEl = document.getElementById('sp-widget-icon'); if (!nameEl || !priceEl) return; var line = cart && findLine(cart); var details = line ? { name: line.product_title || line.title, price: formatMoney(line.price / 100, (window.Shopify && window.Shopify.currency && window.Shopify.currency.active) || ''), image: line.image, } : cachedDetails; if (!details) return; if (details.name) nameEl.textContent = details.name; if (details.price) priceEl.textContent = details.price; if (details.image && iconEl) { iconEl.innerHTML = '

'; } if (line) { cachedDetails = details; try { localStorage.setItem(DETAILS_CACHE_KEY, JSON.stringify(details)); } catch (e) {} } } function fetchVariantDetailsFromStorefront() { if (!STOREFRONT_ACCESS_TOKEN) return; var query = 'query($id: ID!) { node(id: $id) { ... on ProductVariant { price { amount currencyCode } image { url } product { title } } } }'; var gid = 'gid://shopify/ProductVariant/' + VARIANT_ID; fetch('/api/' + STOREFRONT_API_VERSION + '/graphql.json', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN, }, body: JSON.stringify({ query: query, variables: { id: gid } }), }).then(function (r) { return r.json(); }).then(function (result) { var variant = result && result.data && result.data.node; if (!variant) return; var details = { name: variant.product && variant.product.title, price: variant.price && formatMoney(variant.price.amount, variant.price.currencyCode), image: variant.image && variant.image.url, }; cachedDetails = details; try { localStorage.setItem(DETAILS_CACHE_KEY, JSON.stringify(details)); } catch (e) {} applyDetails(null); }).catch(function (err) { console.error('[ShippingProtectionWidget] variant fetch failed', err); }); } (function loadCachedDetails() { try { var raw = localStorage.getItem(DETAILS_CACHE_KEY); if (raw) cachedDetails = JSON.parse(raw); } catch (e) {} applyDetails(null); })(); function renderState(cart) { var widget = document.getElementById('sp-widget'); var input = document.getElementById('sp-toggle-input'); if (!widget || !input) return; var line = findLine(cart); var hasOtherProducts = otherLines(cart).length > 0; widget.style.display = hasOtherProducts ? '' : 'none'; input.checked = !!line; input.disabled = false; applyDetails(cart); } // Runs on load and on every cart edit: auto-adds the line whenever there's // at least one other product in the cart and it's not there yet, caps qty // at 1, and auto-removes it if it's the only thing left in the cart. The // only thing that stops the auto-add is the shopper explicitly flipping // the toggle off (which sets DISABLED_ATTR) — removing the line any other // way (e.g. CornerCart's own line-item remove control) is not treated as // an explicit "off" and it gets added back. function sync() { if (syncing) return; syncing = true; getCart().then(function (cart) { var line = findLine(cart); var hasOtherProducts = otherLines(cart).length > 0; var disabledAttr = (cart.attributes && cart.attributes[DISABLED_ATTR]) || ''; var ops = []; if (!hasOtherProducts && line) { console.log('[ShippingProtectionWidget] skip add — cart has no other products, removing existing line instead'); ops.push(setProtectionQty(line.key, 0)); } else if (line && line.quantity > 1) { console.log('[ShippingProtectionWidget] capping existing line to qty 1'); ops.push(setProtectionQty(line.key, 1)); } else if (!line && hasOtherProducts && disabledAttr !== 'true') { console.log('[ShippingProtectionWidget] auto-adding variant', VARIANT_ID); ops.push(addProtection()); } else if (!line && hasOtherProducts && disabledAttr === 'true') { console.log('[ShippingProtectionWidget] skip auto-add — shipping_protection_disabled attribute is set to "true" on this cart. Run window.__spResetDisabledFlag() to clear it and reload.'); } else if (!line && !hasOtherProducts) { console.log('[ShippingProtectionWidget] skip auto-add — no other products in cart yet'); } else if (line) { console.log('[ShippingProtectionWidget] line already present, nothing to do'); } return ops.length ? Promise.all(ops).then(getCart) : cart; }).then(function (cart) { console.log('[ShippingProtectionWidget] sync result', cart.items.map(function (i) { return { variant_id: i.variant_id, quantity: i.quantity }; })); renderState(cart); }) .catch(function (err) { console.error('[ShippingProtectionWidget]', err); }) .finally(function () { syncing = false; }); } // Testing helper: clears the "shopper turned it off" flag so the next // sync() can auto-add again. Run from the console. window.__spResetDisabledFlag = function () { return setDisabledAttribute(false).then(function () { console.log('[ShippingProtectionWidget] shipping_protection_disabled cleared — reload the page to re-trigger auto-add.'); }); }; window.__spToggle = function (checked) { var input = document.getElementById('sp-toggle-input'); if (input) input.disabled = true; getCart().then(function (cart) { var line = findLine(cart); if (checked) { var ensureAdded = line ? Promise.resolve() : addProtection(); return ensureAdded.then(function () { return setDisabledAttribute(false); }); } return line ? removeAndDisable() : setDisabledAttribute(true); }).then(function () { refreshCornerCart(); return getCart(); }).then(renderState) .catch(function (err) { console.error('[ShippingProtectionWidget]', err); }) .finally(function () { if (input) input.disabled = false; }); }; // Belt-and-braces: cap quantity at 1 even if the shopper bumps it via // CornerCart's own line-item quantity stepper, before our sync() catches up. if (window.corner && typeof window.corner.overrideCartEdit === 'function') { window.corner.overrideCartEdit(function (cartObject, ajaxJobQueue) { var index = cartObject.items.findIndex(function (item) { return item.variantId === VARIANT_ID; }); if (index === -1) return ajaxJobQueue; ajaxJobQueue.forEach(function (jobItem) { var isChangeJob = jobItem.job === 'change'; var isLineMatch = jobItem.details && jobItem.details.payload && jobItem.details.payload.line === index + 1; if (isChangeJob && isLineMatch && jobItem.details.payload.quantity > 1) { jobItem.details.payload.quantity = 1; } }); return ajaxJobQueue; }); } if (window.corner && typeof window.corner.on === 'function') { window.corner.on('onCartEdit', function () { sync(); }); window.corner.on('onCowiOpen', function () { sync(); }); } fetchVariantDetailsFromStorefront(); sync(); })(); function updateCartUI(cartDetails) { let items = cartDetails.items; let hasJWCRUMembership = items.some(item => item.handle === 'jw-cru-membership'); let atcButton = document.querySelector('[data-productid="7557131567284"] .product-form--atc-button'); let cruWrapper = document.querySelector('.cru-wrapper'); let productPricing = document.querySelector('#product_form_7557131567284 .product-pricing'); if (atcButton && cruWrapper && productPricing) { if (hasJWCRUMembership) { atcButton.classList.add("unavailable_item_cta", "ctanew"); cruWrapper.classList.add("displaynone"); // Save handle in cookie document.cookie = "jwCruMembershipInCart=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/"; // Hide product pricing using class productPricing.classList.add("hidden"); } else { atcButton.classList.remove("unavailable_item_cta", "ctanew"); cruWrapper.classList.remove("displaynone"); // Remove cookie if exists document.cookie = "jwCruMembershipInCart=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Show product pricing using class productPricing.classList.remove("hidden"); } } else { console.error('Required elements not found in the DOM.'); } } function fetchCartDetailsAndUpdateUI() { fetch('/cart.js') .then(response => response.json()) .then(cart => { updateCartUI(cart); }) .catch(error => console.error('Error fetching cart details:', error)); } // Ensure DOM is fully loaded before fetching cart details document.addEventListener('DOMContentLoaded', function() { fetchCartDetailsAndUpdateUI(); // Check if cookie exists and adjust UI accordingly let jwCruMembershipInCart = getCookie("jwCruMembershipInCart"); if (jwCruMembershipInCart === "true") { let productPricing = document.querySelector('#product_form_7557131567284 .product-pricing'); if (productPricing) { productPricing.classList.add("hidden"); } } }); // Fetch cart details on popstate (handling browser navigation) window.addEventListener('popstate', function() { fetchCartDetailsAndUpdateUI(); }); // Call the function on cart edit without delay corner.on("onCartEdit", (params) => { updateCartUI(params.cartDetails); }); // Function to retrieve cookie value by name function getCookie(name) { let cookieValue = ""; const cookies = document.cookie.split(';'); cookies.forEach(cookie => { const [cookieName, value] = cookie.trim().split('='); if (cookieName === name) { cookieValue = decodeURIComponent(value); } }); return cookieValue; } document.addEventListener("DOMContentLoaded", function () { const targetDiv = document.querySelector('[data-product-id="7850512974004"] #corner-cowi-cart-item-list-item-info-remove-btn-0'); document.querySelector('.corner-widget-wrapper') .addEventListener('click', function (event) { if (event.target.closest('#corner-cowi-open-wrapper #corner-cowi-cart-item-list .corner-cowi-cart-item[data-variant-id="7850512974004"]')) { document.body.classList.remove('cruvisible'); localStorage.setItem('cruvisible', 'false'); } }); 0 // For free shipping attribute corner.on("onCartEdit", (params) => { params.cartDetails.items.forEach((item) => { if (item.tags && item.tags.includes("free-shipping-item")) { console.log("www.justwines.com.au") const itemId = item.id; let properties_data = { 'Shipping': 'Free' }; fetch('/cart/change.js', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ id: itemId, quantity: item.quantity, properties: properties_data, }), }) .then(response => response.json()) .then(data => { console.log('Item updated in cart:', data); }) .catch(error => { console.error('Error updating item in cart:', error); }); } }); }); }) corner.overrideCheckout((cartObject, discountCodeApplied) => { console.log("Checkout triggered, updating note attribute with SKUs and quantities..."); // Step 1: Fetch latest cart from Shopify fetch('/cart.js') .then(res => res.json()) .then(cart => { const itemsWithQty = []; cart.items.forEach(item => { // Determine identifier: SKU if available, else variant_id const identifier = item.sku && item.sku.trim() !== "" ? item.sku : item.variant_id; // Include _product_id for bundles if needed if (item.properties && item.properties._product_id) { // optional: append _product_id separately if you want // const bundleIdentifier = item.properties._product_id; // itemsWithQty.push(`${item.quantity} x ${bundleIdentifier}`); } // Add quantity x identifier itemsWithQty.push(`${item.quantity} x ${identifier}`); }); // Join all items with comma const noteValue = itemsWithQty.join(','); console.log('Note attribute value to save:', noteValue); // Step 2: Update cart note attribute return fetch('/cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ attributes: { "Main Product Ordered": noteValue } }) }); }) .then(res => res.json()) .then(updatedCart => { console.log('Cart note updated successfully:', updatedCart.attributes); // Step 3: Redirect to checkout window.location.href = '/checkout'; }) .catch(err => { console.error('Error updating cart note:', err); // Redirect even if update fails window.location.href = '/checkout'; }); }); /* Below code added for Custom cart upselling */ corner.on("onCowiOpen", (params) => { setTimeout(() => { updateCartRelatedProducts(params.cartDetails); }, 2000); }); corner.on("onCartEdit", (params) => { setTimeout(() => { updateCartRelatedProducts(params.cartDetails); }, 2000); }); corner.on("onSatcCtaClick", (params) => { setTimeout(() => { updateCartRelatedProducts(params.cartDetails); }, 2000); }); async function updateCartRelatedProducts(cartData) { const container = document.getElementById('cart-drawer-related-products'); if (!container){ if(cartData.items.length <= 0){ return; } } try { const cartResponse = await fetch('/cart.js'); const cart = await cartResponse.json(); if (!cart.items || cart.items.length === 0) { container.innerHTML = ''; container.style.display = 'none'; return; } const uniqueProductIds = [...new Set(cart.items.map(item => item.product_id))]; const cartHandles = cart.items.map(item => item.handle); const itemsCount = uniqueProductIds.length; let limitPerProduct = Math.floor(10 / itemsCount); if (limitPerProduct === 0) limitPerProduct = 1; let allRelatedProducts = []; const fetchPromises = uniqueProductIds.slice(0, 10).map(async (productId) => { const recUrl = `/recommendations/products.json?product_id=${productId}&limit=${limitPerProduct + 5}`; const recResponse = await fetch(recUrl); const recData = await recResponse.json(); return recData.products || []; }); const results = await Promise.all(fetchPromises); const seenIds = new Set(); const excludeTag = "exclude_cart_upselling"; results.flat().forEach(product => { const hasExcludeTag = product.tags && product.tags.includes(excludeTag); if (!seenIds.has(product.id) && !cartHandles.includes(product.handle) && !hasExcludeTag) { seenIds.add(product.id); allRelatedProducts.push(product); } }); const finalProducts = allRelatedProducts.slice(0, 10); if (finalProducts.length === 0) { container.innerHTML = ''; container.style.display = 'none'; return; } let htmlMarkup = ``; htmlMarkup += ` `; container.innerHTML = htmlMarkup; container.style.display = 'block'; const track = container.querySelector('.related-slider-track'); const slides = container.querySelectorAll('.related-product-card'); const prevBtn = container.querySelector('.slider-prev'); const nextBtn = container.querySelector('.slider-next'); let currentIndex = 0; const totalSlides = slides.length; if (window.cartRelatedSliderInterval) { clearInterval(window.cartRelatedSliderInterval); } const updateSliderPosition = () => { track.style.transform = `translateX(-${currentIndex * 100}%)`; }; const nextSlide = () => { currentIndex = (currentIndex + 1) % totalSlides; updateSliderPosition(); }; const prevSlide = () => { currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; updateSliderPosition(); }; window.cartRelatedSliderInterval = setInterval(nextSlide, 5000); const resetTimer = () => { clearInterval(window.cartRelatedSliderInterval); window.cartRelatedSliderInterval = setInterval(nextSlide, 5000); }; nextBtn.addEventListener('click', () => { nextSlide(); resetTimer(); }); prevBtn.addEventListener('click', () => { prevSlide(); resetTimer(); }); const addButtons = container.querySelectorAll('.related-add-btn'); addButtons.forEach(button => { button.addEventListener('click', async (e) => { e.preventDefault(); const variantToadd = button.getAttribute('data-variant-id'); const originalText = button.innerText; button.innerText = '...'; button.disabled = true; try { await fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: [{ id: variantToadd, quantity: 1 }] }) }); button.innerText = 'Added'; setTimeout(() => { button.innerText = originalText; button.disabled = false; }, 2000); } catch (error) { console.error('Error adding item to cart:', error); button.innerText = 'Error'; button.disabled = false; } }); }); } catch (error) { console.error("Error fetching related products: ", error); } } document.addEventListener('DOMContentLoaded', updateCartRelatedProducts);

Frequently Reordered

Browse By Topic

Latest Blogs

Follow us