Shopify Plus Checkout

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

 

 

 

 

 

 

 

 

0 Likes
KikeMelero
Tourist
4 1 0

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!

0 Likes
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

0 Likes
rbnhmll
Tourist
3 0 1

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?

0 Likes
strocode
Shopify Partner
5 1 1

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

0 Likes