Hi, looking for some help
I have recently added a custom field for all my products to allow customers to enter their phone model when buying a phone case. The field works however I want this to be a required field in order for them to add it to their cart.
I have entered the following code (from Shopify UI Elements Generator) which I was under the impression would make entering text in that field mandatory, however it doesn't and still lets you add the product to your basket.
<label for="your-phone-model">Your Phone Model</label>
<input required class="required"id="your-phone-model" type="text" name="properties[Your Phone Model]">
My site is www.propericonic.co.uk or proper-iconic.myshopify.com
Can anyone help?
Sorry can't provide code for this but can explain why it's not working.
Actually you have ajax enabled on 'add to cart button' but that ajax call doesn't check either there is value in field or not. To make it as you want there is 2 ways.
1) Disable ajax if there is an option in your theme to do this.
2) Check your ajax call and before perform the add to cart action return validation error so user can't proceed with blank input.
Another issue in your store is when 'add to cart' button clicked header cart counter not updated but once you reload the page cart counter display there.
Explanation for point 2, when ajax code run write your own code to check the value of input you added. And if input is blank show error message and if there is value leave it as it is working.
You can find code in theme.js
For cart counter, After 'add to cart' check console. You will find this error highlights there 'Uncaught TypeError: Cannot read property '$cartCount' of undefined' When this error fixed cart counter will start working as it was.