How do I make use of the order fields In Commerce? Building on top of the Commerce Example Templates. I've made an order field called 'Customer Reference'. I'm submitting data like this:

&lt;form class="shopForm" method="POST"&gt;
&lt;input type="hidden" name="action" value="commerce/cart/updateCart"&gt;
&lt;div class="field"&gt;
    &lt;label for="fields[customerReference]"&gt;Your Reference: {{cart.customerReference}}&lt;/label&gt;
    &lt;input type="text" name="fields[customerReference]" value=""&gt;
&lt;/div&gt;
&lt;input class="btn btn-outline" type="submit" value="Update Reference"&gt;




This code seems to work ok. But after updating the cart the data doesn't seem to be saved, it doesn't show up in the Commerce back end. I'm also not able to be display the data later on in the ordering process, on the receipt for example.

I'm using this to display the data from the field:

{{cart.customerReference}} or {{order.customerReference}}


Can somebody tell me, possibly with some examples, how to properly submit and retrieve the content for custom order fields?

This is related to: How can I update custom order fields in the frontend

Working with: mamp
The text that is submitted using your &lt;input&gt; field will display as expected with Your Reference: {{ cart.customerReference }}. 

However, I have a feeling that because the page is re-rendered with the inputs value as empty, when the /updateCart action is submitted again the blank value will override and erase the old value.

To solve this use the customerReference stored on the cart in the value attribute of your text &lt;input&gt;.

&lt;input ... value="{{ cart.customerReference|length ?? cart.customerReference }}"&gt;