if (window.productAdditionalScriptFunction) { window.productAdditionalScriptFunction(); } else { window.productAdditionalScriptFunction = () => { const colorInputField = (() => { const checkoutFieldCtn = () => document.querySelector(".checkout-input-field-container"); let colorElement = null; if (checkoutFieldCtn()) { const checkoutFields = Array.from(checkoutFieldCtn().children); for (let i = 0; i < checkoutFields.length; i++) { const field = checkoutFields[i]; if ( field.querySelector("p.checkout-input-field-field")?.innerText === "Color (Optional)" ) { colorElement = field; } } } return colorElement; })(); const variants = document.querySelectorAll(".variants-info-fieldctn"); if (variants && variants.length > 0) { const packOfSelector = Array.from( document.querySelectorAll(".variants-info-fieldctn") ).find((el) => el .querySelector(".variant-selector-field-text") ?.innerText.includes("Pack of:") ); if (packOfSelector) { const packOfValue = parseInt( packOfSelector .querySelector(".variant-selector-field-text") .innerText.split("Pack of: ")[1] ); const featureContainer = document.querySelector("features-container"); const featureTables = featureContainer?.querySelectorAll("tr"); const colorRow = Array.from(featureTables).find( (el) => el.querySelector(".features-table-name")?.innerText === "Colors" ); if (colorRow) { const allColors = colorRow.querySelector( ".features-table-value" )?.innerText; if (allColors) { const colors = allColors.split(","); const selectedValues = new Set(); const drawColorSelectors = () => { const inputHtml = `${colors .map( (color, index) => `

${color}

` ) .join("")}`; const element = document.createElement("div"); element.innerHTML = inputHtml; function updateVariant() { const form = document.querySelector("form.color-selector"); form.innerHTML = ""; document.querySelector( "#color-selector-value" ).innerText = `Color Options: ${Array.from(selectedValues).join( ", " )}`; form.appendChild(drawColorSelectors()); } Array.from( element.querySelectorAll('input[name="color"]') ).forEach((input) => { input.addEventListener("change", (e) => { document.querySelector(".color-selector-error").innerText = ""; const { value } = e.target; if (selectedValues.has(value)) { selectedValues.delete(value); } else { if (selectedValues.size === packOfValue) { document.querySelector( ".color-selector-error" ).innerText = `You can only select ${packOfValue} colors`; } else { selectedValues.add(value); } } updateVariant(); }); }); if (colorInputField) { const input = colorInputField.querySelector("input"); const inputDispatchWindowObjName = input.getAttribute("data-testid"); if ( inputDispatchWindowObjName && window[inputDispatchWindowObjName] ) { window[inputDispatchWindowObjName]( Array.from(selectedValues).join(", ") ); } } return element; }; const colorChecklistHtml = `

Color Options: ${Array.from( selectedValues ).join(", ")}

`; const element = document.createElement("div"); element.innerHTML = colorChecklistHtml; element .querySelector("form.color-selector") .appendChild(drawColorSelectors()); const lastElement = variants[variants.length - 1]; lastElement.insertAdjacentElement("afterend", element); } } } } }; window.productAdditionalScriptFunction(); }

All Posts