Signup

Adding a custom delivery note to an order

If you would like your customers to be able to add notes only for delivery, you can add a custom delivery note to an order.

Please reach out to us at support@zapiet.com—we’ll be happy to implement this for you. Only proceed if you are comfortable editing code yourself. 


Add a custom delivery note to the cart page

Step 1

Within your cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid) file, place the following code where you would like the delivery note field to appear. 
<div id="delivery-note-container" style="display:none">
  <label for="deliveryNote" class="label--block">Please enter delivery instructions. (Required)</label>
  <textarea name="attributes[Delivery-Note]" id="deliveryNote" class="input--block" required style="min-width:330px; min-height: 100px;"></textarea>
</div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    var noteContainer = document.querySelector("#delivery-note-container");
    ZapietEvent.listen("selected_method", function(method) {
      if (method == "delivery") {
        noteContainer.style.display = "block";
      } else {
        noteContainer.style.display = "none";
      }
    });
  });
</script>

 

If you are using the Online store 2.0 version of our widget, you will need to add the <div id="storePickupApp"></div> right above the code, to make sure the note appears right after the widget.

<div id="storePickupApp"></div>

Step 2

Depending on the widget version your store is on, add the code below. 

<script type = "text/javascript">
    let delivery_selected = false;
$(document).ready(function() {
    window.ZapietEvent.listen('selected_method', function(method) {
        if (method == "delivery") {
            $('#delivery-note-container').show();
            delivery_selected = true;
        } else {
            $('#delivery-note-container').hide().val("");
            delivery_selected = false;
        }
    });
});
</script> 


Online store 2.0

If you are using our widget on Online store 2.0, you will need to

  • Add the code in Store Pickup + Delivery > Developers, under Custom JS
  • Remove these 2 lines of code
    <script type="text/javascript">
    
    </script> 

Versions 7.1.2. and older

If you are using our widget on on older version of our app (that has our files), you will need to 

  • Add the code in your storepickup-addons.liquid file


For both versions, if the code is not working, try adding jQuery on top of the cart file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> 


When a customer selects Local Delivery, an additional text field will appear where they can add their custom delivery notes.



Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.