Making a custom field mandatory on a product page

Highlighted
New Member
1 0 0

Hello,

 

I am launching a store to sell flower subscriptions and I need to have date picker on my product page in order to allow my customers to choose the exact date for the initial delivery for their subscription. Here is my product page: https://tulpenabo.de/products/tulpen-vorausbezahltes-abonnement?variant=29370290470981

 

I have followed this tutorial for creating the date picker: https://help.shopify.com/en/themes/customization/cart/add-date-picker-for-delivery-dates.  I have customised it so that only certain days of the week are available as options.

 

I have also added the required attribute to the code based on how the IU elements generator creates it (https://ui-elements-generator.myshopify.com/pages/line-item-property) as well as how the HTML Input attributes would dictate it:

 

<p class="line-item-property__field">
<label for="date">Bitte wählen Sie Ihren ersten Liefertermin aus</label>
<input id="date" type="text" name="properties[Ersten Liefertermin]" required data-error="Please tell us your info. " value="{{ cart.attributes.date }}"/>
<span style="display:block" class="instructions"> Sie können Ihren ersten Liefertermin auf frühestens 5 Tage und bis spätestens 30 Tage ab dem Datum Ihrer Bestellung festlegen.</span>
</p>

 

or

 

<p class="line-item-property__field">
<label for="date">Bitte wählen Sie Ihren ersten Liefertermin aus</label>
<input id="date" type="text" name="properties[Ersten Liefertermin]" value="{{ cart.attributes.date }}"/ required>
<span style="display:block" class="instructions"> Sie können Ihren ersten Liefertermin auf frühestens 5 Tage und bis spätestens 30 Tage ab dem Datum Ihrer Bestellung festlegen.</span>
</p>

 

Unfortunately neither method delivers the required result.  A visitor can continue to the checkout page without filling out the delivery time field.

 

Do you have any suggestions of what I'm doing wrong?

 

Thanks!

0 Likes
Explorer
195 38 45

Hello Tulpenabo,

If nothing works use custom js on click of button and check either input have value or not.
In this way you can return true and false accordingly.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
If helpful then please Like and Accept Solution.
If you happy and want to donate small, click here: Paypal
0 Likes