You can add a custom delivery note to an order, and make it mandatory if needed.

Please reach out to us at [email protected]—we’ll be happy to implement this for you. Only proceed if you are comfortable editing code yourself.


Requirements


Add a delivery note to the cart page

  1. Within your cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid) file, search for <div id="storePickupApp"></div>.

    1. If you have <div id="storePickupApp"></div> added, place the following code right after it.

    2. If you haven't found <div id="storePickupApp"></div>, place it where you'd like our widget and the delivery note to appear, and then place the following code right after it.

      <div id="delivery-note-container" style="display:none">
      <label for="deliveryNote" class="label--block"> Please enter delivery instructions.
      </label>
      <textarea
      name="attributes[note]"
      id="deliveryNote"
      class="input--block"
      style="min-width:330px; min-height: 100px;"
      form="cart"
      ></textarea>
      </div>

  2. Add the code below in Store Pickup + Delivery > Developers, under Custom scripts.

    async function validateDeliveryNote(event) {
    var container = document.querySelector('#delivery-note-container');
    var noteFieldVisible = container.style.display == "block";
    var noteField = document.querySelector("#deliveryNote");


    await Zapiet.Cart.updateDeliveryNote(noteField.value);
    }
    window.ZapietEvent.listen('selected_method', function(method) {
    var container = document.querySelector('#delivery-note-container');
    var checkoutButtons = document.querySelectorAll('[name="checkout"]');
    var noteField = document.querySelector("#deliveryNote");

    if (!container || !noteField) return;

    if (method == "delivery") {
    container.style.display = "block";
    noteField.removeAttribute("required");
    for (var i = 0; i < checkoutButtons.length; i++) {
    checkoutButtons[i].addEventListener("click", validateDeliveryNote);
    }
    } else {
    container.style.display = "none";
    noteField.removeAttribute("required");
    for (var i = 0; i < checkoutButtons.length; i++) {
    checkoutButtons[i].removeEventListener("click", validateDeliveryNote);
    }
    }
    });

When your customers reach the widget in the cart page and select delivery, the delivery note will appear, asking them to add delivery instructions.


Add a required delivery note to the cart page

  1. Within your cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid) file, search for <div id="storePickupApp"></div>.

    1. If you have <div id="storePickupApp"></div> added, place the following code right after it.

    2. If you haven't found <div id="storePickupApp"></div>, place it where you'd like our widget and the delivery note to appear, and then place the following code right after it.

    <div id="delivery-note-container" style="display:none">
    <label for="deliveryNote" class="label--block"> Please enter delivery instructions. (Required)
    </label>
    <textarea
    name="attributes[note]"
    id="deliveryNote"
    class="input--block"
    style="min-width:330px; min-height: 100px;"
    form="cart"
    ></textarea>
    </div>

  2. Add the code below in Store Pickup + Delivery > Developers, under Custom scripts.

    async function validateDeliveryNote(event) {
    var container = document.querySelector('#delivery-note-container');
    var noteFieldVisible = container.style.display == "block";
    var noteField = document.querySelector("#deliveryNote");

    if (noteFieldVisible && !noteField.value) {
    alert('Please enter delivery instructions.');
    event.target.classList.remove("btn--loading");
    return false;
    }

    await Zapiet.Cart.updateDeliveryNote(noteField.value);
    }
    window.ZapietEvent.listen('selected_method', function(method) {
    var container = document.querySelector('#delivery-note-container');
    var checkoutButtons = document.querySelectorAll('[name="checkout"]');
    var noteField = document.querySelector("#deliveryNote");

    if (!container || !noteField) return;

    if (method == "delivery") {
    container.style.display = "block";
    noteField.setAttribute("required", "required");
    for (var i = 0; i < checkoutButtons.length; i++) {
    checkoutButtons[i].addEventListener("click", validateDeliveryNote);
    }
    } else {
    container.style.display = "none";
    noteField.removeAttribute("required");
    for (var i = 0; i < checkoutButtons.length; i++) {
    checkoutButtons[i].removeEventListener("click", validateDeliveryNote);
    }
    }
    });

When your customers reach the widget in the cart page and select delivery, the delivery note will appear, asking them to add delivery instructions.

If your customers try to continue to checkout without adding a delivery note, they will get a notification "Please enter delivery instructions". They will not be able to check out before they add a note.

Did this answer your question?