How to Update cart.note in side of checkout.liquid

[Kren1221]

I have a Shopify Plus account. Inside of the checkout.liquid file I have this snippet that captures the gift message in the checkout page: 

<div class="cart-notes-form"> 
 <textarea class="cart-notes-textarea{% if checkout.note != blank %} disabled{% endif %}" placeholder="Enter gift note here." value="{{checkout.note}}" name="checkout[note]" data-cart-notes-textarea maxlength="160">{{ checkout.note }}</textarea>
 <button class="cart-notes-submit" data-cart-notes-submit type="submit">Add Gift Message</button>
 <span class="cart-notes-textarea-counter" gift-note-character-counter> 0 / 160 remaining</span>
</div>

 Here's the AJAX call to make a POST request to the /cart/update.js: 

      $('body').on('click', '[data-cart-notes-submit]', function (event) {
        var giftNoteMassage = $('[data-cart-notes-textarea]').val();
        event.preventDefault();
        
        saveCartNote(this);

        if (giftNoteMassage.length > 0) {
          updateGiftNotes(giftNoteMassage)
        }  
      });

  function updateGiftNotes(note) {
    $.ajax({
      url: '/cart/update.js',
      method: 'POST',
      data: {note: note},
      success: function(result) { 
        // page refresh needed after POST request or note update won't persist in /cart/update.js
        window.location.href=window.location.href
        return result;
      },
      error: function(jqxhr, status, exception) {
          console.log(exception);
      }
    }); 
  }

So this is working. but I noticed that when the page has to refresh after the AJAX call or the cart.note won't be updated (in the snippet above I used window.location.href=window.location.href to refresh the page).

Is there a way that I could update the cart.note from within the checkout page without refreshing? This is ideal because I've noticed that the input fields in the address form will be cleared out after the page refresh, and it's not a good user experience. Any suggestion or alternative solution is appreciated. 

[Simon_M]

Bump! Would be good to know the answer to this.

Wondering if using this function would help, as it "... is triggered when the page is still the same, but sections have been “re-painted” (ie. the discount form is submitted)." (reference: https://shopify.dev/docs/themes/files/checkout-liquid)

🙂

$(document).on(`page:load page:change`, function() {
  // add content
});

[aklikk]

Any luck with this? Support is less than useful:

"Micah here, the Shopify Plus Support Specialist you spoke to yesterday regarding the API inquiry you had about your attributes reverting back when proceeding to the next step of the checkout process. Apologies on the delay in my response, I have been out of the office until this afternoon due to some health concerns.

After relaying that your call was never working in the first place to our developers, they confirmed that they only support the troubleshooting of API issues if the calls being actioned were working as intended, but stopped working without any additional changes."

I mean, what the hell is this response?

[hgoldwire]

Instead of making an AJAX request to /cart/update.js, I had success adding the textarea input to the existing checkout form, like below.  Seems to handle all the cases we're interested in:

• no need to reload page
• changes preserved across checkout steps
• changes also preserved if you navigate back to Cart

<script>
       
  Checkout.$(document).on('page:load', function() {
    let cart_note_input = '<textarea name="checkout[note]" placeholder="Enter gift note here." value="{{checkout.note}}" data-cart-notes-textarea maxlength="160">{{ checkout.note }}</textarea>'
    Checkout.$('form.edit_checkout').append(cart_note_input)    
  });
  
</script>

[herolabs]

THANK YOU!!!!!! This should be in the docs somewhere; the references for checkout are so poor, especially for Plus customers. 

[skillmatic]

Bump, also having this issue when trying to update cart attributes in checkout.liquid. The changes are not persisting to the next step.

What is the solve here?