experr-storefront offers a range of traits for seamless integration with the component, each designed to enhance and expand the capabilities of your storefront. Traits provided by the experr-storefront are as follows:

  1. ​
    exp_text ( Textbox ):

    The exp_text trait adds a text box to the sidebar of the visual builder, allowing for easy content editing. To render exp_text, pass the below object to the trait configuration. 
     {
  type: "exp_text",
  displayName: "Experro Storefront",
  internalName: "experroStorefront",
 }
    When you include exp_text in the traitConfig array of the component’s initial value, a text box will be rendered in the sidebar of the UI builder. The displayName will serve as the label for that text box.
image-8.png

  1. ​
    exp_textArea ( Text Area ):

    The exp_textArea trait adds a text Area to the sidebar of the visual builder. traitConfig Object: 
    {
 type: "exp_textArea",
 displayName: "Experro Storefront",
 internalName: "experroStorefront",
}
image-9.png

  1. ​
    exp_checkbox ( Checkbox ):

    The exp_checkbox trait adds a Checkbox to the sidebar of the visual builder. traitConfig Object: 
    {
 type: "exp_checkbox",
 displayName: "Experro Storefront",
 internalName: "experroStorefront",
}
image-10.png

  1. ​
    exp_colorPicker ( Color Picker ):

    The exp_colorPicker trait adds a Color Picker to the sidebar of the visual builder. 
     {
  type: "exp_colorPicker",
  displayName: "Experro Storefront",
  internalName: "experroStorefront",
 }
    image-11.png

  2. ​
    exp_dropDown (Drop Down):

    The exp_dropDown trait adds a Drop Down to the sidebar of the visual builder. 
     {
  type: 'exp_dropDown',
  displayName: 'Experro Storefront',
  internalName: 'experroStorefront',
  options: [
    { value: 'value1', name: 'name 1' },
    { value: 'value2', name: 'name 2' },
    { value: 'value3', name: 'name 3' },
  ]
 },
    The options array is used to populate the dropdown, where each object in the array represents an option. The name property specifies the display name for the option, while the value property specifies the actual value of the option. The displayName will be used as the placeholder for the dropdown, prefixed with Select. image-12.png

  3. ​
    exp_dataSourceDropDown ( Experro-Storefront Datasource Dropdown ):

    The exp_dataSourceDropDown is used to render a dropdown menu from which you can select the data source for your component. There are two types of data sources:
    1. Content Library
    2. Free Form
    This trait can be used as a separator for the data. If you want to use data from Experro’s content library and also support inserting data from the sidebar settings in the same component, you can use this trait as a flag to determine the data source. 
    {
  type: 'exp_dataSourceDropDown',
}
    For this trait, there will be no internalName or displayName as they are fixed. The internalName is dataSource, which is a reserved keyword and cannot be used for other traits’ internalName. image-13.png

  4. ​
    exp_contentModalPopUp( Experro-Storefront Content Modal Popup ):

    exp_contentModalPopUp trait is used when data is sourced from Experro’s content library. It displays a selection list in a popup, showing records from Experro’s content library for that component. 
        {
  type: 'exp_contentModalPopUp',
  modelInternalName: '<internal-name-for-component-content-modal>',
}
    This component also has a fixed internalName of contentModel, which is a reserved keyword. modelInternalName is the modal internal name of the content model. which so ever content models internal name is passed from here that content modals records will shown in the popup The modelInternalName is the modal internal name of the content model. Whichever content model’s internal name is passed here, that content model’s records will be shown in the popup. image-14.png