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

[ayeshasantos]

Hello, 

I added a line item property ( to collect text for product customization) to my product page template. I would like this to be mandatory before adding to cart as well as for this to show up in the cart . 

I'm using the Palo Alto theme. 

This is the link to my store. Please help!

https://3nl26d7d07ztsby9-45398425759.shopifypreview.com

[Keshan97]

AyeshaSantos,

If you share the exact URL of the product customization page, I will be able to help you.

[ayeshasantos]

Thanks so much!

Here it is : 

https://3nl26d7d07ztsby9-45398425759.shopifypreview.com/products/along-for-the-tide-wedding-invitati...

[Keshan97]

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 <script> 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!

[ayeshasantos]

Hey Keshan, 

Thanks so much for this! I'm looking in the product.liquid section but cant seem to find that section ID 

[Keshan97]

Hey Ayesha,

Try to find the ID of the text field and "Add to Cart" button and replace it accordingly. 

[EasifyApps]

Hi @ayeshasantos,

A simpler solution for you would be to utilize the Easify Product Options app (free version) to create a required Text field (using either Text Box or Text Area) and add it into your products 🤗.