Gift Message at Checkout

New Member
6 0 0

Hello,

 

I am trying to implement a gift message box at checkout under the customer-information section. The whole idea is that a customer will be able to input a custom message after typing in shipping details.

 

Problem: After inserting a custom message and placing an order, the order does not contain any customer notes in the order details. 

 

This is how I implemented.

 

1. Modification of checkout.liquid:

 

Inserted jquery above <head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Text box code:

<div class="checkbox-container" data-gift-note-html>
  <h2 class="section__title" style="margin-bottom: 1em">Gift Options</h2>
  <input type="checkbox" class="input-checkbox" id="gift-message">
  <label for="gift-message">  <img src="https://cdn.shopify.com/s/files/1/1154/7838/t/2/assets/giftbox-icon.svg?15220141244123693282"> <span>Gift Message</span></label>
  <div id="msg_text">
    <textarea class="field__input" placeholder="Enter gift note here..."></textarea>
    <br />
    <div class="og_btn add_msg">Add Gift Message</div>
    <div class="og_btn edit_msg">Edit Gift Message</div>
  </div>
</div>    

 

Javascript callout before the closing of </body> tag:

{{ 'checkout_script.js' | asset_url | script_tag }}

Style of text box after closing of </html> tag:

<style>
#msg_text {
  display: none;
  padding-top: 1.5em;
}
#msg_text textarea {
  height: 150px;
}
#msg_text textarea.note_saved {
  resize: none;
}
.checkbox-container {
  padding-top: 1.5em;
}
.checkbox-container label {
  cursor: pointer;
  padding-top: 1.5em;
}
.checkbox-container input[type=checkbox]:checked ~ #msg_text {
  display: block;
}
.og_btn {
  display: inline-block;
  border-radius: 4px;
  font-weight: 500;
  padding: 1.4em 1.7em;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background: #222;
  color: white;
}
.og_btn:hover {
  background: #090909;
  color: white;
}
.edit_msg {
  display: none;
}
</style>

 

Final of checkout.liquid:

<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
    <meta name="referrer" content="origin">

    <title>{{ page_title }}</title>

    {{ content_for_header }}

    {{ checkout_stylesheets }}
    {{ checkout_scripts }}
  </head>
  <body>
    {{ skip_to_content_link }}

    <div class="banner" data-header>
      <div class="wrap">
        {{ content_for_logo }}
      </div>
    </div>

    {{ order_summary_toggle }}

    <div class="content" data-content>
      <div class="wrap">
        <div class="main" role="main">
          <div class="main__header">
            {{ content_for_logo }}
            {{ breadcrumb }}
            {{ alternative_payment_methods }}
          </div>
          <div class="main__content">
            {{ content_for_layout }}
            <div class="checkbox-container" data-gift-note-html>
  <h2 class="section__title" style="margin-bottom: 1em">Gift Options</h2>
  <input type="checkbox" class="input-checkbox" id="gift-message">
  <label for="gift-message">  <img src="https://cdn.shopify.com/s/files/1/1154/7838/t/2/assets/giftbox-icon.svg?15220141244123693282"> <span>Gift Message</span></label>
  <div id="msg_text">
    <textarea class="field__input" placeholder="Enter gift note here..."></textarea>
    <br />
    <div class="og_btn add_msg">Add Gift Message</div>
    <div class="og_btn edit_msg">Edit Gift Message</div>
  </div>
</div>       
          </div>
          <div class="main__footer">
            {{ content_for_footer }}
          </div>
        </div>
        <div class="sidebar" role="complementary">
          <div class="sidebar__header">
            {{ content_for_logo }}
          </div>
          <div class="sidebar__content">
            {{ content_for_order_summary }}
          </div>
        </div>
      </div>
    </div>

    {{ tracking_code }}
    {{ 'checkout_script.js' | asset_url | script_tag }}
  </body>  
</html>

