Disabling Add to Cart button with querySelector isn't working

Viewed 28

Both the lines below don't seem to be doing anything. This used to be working fine without any issue. I tried getElementsByClassName as well without any luck.

document.querySelector(".product__swatches").style.display = "none"; 
document.querySelector(".button--addToCart").disabled = true;

The entire block of code is as follows.

{% if template contains "product" and product.handle contains "add-a-custom-logo" %}
    if (getCookie(customLogoCookie) == "1") {
      let myInterval = setInterval(function() {
        const customLogoOptionSetId = "hulkapps_custom_options_6947439312956";  // Fixed id
        let customLogoSelector = document.getElementById(customLogoOptionSetId);
        if (!customLogoSelector) {
          return;
        }
        clearInterval(myInterval);

        // Hide the custom options. We need to go 3 levels up.
        customLogoSelector.style.display = "none";

        // Add text to indicate logo has been added
        customLogoSelector.insertAdjacentHTML("beforebegin", "<div class='product__description'><p><strong>You have already added a Custom Logo / Design Card to this order. To edit the logo, go to your cart. Select Edit Options beneath your uploaded file and choose the correct file. If you want to change the design card, please delete the design card from the cart and come back here to choose a different design card</p><p>If you'd like to purchase more gifts with a different logo, please place a separate order.</strong></p></div>");

        // Disable add to cart button and hide Swatches.
        document.querySelector(".product__swatches").style.display = "none"; 
        document.querySelector(".button--addToCart").disabled = true;
      }, 200);
    }
{% endif %}
0 Answers
Related