Hello Everyone!
I am using Shopify Dawn Theme. I have added the field to the product page by coding. But I want the customer must fill the fields before clicking the add to cart button, Is it possible? Thank you in advance.
Store: https://puppies-paws-shop.myshopify.com/products/comfortable-fashion-adjustable-tuxedo-bow-ties-pet-saliva-towel-formal-tie-bow-tie-collar-dog-necktie
Password: Admin
I have used this code:
{% assign field_label = " Name" %}
{% assign min_characters = 0 %}
{% assign max_characters = %}
{% assign placeholder_text = “” %}
{% assign required_field = false %}
{% assign spellchecker = true %}
{% assign hide_checkout = false %}
{% assign regular_expression = “*$” %}
{% assign expression_title = “The following values are not allowed < > { }” %}
{% assign validation_type = “key” %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
{{ field_label }}
0 %}maxlength="{{ max_characters }}"{% endif %}
placeholder="{{ placeholder_text }}"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
value="{{ value | escape }}"
title="{{ expression_title }}"
{% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %}
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}
{% if spellchecker %}spellcheck="true"{% endif %}
data-validation-type="{{ validation_type }}">
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
.product-form__input input[type='text'] {
cursor: text;
}
Great, How can I fix this?
Please help me. Thank you.
Hello @dreamtechzone_5
you need to make every field "required "
You can use an HTML tag with the required attribute to make the field mandatory. For example:
e.g:-
Please let me know
Thanks
Where should I paste this code?
I want, If the fields are not filled, the add to cart button cannot be clicked.
Hi @dreamtechzone_5
You can try my code in your console
Step 1: Access the product page
Step 2: Press F12 and then click console
Step 3: Copy the code below into the console and then press “Enter” to execute the code
const buttonAddToCart = $('[action="/cart/add"] button[type="submit"]')
var clonedElement = buttonAddToCart.cloneNode(true);
buttonAddToCart.style.display = "none"
clonedElement.style.maxWidth = "44rem";
$('[action="/cart/add"]:has(button)').after(clonedElement)
clonedElement.addEventListener("click", () => {
let check = false;
// check input value here
// add your code here
// if all input is valid => check = true
if (check) {
buttonAddToCart.click();
} else {
console.log("input is invalid")
}
})
Step 4: Click to button “add to cart”. You can see that the product cannot be added to the cart
Step 5: Add your validation code into “//add your code here”
Watch my video for more details: https://www.loom.com/share/e551e38ae43c49ecbfbe2176107bf78d?sid=57846227-9c3e-480a-a63e-086b5126527c
if you have any question, let me know.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
