Gift notes not being added to order notification email

[MGWIT]

Hi all

We are not receiving the "notes" int the order notifications email from the gift wrap section of our website, as these go to a 3rd party for fulfilment they need to know what the customer adds in the gift wrap section

here is the code on the cart page related to the gift wrap

<div class="gift-col-1-2">
		<p>
			<label style="display: block; margin: 0 0 15px;" for="gift-note">add gift message</label>
			<textarea class="field" style="width: 100%;" name="attributes[gift-note]" id="gift-note" maxlength="80">{{ cart.attributes.gift-note }}</textarea>
        </p>
      </div>

And here is the code for the notification email

  {% unless note == blank %}
 <p><b> Message: {{ note }} </b></p>
  {% endunless %}
 {% unless attributes.gift-note == blank %}

Any help would be greatly appreciated

[MaxDesign]

Hi there,

There are cart notes and cart attributes, those are 2 different things. What you're using is a cart attribute.

Cart notes may look like that in your html and should include the same name attribute as below (only one per cart):

<textarea name="note">{{ cart.note }}</textarea>

You can have multiple cart attributes though, it may look like that:

<textarea name="attributes[gift-note]">{{ cart.attributes['gift-note'] }}</textarea>

Also, I don't think you are allowed to do {{ cart.attributes.gift-note }} since there's a dash. I could double check, but just write it down the way I did in my example, this could be part of your problem.

You should make sure that those fields are inside the cart <form> tag, and if not, that they have a form attribute with the <form> id as value, otherwise they will just be ignored. More on that: the form attribute lets you associate a form element to a <form> anywhere in the document, not just inside a <form>. It can also override an ancestor <form> element. Some examples.

Once you have checked that, you can also check how your theme submits the cart form. Most themes will not interact and let the form submit natively. Some themes will use javascript and submit the form using the new FormData object. You can verify if this FormData contains all the inputs you need, with a console.log such as this:

console.log(Object.fromEntries([...formData.keys()].map(key => [key, formData.getAll(key)])))

Some themes may also do some weird stuff to submit the cart, or some apps may override the theme behaviour and submit the cart in their own fashion, you have to dig in this case. 

Anyways, you can easily check if the attribute is correctly submitted by checking the following url endpoint (no need to test order):

https://your-shopify-domain.myshopify.com/cart.json

[MGWIT]

Hi Max

Thank you for the response, so should the final code on the website simply be

<div class="gift-col-1-2">
		<p>
			<label style="display: block; margin: 0 0 15px;" for="cart.note">add gift message</label>
			<textarea name="note">{{ cart.note }}</textarea>
        </p>
      </div>

 Then for the email notification

  {% unless note == blank %}
 <p><b> Message: {{ note }} </b></p>
  {% endunless %}
 {% unless cart.note == blank %}

 Thank you in advance