Swatches
Dim Buttons if Selected Variant is Unavailable or Sold Out
Add this code after the plugin code in Code Injection:
<!-- Dim Buttons if Selected Variant is Unavailable or Sold Out -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ -->
<style>
.c-swatches__button.is-unavailable {
opacity: 0.25;
}
</style>
<script>function dimButtonsIfVariantUnavailableOrSold(){var productVariants=document.querySelector(".product-variants"),buttons=[].slice.apply(document.querySelectorAll(".c-swatches__button"));if(!productVariants||!buttons.length)return null;function isVariantInStock(){return productVariants.getAttribute("data-variant-in-stock")}function buttonsHandler(button){button.classList.remove("is-unavailable"),!isVariantInStock()&&button.classList.contains("is-active")&&button.classList.add("is-unavailable")}buttons.forEach((function(button){button.addEventListener("click",(function(){buttons.forEach(buttonsHandler)}))}))}document.addEventListener("DOMContentLoaded",dimButtonsIfVariantUnavailableOrSold),window.addEventListener("mercury:load",dimButtonsIfVariantUnavailableOrSold);</script>
<!-- end Dim Buttons if Selected Variant is Unavailable or Sold Out -->Deselect First Variant
To deselect the first variant, add this code after the plugin code.
<!-- Plugin Swatches - Deselect First Variant -->
<script>function deselectFirstVariant(){[].slice.call(document.querySelectorAll(".view-item .c-swatches")).forEach((function(item){var thumbnail=document.querySelector(".ProductItem-gallery-thumbnails-item");thumbnail&&thumbnail.click();var button=item.querySelector(".c-swatches__button.is-active");button&&button.classList.remove("is-active");var select=document.querySelector('select[data-variant-option-name="'+item.getAttribute("data-option")+'"]');select&&(select.selectedIndex=0,select.dispatchEvent(new Event("change")))})),[].slice.call(document.querySelectorAll(".view-item .variant-option-title")).forEach((function(title){title.removeChild(title.children[0])}))}setTimeout(deselectFirstVariant,150)</script>
<!-- end Plugin Swatches - Deselect First Variant -->
