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.
Prerequisites
Before customizing the sales associate code field, you must enable the Observation field on VTEX Sales App. 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.
_21{_21 "data": {_21 "0-0": "`type`",_21 "1-0": "`skipValidation`",_21 "2-0": "`mask`",_21 "h-0": "Property",_21 "0-1": "string",_21 "0-2": "Defines the ‘vendors’ field format. The possible values are `text` and `textarea`, for big text blocks. `input`, a text field for simple keys. `select`, showing a combobox to quickly select.",_21 "1-1": "boolean",_21 "2-2": "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.",_21 "1-2": "Activates the validation performed via Master Data.",_21 "2-1": "string",_21 "h-2": "Description",_21 "h-1": "Type",_21 "3-0": "`autofill`",_21 "3-1": "boolean",_21 "3-2": "Defines whether VTEX Sales App will automatically insert the sales associate code when the Social Selling feature is active.\n\nWhen this value is `true` (default), the vendor code is automatically filled by VTEX Sales App.\n\nWhen this value is `false`, the operator must inform the vendor code manually.\n\nThis flag does not change any behavior when Social Selling is not activated."_21 },_21 "cols": 3,_21 "rows": 4_21}
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.
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
_10window.INSTORE_CONFIG = {_10 noteAsVendorCode: {_10 type: 'input',_10 skipValidation: true,_10 mask: '^(HE|TU)[A-Za-z0-9]{5,8}$',_10 autofill: false,_10 },_10}
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.
_10window.INSTORE_CONFIG = {_10 noteAsVendorCode: {_10 type: 'text',_10 skipValidation: true,_10 mask: '^\\d{3}[a-zA-Z]{2}$',_10 autofill: false,_10 },_10}
- 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.
_10window.INSTORE_CONFIG = {_10 noteAsVendorCode: {_10 type: 'text',_10 skipValidation: false,_10 autofill: false,_10 },_10}
- Validation according to the mask only: in this example, the regular expression applied in the mask expresses that the code has two numbers.
_10window.INSTORE_CONFIG = {_10 noteAsVendorCode: {_10 type: 'text',_10 skipValidation: true,_10 mask: '^\\d{2}$',_10 autofil: false,_10 },_10}
In case of doubt, contact Customer Excellence by creating a support ticket.