How to make this line item required to add product to cart?

Solved
TipsyHues
Excursionist
36 2 6

I figured out how to add a line item for personalization to a specific product page, and it works fine, but even after adding the 'required' attribute, it still allows me to add to cart without filling in any text. How can I fix this?

 

This is the page with the input that needs to be required: https://tipsyhues.com/collections/shop/products/personalized-shadow-box

 

I did remove the id required attribute because it didn't work anyway.

Accepted Solutions (2)

Accepted Solutions
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @TipsyHues,

I checked and your add to cart works with ajax so it won't be able to check required.
So if you want it to work on this product page you need to do the following steps:
- Step 1: Add required for input. Refer https://i.imgur.com/hSjO12H.png 
Code:

<input id="personalization" type="text" name="properties[Text]" required="">

- Step 2: Find 'add_to_cart' button, remove 'ajax-submit' class and change type="button" => type="submit"
https://i.imgur.com/Twzjzsn.png 
Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @TipsyHues,

With buy now button you need to add JS for it, this will be more complicated requirement.

Or simply remove it, find 'form | payment_button' and remove code: "{{ form | payment_button }}"

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 7 (7)
LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @TipsyHues,

I checked and your add to cart works with ajax so it won't be able to check required.
So if you want it to work on this product page you need to do the following steps:
- Step 1: Add required for input. Refer https://i.imgur.com/hSjO12H.png 
Code:

<input id="personalization" type="text" name="properties[Text]" required="">

- Step 2: Find 'add_to_cart' button, remove 'ajax-submit' class and change type="button" => type="submit"
https://i.imgur.com/Twzjzsn.png 
Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

TipsyHues
Excursionist
36 2 6

Thank you so much! That worked perfectly

TipsyHues
Excursionist
36 2 6

@LitCommerce any idea how to get the Buy It Now button to do the same? It still allows purchase and bypasses the input requirement. I would simply disable it, but with the Artisan theme it adds a fixed Add to Cart button when you disable the Buy it Now button.

LitCommerce
Trailblazer
288 71 72

This is an accepted solution.

Hi @TipsyHues,

With buy now button you need to add JS for it, this will be more complicated requirement.

Or simply remove it, find 'form | payment_button' and remove code: "{{ form | payment_button }}"

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

TipsyHues
Excursionist
36 2 6

@LitCommerce I found {{ form | payment_button }}, but wouldn't removing that also remove the Buy it Now from all the other product pages? All the different product templates I have pull from the same 'product-form' ..........

 

GUESS WHAT!? As I was typing that, it hit me - Make a duplicate product form just for that one product and change that product template to render the duplicated and altered form. Now only that product does not show a Buy it Now button while the others still do

 

THANK YOU!!!

LitCommerce
Trailblazer
288 71 72

Hi @TipsyHues,

Is it in a separate product-form file? Or in the template you just created. If it's in a separate product-form file, you need to create a new product-form file, copy everything and make changes to the new file.

Hope it helps!

 

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
TipsyHues
Excursionist
36 2 6

Yes, I made a separate product-form so now I have two. Default products render the original form, the custom product renders the new form.