Liquid, JavaScript, themes, sales channels
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.
Solved! Go to the solution
This is an accepted solution.
Hi @Anonymous,
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!
This is an accepted solution.
Hi @Anonymous,
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!
This is an accepted solution.
Hi @Anonymous,
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!
Thank you so much! That worked perfectly 🙂
@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.
This is an accepted solution.
Hi @Anonymous,
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 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!!!
Hi @Anonymous,
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!
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024