<style>
#msg_text {
  display: none;
  padding-top: 1.5em;
}
#msg_text textarea {
  height: 150px;
}
#msg_text textarea.note_saved {
  resize: none;
}
.checkbox-container {
  padding-top: 1.5em;
}
.checkbox-container label {
  cursor: pointer;
  padding-top: 1.5em;
}
.checkbox-container input[type=checkbox]:checked ~ #msg_text {
  display: block;
}
.og_btn {
  display: inline-block;
  border-radius: 4px;
  font-weight: 500;
  padding: 1.4em 1.7em;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background: #222;
  color: white;
}
.og_btn:hover {
  background: #090909;
  color: white;
}
.edit_msg {
  display: none;
}
</style>


 

2. Created a javascript named "checkout_script.js" in under assets:

if (Shopify.Checkout.step !== 'contact_information') {
  $('[data-gift-note-html]').hide();
}

if ($('.section--shipping-address').length) {
  $('[data-gift-note-html]').appendTo($('.step__sections'));
}

var saveCartNote = function() {
  var cartNote = $('#msg_text textarea').val();
  $.post(window.location.origin + '/cart/update.js', {note: cartNote}, function() {
    $('#msg_text textarea').addClass('note_saved');
    $('#msg_text textarea').css('cursor', 'not-allowed');
    $('#msg_text textarea').prop('disabled', 'true');
    $('.add_msg').hide();
    $('.edit_msg').css('display', 'inline-block');
  }, 'json');
};

var editCartNote = function() {
  $('#msg_text textarea').removeClass('note_saved');
  $('#msg_text textarea').css('cursor', 'default');
  $('#msg_text textarea').prop('disabled', '');
  $('.add_msg').show();
  $('.edit_msg').hide();
};

$('#gift-message').on('click', function() {
  if (!(this).checked) {
    $('#msg_text textarea').removeClass('note_saved');
    $('#msg_text textarea').css('cursor', 'default');
    $('#msg_text textarea').prop('disabled', '');
    $.post(window.location.origin + '/cart/update.js', {note: ''}, function() {
      $('#msg_text textarea').val('');
       $('.edit_msg').hide();
      $('.add_msg').css('display','inline-block');
    }, 'json');
  }
});

$('.add_msg').on('click', function() {
  saveCartNote();
});

$('.edit_msg').on('click', function() {
  editCartNote();
});

3. Result:

I am able to insert a message, edit the message and I know it does get updated to the customer notes but for some reason, it does not reflect in order notes. The other issue is that when I go onto the next step and then come back to the shipping address stage, the box is unchecked and refreshed.

 

Can anyone help me with this issue? Is my jquery wrong? Any pointers to the code will really be helpful.

 

Source: https://onlygrowth.com/blogs/posts/customizing-your-checkout-page-with-shopify-plus

 


Capture.PNG

 

0 Likes
Shopify Staff
Shopify Staff
557 24 59

Hi there @idreesrasheed!

 

Don here from Shopify. :)

 

If your store is on a Plus plan here and you are trying to put in place a checkout customisation then our internal Plus teams should be able to help you to put this in place.

 

We can escalate this case to them for you internally here if you can first send an email into us via our support site and then just reply here with the ticket number for this email here in this thread so we can grab it and go to work.

 

I look forward to hearing from you.

 

 

Regards,

Don

Don | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
6 0 0

Hello Don,

 

Thank you for your message. 

 

Here is my ticket number: 13566279

 

I just want to let you know that I did chat with the support and they asked me to seek help from Shopify community or hire a developer. They said that such customizations are not available with the Shopify Plan and you are stating otherwise. So please correct me if I am wrong. 

Regards,

Idrees

 

0 Likes
Shopify Expert
9974 84 1491

Looks like the Shopify internal team is help on the above but for those that find this later:

When adding fields to the checkout you really should make sure the data persists through the steps. It's probably not being done in this case. You can easily sanity test this by outputting the value between steps. If it vanishes you know you've not done the required steps.

 

Also, don't assume that there's a cart object to push an update to. Many scenarios will exist where there's no cart so the code shown above will fail when that happens.

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes