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

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

ayeshasantos
Shopify Partner
5 0 3

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

Replies 6 (6)

Keshan97
Shopify Partner
72 9 23

AyeshaSantos,

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

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
Keshan97
Shopify Partner
72 9 23

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!

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com
ayeshasantos
Shopify Partner
5 0 3

Hey Keshan, 

 

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

Keshan97
Shopify Partner
72 9 23

Hey Ayesha,

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

Best Regards,
Keshan Vishwajith
Shopify Certified Theme Developer
Feel free to drop me an email
www.loomod.com

EasifyApps
Shopify Partner
635 19 47

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 🤗.

EasifyApps_0-1711447246170.png
EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support