${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); }) })();

Collection: Mouthguard

Mouthguards

Filter and sort

Filter

No products found Use fewer filters or clear all

Association, club or team?

Subscribe to our newsletter

No products found
Use fewer filters or clear all