Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi all,
I am working on adding additional fields at checkout for Shopify plus, a little stuck and not sure why the checkout.attributes are not bringing in the data in the order? Just wondering if anyone has knowledge on this or if they can spot where I am going wrong.
I am using local storage and generated the fields with this tool: https://ui-elements-generator.myshopify.com/pages/cart-attribute
$(document).on(`page:load page:change`, function() {
if (Shopify.Checkout.step == 'contact_information'){
//create text input variable
var delivery_note =
'<div class="order_notes left_side">' +
'<label class="notes_label" for="CartSpecialInstructions">Delivery Instructions</label>' +
'<div class="inputs_wrapper">' +
'<div class="yes">'+
'<input id="yes_checked" type="radio" class="yes_input" name="checkout.attributes[Authorised to leave package unattended ]" value="Yes"{% if checkout.attributes["Authorised to leave package unattended "] == "Yes" %} checked{% endif %}> <label>Yes</label>' +
'</div>' +
'<div class="no">' +
'<input id="no_checked" type="radio" class="no_input" name="checkout.attributes[Authorised to leave package unattended ]" value="No"{% if checkout.attributes["Authorised to leave package unattended "] == "No" %} checked{% endif %}> <label>No</label>' +
'</div>' +
'</div>' +
'<p>Authorised to leave to leave package unattended?</p>' +
'<textarea class="note_area" maxlength="80" placeholder="Special delivery instructions (max 80 chars)" name="note" value="" name="checkout[attributes][delivery_note]" id="CartSpecialInstructions"></textarea>' +
'</div>';
//append Purchase Order html content
$(".section--contact-information:first").after(delivery_note);
//listen for changes on the text input
// $('.no_input').prop('checked', true);
var obj_yes = $("#yes_checked").val();
var obj_no = $("#no_checked").val();
$(".yes label").on("click", function() {
$(".yes").toggleClass("active");
$(".no").removeClass("active");
$('.yes_input').prop('checked', true);
$('.no_input').prop('checked', false);
//store value in session storage
sessionStorage.setItem("yes_checked", obj_yes);
sessionStorage.removeItem("no_checked");
});
$(".no label").on("click", function() {
$(".no").toggleClass("active");
$(".yes").removeClass("active");
$('.no_input').prop('checked', true);
$('.yes_input').prop('checked', false);
//store value in session storage
sessionStorage.setItem("no_checked", obj_no);
sessionStorage.removeItem("yes_checked");
});
// Store the yes value
var savedObjYes = sessionStorage.getItem("yes_checked");
if (savedObjYes !== null) {
$("#yes_checked").val(savedObjYes);
$(".yes").addClass("active");
}
// Store the no value
var savedObjNo = sessionStorage.getItem("no_checked");
if (savedObjNo !== null) {
$("#no_checked").val(savedObjNo);
$(".no").addClass("active");
}
// Other
$("#CartSpecialInstructions").change(function(){
console.log("i'm changing");
var obj_delivery = $("#CartSpecialInstructions").val();
//store value in session storage
sessionStorage.setItem("devliery_order_note", obj_delivery);
});
var savedObjDelivery = sessionStorage.getItem("devliery_order_note");
if (savedObjDelivery !== null) {
$("#CartSpecialInstructions").val(savedObjDelivery);
}
}
});
Solved! Go to the solution
This is an accepted solution.
Nice to see a fellow Shopify Plus user digging on the checkout page!
It's not bringing back the data because you are not passing it on the first place I think. The correct name attribute value for checkout inputs that are used to modify the order Note Attributes is checkout[note_attributes]["Your attribute"]
It's working flawlesly on our side.
Cheers!
This is an accepted solution.
Nice to see a fellow Shopify Plus user digging on the checkout page!
It's not bringing back the data because you are not passing it on the first place I think. The correct name attribute value for checkout inputs that are used to modify the order Note Attributes is checkout[note_attributes]["Your attribute"]
It's working flawlesly on our side.
Cheers!
Yeah, there's not much on Shopify Plus checkout, field attributes. But good to see there are others on here diving into Shopify Plus!
Ah, perfect how silly of me I know there was a slight difference with the name="attributes[Your name]" I probably missed this in the documentation. But that's perfect seems to be working fine now with all my attributes! much appreciated and thank you for responding 🙂
For anyone reading this i just added name="checkout[note_attributes][Delivery Note]"
And Radio Buttons like so...
<input id="yes_checked" type="radio" class="yes_input" name="checkout[note_attributes][Authorised to leave package unattended ]" value="Yes"{% if checkout[note_attributes]["Authorised to leave package unattended "] == "Yes" %} checked{% endif %}> <label>Yes</label>
<input id="no_checked" type="radio" class="no_input" name="checkout[note_attributes][Authorised to leave package unattended ]" value="No"{% if checkout[note_attributes]["Authorised to leave package unattended "] == "No" %} checked{% endif %}> <label>No</label>
Cheers Tony
I've been stumped for some time regarding these additional fields in Shopify Plus Checkout. I've been able to add the fields within the Customer Information Form using the following structure:
<input placeholder="Name" autocorrect="off" class="field__input" aria-required="true" type="text" value="" name="checkout[note_attributes][giftName]" id="checkout_gift_name">
However, the actual data never attaches to the order upon completion. Some other posts I read say:
the field must persist across every step
Does anyone have any tips on how to do this?
There is a section in the docs on how to do this. In your checkout modification, you need a hidden input to persist the values of your fields across all steps like this:
{% for attribute in checkout.attributes %}
<input type=hidden name=”checkout[attributes][{{ attribute.first }}]” value=”{{ attribute.last }}” />
{% endfor %}
The Preserve Cart Attributes section of the docs has more info: https://shopify.dev/docs/themes/theme-templates/checkout-liquid
Hi Team,
We are trying to add a note attribute using the following field, in the previously created store we have found cart-template.liquid page under sections module. But in the newly created store we could not find this page. Please help us with this issue.
<p class="cart-attribute__field">
<label for="customer-po">Customer PO</label>
<input id="customer-po" type="text" name="attributes[Customer PO]" value="{{ cart.attributes["Customer PO"] }}">
</p>
Regards,
Chakradhar
I stuck on the same thing as a shopify+ user my note attributes which are hidden on checkout page dont reach to additional details in order page upon complete please tell me if you have found any solution?
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024