Solved

Why aren't mandatory fields showing on my Shopify cart form?

ecoWeb
New Member
12 0 0

Hi,

I need some help with cart attribute option on cart page.

In my store here - https://flowershopnz.myshopify.com/admin

I want to have these fields mandatory – Delivery Date. And Delivery Instruction as below. It is showing ok on the website but when I tested it the text customers put in the boxes don't come through to the order form.

imageimage

This is how and where I added the codes.

Screen Shot 2020-06-19 at 5.55.55 PM.png

It did show once here in the order form but it disappears.

Screen Shot 2020-06-19 at 5.57.18 PM.png

 

 

on my second test it came up like this

Cart_exist

true

Screen Shot 2020-06-19 at 5.58.30 PM.png

 

This is my coding

 <div class="cart__footer">
        <div class="grid">
          {%- if section.settings.cart_notes_enable -%}
            <div class="grid__item medium-up--one-half cart-note">
           <p class="cart-attribute__field">
  <label for="delivery-date">Delivery Date</label>
  <input id="delivery-date" type="text" name="attributes[Delivery Date]" value="{{ cart.attributes["Delivery Date"] }}">
</p> <p class="cart-attribute__field">
  <label for="delivery-instruction">Delivery Instruction</label>
  <input id="delivery-instruction" type="text" name="attributes[Delivery Instruction]" value="{{ cart.attributes["Delivery Instruction"] }}">
</p>
              <label for="CartSpecialInstructions" class="cart-note__label small--text-center">Complimentary Gift Card Message</label>
<textarea name="note" id="CartSpecialInstructions" class="cart-note__input" data-cart-notes="">{{ cart.note }}</textarea>
          </div>
          {%- endif -%}
          <div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">
 
            {%- assign cartDiscounts = 'template ' | split: ' ' -%}
            {%- if cart.cart_level_discount_applications.size > 0 -%}
              {%- assign cartDiscounts = cart.cart_level_discount_applications -%}
            {%- endif -%}
            <div{% if cart.cart_level_discount_applications.size == 0 %} class="hide"{% endif %} data-cart-discount-wrapper>
              <div class="order-discount-card-wrapper" data-cart-discount>
                {%- for discount_application in cartDiscounts -%}
                  <span class="order-discount order-discount--title order-discount--cart">
                    {% include 'icon-saletag' %}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span><span data-cart-discount-title>{{- discount_application.title -}}</span>
                  </span>
                  <span class="order-discount order-discount--cart order-discount--cart-total">
                    -<span data-cart-discount-amount>{{ discount_application.total_allocated_amount | money }}</span>
                  </span>
                {%- endfor -%}
              </div>
            </div>
 
 
Please let me know if you guys can help.
 
Thank you
 
Accepted Solution (1)
dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

Hey there,

3 things I have done:

1) Delivery date and Delivery instructions both fields are required now

2) Added Delivery date message as you said

3) Tested with 2 orders both orders have Delivery information.

 

Please check these screenshots.

date-message-added.jpg

 

first-test-order-1027.jpg

 

second--test-order-1028.jpg

 

Hope this works for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 24 (24)

dmwwebartisan
Shopify Partner
12282 2546 3694

HI

please email me your theme zip file or staff account details because this a code customization work.

I will try to solve your problem.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey there,

As you shown in screenshots Order:1021  have delivery information and for the Order: 1024 , it's not showing.

These are different orders and maybe customer has entered delivery information in 1021 not with 1024.

As you said you need that both field required fields so you have to do code like following.

This is just an example:

<p class="cart-attribute__field">
  <label for="delivery-instructions">Delivery Instructions</label>
  <input required class="required" id="delivery-instructions" type="text" name="attributes[Delivery Instructions]" value="{{ cart.attributes["Delivery Instructions"] }}">
</p>

see above requried class and required rest seems fine. Please correct and let me know if it works.

If you need me to do that using your staff access then let me know. I have access.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

Hi,

Thanks for your reply.

both of the orders in the above post are my test orders and I did put in the details on both orders but it didn't come through on the second one.

It seems like it works for the first time but somehow it doesn't work anymore.

Can you help updating the code to make it required field?

 

I also want to add (No Sunday order) next to Delivery Date.

I really appreciate your help!

 

dmwwebartisan
Shopify Partner
12282 2546 3694

Okay, I think it must be required fields. How can I test ?

Also Do you want me to work on shop directly via shop access that you have given ?

"No Sunday order" This just a text or a new field ?

 

Let me know.

 

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

Hi,

 
Thank you so much for your help.
 
Yes if you can work with the access I gave you that would be great.
 
I can enable test mode now until you are done.
 
