Enable the sales associate code

The sales associate code field is an additional customization of the Observation field that turns this component into a field where vendors should insert their code during the purchase flow.

Once enabled, this field becomes a mandatory step in the purchase flow, meaning that the order can only be completed if the sales associate code field is filled with a personal code.

The inStore's UI once the sales rep code is enabled on the purchase flow.The inStore's UI once the sales rep code is enabled on the purchase flow.

The inStore's UI once the sales rep code is enabled on the purchase flow.


Prerequisites

Before customizing the sales associate code field, you must enable the Observation field on inStore. Check this article to learn how to do that.


Edit the checkout-instore-custom.js file

After enabling the Observation field, you should configure the sales associate code by editing the checkout-instore-custom.js file.

You can configure the JavaScript file according to your needs, using different value combinations for the three properties: type, skipValidation, and mask.

Property

Type

Description

type

string

Defines the ‘vendors’ field format. The possible values are text and textarea, for big text blocks, and input, a text field for simple keys.

skipValidation

boolean

Activates the validation performed via Master Data.

mask

string

A regular variable expression that applies a validation logic to the type property value. In other words, the person responsible for editing the window.INSTORE_CONFIG object can create the variable expression they find most appropriate for the sales rep code.

autofill

boolean

Defines whether inStore will automatically insert the sales associate code when the Social Selling feature is active.

When this value is true (default), the vendor code is automatically filled by inStore.

When this value is false, the operator must inform the vendor code manually.

This flag does not change any behavior when Social Selling is not activated.

❗️

Condition for the customization

Even though all properties are not mandatory, the JavaScript file must have at least one of them described in the code.

Otherwise, the customization will fail.

To fill the mask field, you must create a regular expression. As the sales associate code is built on JavaScript, your regular expression should follow the same programming language as well.

In VTEX, the JavaScript regular expressions follow the ECMAScript flavor. Check the step-by-step guide to constructing a regular expression according to this pattern in the Mozilla documentation.

📘

Test the regular expression

Once the regular expression is complete, a pro tip is to analyze the mask field functioning on a test workspace before deploying the code on the master. We recommend testing it on Regular Expressions 101.


Example code

window.INSTORE_CONFIG = {
  noteAsVendorCode: {
    type: 'input',
    skipValidation: true,
    mask: '^(HE|TU)[A-Za-z0-9]{5,8}$',
    autofill: false,
  },
}

Use cases

  • Validation according to sales associate’s document ID: in this example, the regular expression applied in the mask expresses that the code has three numbers and two letters.
window.INSTORE_CONFIG = {
  noteAsVendorCode: {
       type: 'text',
       skipValidation: true,
       mask: '^\\d{3}[a-zA-Z]{2}$',
       autofill: false,
   },
}
  • Validation only on Master Data: the following regular expression doesn't have any mask applied on the JS file, which means that the system will proceed with the Master Data's validation.
window.INSTORE_CONFIG = {
  noteAsVendorCode: {
       type: 'text',
       skipValidation: false,
         autofill: false,
   },
}
  • Validation according to the mask only: in this example, the regular expression applied in the mask expresses that the code has two numbers.
window.INSTORE_CONFIG = {
  noteAsVendorCode: {
       type: 'text',
       skipValidation: true,
       mask: '^\\d{2}$',
         autofil: false,
   },
}

📘

Get in touch

In case of doubt, contact Customer Excellence by creating a support ticket.


Did this page help you?