Cart 'note' field doesn't pass value to checkout?

[WillatSH]

Hi there,

Site details:
- thematgroup.com.au (I've hidden the notes field with css while I work on this issue, but it's there in the html)
- theme: Empire 5.xx (pixel union)

I have something very annoying happening where when I turn on the `note` field on the cart page (via customize -> cart -> show note field checkbox), the notes entered are then not being passed to the checkout? Here is the cart html:

<form action="/cart" method="post" aria-label="cart checkout" data-hs-cf-bound="true">
 ...
            <div class="cart-ordernote">
              <span class="cart-ordernote-heading">Enter a gift note or special delivery instructions below:</span>
              <div class="form-field">
                <textarea class="form-field-input form-field-textarea" name="note" id="cart-note">TEST NOTE</textarea>
                <label class="form-field-title" for="cart-note">Special instructions</label>
              </div>
            </div>
...
</form>

And when you check the serialised data on the checkout page - the value is not there:

<div data-serialized-id="graphql" data-serialized-value="
...
"note":{"customAttributes":[],";message":null,"__typename":"Note"}, 
...
></div>

Also when you click back to the cart page, the note doesn't repopulate.

I've tried this on another shop I look after and it works as you'd expect - so I know this should work where the notes field contents gets passed through and shows up in the checkout serialised data.

There doesn't seem to be duplicate note form fields on the page - so has anyone had this before? Any pointers as to what could be blocking it? Any help is greatly appreciated!

[Cedcommerce]

Hello @WillatSH,

We understand. That’s quite annoying. However, we have got the fix for you. 

For your information, you can't add multiple forms in a single cart page, rather you can just use the below-provided code and paste it inside the liquid form tag of cart page.

Code:-

<div class="cart-ordernote">

   <span class="cart-ordernote-heading">Enter a gift note or special delivery instructions below:</span>

   <div class="form-field">

      <textarea class="form-field-input form-field-textarea" name="note" id="cart-note">TEST NOTE</textarea>       <label class="form-field-title" for="cart-note">Special instructions</label>

   </div>

</div>

Hope it helps. Let us know if you need any further help with this. 

All the best,

CedCommerce

[WillatSH]

Hi CedCommerce,

Thanks for taking the time to reply to me - unfortunately I'm not sure what you are trying to explain - do you mean there can't be more than one form on the cart page? That doesn't sound correct to me as they should be in their own scope. I can see that there are two forms that seem to post to itself like so:

```
<form action="/cart" method="post" aria-label="cart checkout" data-hs-cf-bound="true">
```

However I tried removing the one in the footer and it still won't pass the note field. Also why does everything else seem to be passed but not that?

I just tried it with the base Debut theme and it worked as expected so it's obviously something to do with the Pixel Union Empire theme and possibly the Shopify platform changing - I guess something JavaScript related as it's very hard to see or find... Ugh!

I can see many other people have similar issues as well over the years - but not much information on how to actually fix it?

[WillatSH]

Ok narrowed it down more, the passed named parameter on the submit button ' name="checkout" ' looks like it triggers a server side redirect to checkout, however does not save the note field.

So this will post to itself and save the notes field:

<form action="/cart" method="post" aria-label="cart checkout"  data-hs-cf-bound="true">
  <textarea class="form-field-input form-field-textarea form-field-filled" name="note" id="cart-note">Works</textarea>
  <button class="button-primary mdc-ripple-surface mdc-ripple-upgraded" type="submit" aria-label="Checkout">Checkout</button>
</form>

This also posts to it self but gets redirect to /checkout and does not save the note field:

<form action="/cart" method="post" aria-label="cart checkout" data-hs-cf-bound="true">
<textarea class="form-field-input form-field-textarea form-field-filled" name="note" id="cart-note">Doesn't work</textarea>
<button class="button-primary mdc-ripple-surface mdc-ripple-upgraded" type="submit" aria-label="Checkout" name="checkout">Checkout</button>
</form>

Anyone at Shopify know about this? Can anyone explain why the top one works but the bottom one does not?

[Cedcommerce]

Hello @WillatSH, 

There is already a cart form available in the cart section, so you don't need to use the form tag again. You can simply put the rest of the code inside the current form.

Check the below image. 

image.png

There is already a cart form available in the cart section, so you don't need to use the form tag again. You can simply put the rest of the code inside the current form.

Also, could you check if there is an option to add cart notes from the theme customization setting?

If you still find it difficult to resolve, please connect with us, and we will help you resolve your store issues. 

All the best, 

CedCommerce

[WillatSH · Accepted solution]

CedCommerce: While I appreciate you trying to help, I don't think you have been following along with my issue - because I found the problem and it's not a matter of finding the form and pasting in your code or multiple forms (this works fine).

The problem for me was with the submit button:

<form action="/cart" method="post" aria-label="cart checkout" data-hs-cf-bound="true">
  <textarea name="note" id="cart-note">Fails</textarea>
  <button type="submit" aria-label="Checkout" name="checkout">Checkout</button>
</form>

Specifically this part: '<button type="submit" name="checkout"...' - for what ever reason this won't save the note field (and probably the rest of the form) but it does redirect.

But this does save the form and also redirect to the checkout page:

<form action="/cart" method="post" aria-label="cart checkout"  data-hs-cf-bound="true">
  <input type="hidden" name="checkout" />
  <textarea name="note" id="cart-note">Works</textarea>
  <button type="submit" aria-label="Checkout">Checkout</button>
</form>

I've just checked this against other themes and swapping the button out for this also seems to work:

<input type="submit" name="checkout" value="Check Out">

Fun times.