Why aren't checkout.attributes data showing in my Shopify Plus order?

[honeysbadgers]

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 = 
      '' +

          '' +

          '
' + 
            '
'+ 
               ' ' +
            '
' +
            '' +
                ' ' +
            '
' +
          '
' +

          '

Authorised to leave to leave package unattended?

' +
          '' +
          
     '
'; 

                                       
  //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); 
      
    }
  
  }
  
});

[EnriqueMelero]

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!

[honeysbadgers]

@EnriqueMelero

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…

Cheers Tony

[rbnhmll]

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:

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?

[strocode]

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 %}
  
{% endfor %}

The Preserve Cart Attributes section of the docs has more info: https://shopify.dev/docs/themes/theme-templates/checkout-liquid

[Chakradhar]

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.

Customer PO

Regards,

Chakradhar

[AdiMem]

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?