Help making a line item property mandatory before adding product to cart

Shopify Discussion
4

Hey there!

If you’re looking to disable the “Add to Cart” button on your website when a specific form field is empty, you’re in the right place. I’ll walk you through how to achieve this using JavaScript.

Firstly, let’s understand the code:

document.addEventListener("DOMContentLoaded", function() {
    var formField = document.querySelector("#Form-template--16763930968223__main-line_item_property_JYe4Wy");
    var addToCartButton = document.querySelector("#AddToCart--template--16763930968223__main");

    formField.addEventListener("input", function() {
        if (formField.value.trim() === "") {
            addToCartButton.disabled = true;
        } else {
            addToCartButton.disabled = false;
        }
    });
});

To implement this code, simply add it between tags in the HTML section of the product template where you want this functionality to be applied. Just make sure the HTML section already contains elements with the specified IDs.

Feel free to reach out if you have any questions or need further clarification!