Enable the Observation field in the order screen

The inStore app allows the use of an Observation field, where it's possible to store additional information regarding the order.

The data entered in this field is sent via API to the Order Management System. They populate the openTextField field, which can be retrieved later either in the Admin or through an Orders API call.

A common example of using the Observation field is the case where the store wants to receive an identification number from the sales associate who made the sale, such as the sales associate code. In this case, the sales associate has to enter this number in the Observation field whenever closing an order.

The Observation field is enabled by editing the checkout-instore-custom.js file. Check out the How to customize inStore guide for further information on how to access this file.


Edit the checkout-instore-custom.js file

To enable the Observation field, you must set the following properties inside the window.LOCALE_MESSAGES object in the checkout-instore-custom.js file. In the UI display column below, you can see where the information you set is rendered in the inStore UI. You can click on each image to enlarge it.

Name

Type

Description

UI display

cartObservation

string

Title of the button that will appear in the cart to open the Observation field.

cartObservationcartObservation

cartObservationTitle

string

Title of the modal that will appear when the sales associate opens the Observation field.

cartObservationTitlecartObservationTitle

observationNote

string

Description of the field that will appear to the sales associate.

observationNoteobservationNote

This information must be added to the code as shown in the example below.

window.LOCALE_MESSAGES = {
  locale: "en",
  messages: {
    en: {
      cartObservation: "Observation",
      cartObservationTitle: "Observation",
      observationNote: "Observation note"
    }
  }
};

❗️

Do not remove any of the other properties present in the window.INSTORE_CONFIG object, to avoid breaking other functionalities.

If it's necessary to apply some validation logic or mask to the data entered in this field, you can include in the checkout-instore-custom.js file a function that listens to the note.visible event, which is triggered when the modal is open, and then develop your logic.

document.addEventListener (
  "note.visible",
  function () {
    // add mask logic, validation, etc.
    // example: to capture the “textarea” element of the Observation field, you can use the following code:
    // var note = document.getElementById('note')
  },
  false
);

If you need something more advanced, like making a specific request based on the data entered, it is possible to listen to the note.change event, which is emitted whenever the button to save the data is pressed.

document.addEventListener (
  "note.change",
  function (inputData) {
    // add the logic that uses the data
    // the content of the field is the value of "inputData"
  },
  false
);

📘

After making changes in the code, make sure you press the Save button.


Did this page help you?