${name}

${isVariantAvaliable ? price : "Soldout"} ${isVariantAvaliable ? discountPrice : ""}

`; return item; } addonSelectable() { const variantList = this.closest(".sg-custom-variant-options"); const addonId = variantList.getAttribute("data-target"); const addonCheckbox = document.querySelector(`#spice_product_main_block_${addonId} input[name="spice_productid"]`); if (!addonCheckbox) return; const hasCheckedVariant = variantList.querySelector('input[type="checkbox"]:checked'); if(addonCheckbox.checked != true) { addonCheckbox.checked = !!hasCheckedVariant; addonCheckbox.dispatchEvent(new Event("change")) } } uncheckAll() { document.querySelectorAll('.sg-custom-variant-options li > label > input[type="checkbox"]:checked').forEach((item) => { item.checked = false; item.dispatchEvent(new Event("change", { bubbles: true, }),); }); document.querySelectorAll('.spice-spa-addon-checkbox input[type="checkbox"]:checked').forEach((main) => { main.checked = false; main.dispatchEvent(new Event("change", { bubbles: true, }),); }); } submitHelper() { window.sg_addon_custom_addPropWithAddons = (addonBlock, data) => { var checkedInput = addonBlock.querySelectorAll("li.spice-spa-addon-checkbox > label > input",).length > 0 ? addonBlock.querySelectorAll("li.spice-spa-addon-checkbox > label > input:checked",) : addonBlock.querySelectorAll('[name="spice_productid"]:checked') ? addonBlock.querySelectorAll('[name="spice_select_variant_id"]') : false; return [...checkedInput].map((elem) => { return { id: elem.value, quantity: data.quantity, }; }); } } discoutCalculate(price) { if (!isSgAddonRequest.discount) return false; let type = isSgAddonRequest.discount.discount_type; let value = isSgAddonRequest.discount.discount_value; let discount = "PERCENTAGE" === type ? Math.floor((price * 1 * parseFloat(value)) / 100) : parseFloat(value * 1 * 100); let finalPrice = price - discount; return SPICEADDONS.currencyFormats.mainFormat(finalPrice); } bindAddonToVariants(addon) { const addonCheckbox = addon.querySelector('input[name="spice_productid"]'); const variantList = addon.querySelector(".sg-custom-variant-options"); if (!addonCheckbox || !variantList) return; addonCheckbox.addEventListener("change", () => { const variants = variantList.querySelectorAll('input[type="checkbox"]:not(:disabled)'); // addon unchecked → uncheck all variants if (!addonCheckbox.checked) { variants.forEach(v => { v.checked = false; }); return; } }); } } class DROPDOWN { constructor() { this.placeHolder = "Välj"; this.container = ".sg-custom-variant-options"; this.init(); } init() { document.querySelectorAll(".spice-spa-addon-product-item").forEach((addon) => { let variantSelector = addon.querySelector("[name=spice_select_variant_id]",); let subOptions = addon.querySelector(`${this.container}`); if (subOptions) { subOptions.classList.add("dropdown"); let dropdown = this.create(); dropdown.append(subOptions); dropdown.addEventListener("click", this.OpenDropdown.bind(this)); variantSelector.after(dropdown); } } ); // check if anything else ofther than the dropdown is clicked window.addEventListener("click", (e) => { if (e.target.closest(".wrapper-dropdown") === null) { this.closeAllDropdowns(); } } ); } create() { let dropdown = document.createElement("div"); dropdown.id = "dropdown"; dropdown.className = "wrapper-dropdown"; dropdown.innerHTML = `${this.placeHolder} `; return dropdown; } OpenDropdown(e) { const _this = e.target.closest(".wrapper-dropdown"); const optionsContainer = _this.children[2]; const optionsList = _this.querySelectorAll("div.wrapper-dropdown li"); const arrow = _this.children[1]; if (!_this.classList.contains("active")) { let currentActive = document.querySelector(".wrapper-dropdown.active"); if (currentActive) { let anotherArrow = currentActive.children[1]; this.handleDropdown(currentActive, anotherArrow, false); } this.handleDropdown(_this, arrow, true); } else { if (!e.target.closest(".dropdown")) { this.handleDropdown(_this, arrow, false); } } } handleDropdown(dropdown, arrow, open) { if (open) { arrow.classList.add("rotated"); dropdown.classList.add("active"); } else { arrow.classList.remove("rotated"); dropdown.classList.remove("active"); } } closeAllDropdowns() { const selectedAll = document.querySelectorAll(".wrapper-dropdown"); selectedAll.forEach((selected) => { const optionsContainer = selected.children[2]; let arrow = selected.children[1]; this.handleDropdown(selected, arrow, false); }); } } const preCheckAddon = function () { const addonIds = ["15527998849408", "15532103270784"]; addonIds.forEach((id) => { const addon = document.querySelector(`#spice_product_main_block_${id}`); if(!addon) return const checkBox = addon.querySelector('input[type="checkbox"]'); addon.querySelector(".sg-spa-addon-product-submitButton").style.display = "none"; addon.querySelector(".spice-spa-addon-product-quantity").style.display = "none"; if (!checkBox) return; // Auto-check checkBox.checked = true; checkBox.dispatchEvent(new Event("change", { bubbles: true, }),); // Prevent unchecking checkBox.addEventListener("click", function (e) { if (!checkBox.checked) { e.preventDefault(); e.stopImmediatePropagation(); checkBox.checked = true; } }); } ); }; const SG = new ALLVARAINTSELECTABLE(); document.addEventListener("spicegemsAddon:initiated", function () { //document.head.insertAdjacentHTML('beforeend', ``) SG.submitHelper(); }); document.addEventListener("spicegemsAddon:inserted", function () { if (sg_addon_master_id == "15410723094912") { preCheckAddon(); } SG.init(); new DROPDOWN(); document.querySelectorAll(".sg-spa-addon-product-seperate-btn").forEach((btn) => { btn.addEventListener("click", function () { var addonBlock = this.closest(".spice-spa-addon-product-item"); window.sg_addon_custom_individualaddonDataModified = (i) => { var checkedInput = addonBlock.querySelectorAll("li.spice-spa-addon-checkbox > label > input",).length > 0 ? addonBlock.querySelectorAll("li.spice-spa-addon-checkbox > label > input:checked",) : addonBlock.querySelectorAll('[name="spice_productid"]:checked',) ? addonBlock.querySelectorAll('[name="spice_select_variant_id"]',) : false; var qnt = addonBlock.querySelector('input[name="sg-pro-access-qty"]',).value; if (checkedInput.length > 0) { let items = []; [...checkedInput].map((elem) => { items.push({ id: elem.value, quantity: qnt, }); }); i = {items}; } return i; } }, true); } ); }); document.addEventListener("spicegemsAddon:completed", function () { SG.uncheckAll(); if (sg_addon_master_id == "15410723094912") { preCheckAddon(); } }); window.addEventListener("jtcVariantLocationsLoaded", function (evt) { setTimeout(() => { SPICEADDONS.setAddToCart(); }, 1000); }); document.addEventListener('spicegemsAddon:indidualAddonAdded', function () { SG.uncheckAll(); }) async function refreshCartDrawer(drawerCart, sections) { // Get cart JSON const cartRes = await fetch(`${routes.cart_url}.js`); const cartState = await cartRes.json(); // Get rendered sections HTML const sectionsRes = await fetch( `${routes.cart_url}?sections=${sections.join(',')}` ); const sectionsData = await sectionsRes.json(); // Attach sections to cart state cartState.sections = sectionsData; // Render drawer drawerCart.renderContents(cartState); } document.addEventListener('spicegemsAddon:indidualAddonAdded', function () { const drawerCart = document.querySelector('#offcanvas__mini_cart'); const sections = drawerCart.getSectionsToRender().map(section => section.id); refreshCartDrawer(drawerCart, sections); }) })();

FAQ

FAQ

Subscribe to our newsletter