document.addEventListener("DOMContentLoaded", function () {
function waitForElement(selector, callback) {
const observer = new MutationObserver((mutations, obs) => {
const element = document.querySelector(selector);
if (element) {
obs.disconnect();
callback(element);
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
// Wait for the variant selector (Quantity select) to load
waitForElement("select[aria-label='Select Quantity']", function(variantSelector) {
console.log("Variant selector found!");
const colorContainer = document.createElement("div");
colorContainer.id = "color-selection";
const colors = ["Black", "White", "Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Pink"];
function createColorDropdown(id, labelText) {
const container = document.createElement("div");
container.className = "color-picker";
const label = document.createElement("label");
label.innerText = labelText;
label.htmlFor = id;
const dropdown = document.createElement("select");
dropdown.name = id;
dropdown.id = id;
dropdown.innerHTML = `` + colors.map(color => ``).join('');
container.appendChild(label);
container.appendChild(dropdown);
return container;
}
function updateColorSelection() {
console.log("Updating color selection...");
colorContainer.innerHTML = ""; // Clear current color options
if (variantSelector.value === "2-Pack") {
console.log("2-Pack selected, showing two color dropdowns.");
colorContainer.appendChild(createColorDropdown("color-1", "Select Color 1"));
colorContainer.appendChild(createColorDropdown("color-2", "Select Color 2"));
} else if (variantSelector.value === "Single Case") {
console.log("Single Case selected, showing one color dropdown.");
colorContainer.appendChild(createColorDropdown("color-1", "Select Color"));
}
// Append the color container (if it's not already appended)
const existingContainer = document.getElementById("color-selection");
if (!existingContainer) {
const productForm = document.querySelector("form");
if (productForm) {
productForm.insertBefore(colorContainer, productForm.querySelector(".sqs-add-to-cart-button"));
}
}
}
// Wait for the product form to be ready, then insert color selection
waitForElement(".sqs-add-to-cart-button", function(button) {
console.log("Add to Cart button found!");
// Listen for changes to the variant selector
variantSelector.addEventListener("change", function () {
console.log("Variant changed to:", variantSelector.value);
updateColorSelection();
});
// Initial color selection setup
updateColorSelection();
});
});
});
