function dimButtonsIfVariantUnavailableOrSold() {
var productVariants = document.querySelector(".product-variants");
var buttons = Array.from(document.querySelectorAll(".c-swatches__button"));
if (!productVariants || !buttons.length) return;
function isVariantInStock() {
// Check if the variant is in stock (default to true if not defined)
return productVariants.getAttribute("data-variant-in-stock") === "true";
}
function buttonsHandler(button) {
button.classList.remove("is-unavailable");
// Only mark as unavailable if the variant is out of stock
if (!isVariantInStock() && button.classList.contains("is-active")) {
button.classList.add("is-unavailable");
}
}
buttons.forEach(function (button) {
button.addEventListener("click", function () {
buttons.forEach(buttonsHandler);
// Special case: Handle single swatch scenario
if (buttons.length === 1) {
buttons[0].classList.remove("is-unavailable");
buttons[0].style.opacity = "1"; // Ensure the button remains fully visible
}
});
});
// Handle the single swatch case immediately
if (buttons.length === 1) {
buttons[0].classList.remove("is-unavailable");
buttons[0].style.opacity = "1"; // Ensure the button remains fully visible
}
}
// Initialize the logic on page load and Mercury reloads
document.addEventListener("DOMContentLoaded", dimButtonsIfVariantUnavailableOrSold);
window.addEventListener("mercury:load", dimButtonsIfVariantUnavailableOrSold);
