Solved

Why are additional checkout fields not working in Shopify Plus?

honeysbadgers
New Member
5 0 0

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

 

 

 

 

 

 

 

 

Accepted Solution (1)

KikeMelero
Tourist
4 1 1

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!

View solution in original post

Replies 6 (6)

KikeMelero
Tourist
4 1 1

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!

honeysbadgers
New Member
5 0 0

@KikeMelero 

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

rbnhmll
Shopify Partner
4 0 3

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?

strocode
Shopify Partner
8 1 4

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

Chakradhar
Visitor
1 0 0

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

AdiMem
Shopify Partner
1 0 0

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?