You know you can put in test using 4242 4242 4242 4242 as a Visa card?
 
And yes No Sunday Order is a text I would like to include besides the Delivery Date. Actually I want to include 'No Sunday order except for Mother's day and Valentine's day' if possible.
 
Thank you so much!
robin_ca
Shopify Partner
56 8 13

Hi ecoWeb, 
Its pretty simple, 

Please make both fields required and make sure those are inside form tag.

Moreover make value as empty value="" | nothing between commas, 

And please test it. 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
ecoWeb
New Member
12 0 0

Thanks Robin but I'm not that skilled with this so I hope 

 

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @ecoWeb ,

Sorry for delay. Sure I will check and fix this and put that text message and get back to you as soon as possible.

I will get back to you with update soon. I will access your shop and correct it.

 

Thanks again!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

Thank you so much.

 

I put the website in test mode so please let me know when it is done so I can put it back to normal mode.

 

Many thanks!

dmwwebartisan
Shopify Partner
12282 2546 3694

This is an accepted solution.

Hey there,

3 things I have done:

1) Delivery date and Delivery instructions both fields are required now

2) Added Delivery date message as you said

3) Tested with 2 orders both orders have Delivery information.

 

Please check these screenshots.

date-message-added.jpg

 

first-test-order-1027.jpg

 

second--test-order-1028.jpg

 

Hope this works for you.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

Thank you so much for your help!

 

This is awesome!

 

I really appreciate it.

 

Have a fantastic day!

 

Regards,

 

dmwwebartisan
Shopify Partner
12282 2546 3694

Please Like and Accept as solution. This is cost of my time. 🙂

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

I have one more request if this is still open.

 

I just got an order but the customer didn't put in delivery note and still managed to put in the order.

 

Also, I noticed that actually we have some customers who will come pick up the flowers.

 

Is there a way to put these Required field boxes under Delivery method on Checkout page?

 

Otherwise, I will need to add another option to tick Pick up or Shipping? which will be duplicate info with the next checkout step though.

 

Do you have any suggestion?

 

ecoWeb
New Member
12 0 0

Hi,

 

I've just done a test and it looks like the fields are not working as a Required Fields when customer choose these Additional options. 

 

Is it possible to overwrite it?

Screen Shot 2020-06-24 at 8.23.50 AM.png

ecoWeb
New Member
12 0 0

I've received two more orders today from customers and both of them have not put in delivery dates.

 

Can you please review it again?

 

Many thanks!

Screen Shot 2020-06-24 at 12.57.40 PM.pngScreen Shot 2020-06-24 at 12.57.54 PM.png

dmwwebartisan
Shopify Partner
12282 2546 3694

You mean when you fill up additional option from product page, devliery fields are not working ?

That is strange because if code is requied there then required should work.

I will try to check and let you know.

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
ecoWeb
New Member
12 0 0

Thank you so much. Yes, that's exactly what I meant.

Please let me know what you can find.

Much appreciated!

QianKu
Visitor
3 0 0

Hi, 

Just wondering if you end up solving your problems because I am having the same exact problems!

ecoWeb
New Member
12 0 0

No, I couldn't fix it.

Still having the issue.

 

 

JoeRam
New Member
5 0 0

Hi EcoWeb, I have exactly the same problem. Have you fixed it? 

And also, were these extra fields (Delivery date and message etc) being shown on the email order confirmation ?

Thanks

ps; I also setup florist store in Melbourne but find that shopify is a bit frustrating, even a small basic feature is not supported specially for florist store

oscarbear
Visitor
3 0 0

i know this is old but i found this post to be very informative on making those text boxes mandatory.  You have to remove the novalidate from the form so its mandatory. The only issue i have now is that for every item in the cart it asks the same questions.

 

i posted the link to were i found it helpfull.

 

https://community.shopify.com/c/shopify-design/need-help-creating-a-required-dropdown-field-on-the-c...

amandak
Shopify Partner
14 0 1

You could try the Infinite Options App from HulkApps. I use the free version and I'm able to make ribbon color, crinkle color, gift message required on the product page. If you don't mind your delivery dates there instead of in the cart, it is an easy, feasible option. It then shows up on the cart and checkout page for review.

dmwwebartisan
Shopify Partner
12282 2546 3694

Please remove test order after confirmation.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Tim_Gist
Explorer
92 2 8

@ecoWeb 

Giftship provides this solution out-of-the-box, allowing each of it's gifting features including Delivery Date picker and Gift Messages able to be set as mandatory. The Delivery Date picker also offers very dynamic optionality in terms of configuration. Lead times, blocking out dates, etc. https://apps.shopify.com/giftship