When you drag and drop a widget that renders an associated component, you’ll see different options on the side panel. These options include checkboxes for ‘show/hide’ headings, dropdowns for ‘heading size’ options, a ‘color-picker’ for heading color, and some default options provided by the Experro Storefront. These options are known as traits within the Experro Storefront. Here in below image you can see options for the hero-carousel component. image.png Here you can see the some Trait’s for the hero-carousel, like,
TraitDescription
CONTENT_MODEL_POP_UPThis trait takes a content model internal name as a configuration value and displays a list of records associated with that content model. It provides the selected Content Model records data as props to a component within the cms-library, effectively integrating the component with the widget.
TEXTIt’s a simple text input where any value entered will be passed as a prop to a component.
CHECKBOXIt provides the value ‘on’ if the checkbox is selected and ‘off’ if the checkbox is unchecked.
DROPDOWNIt displays multiple values to select from, accepting an options array of JSON where each object has the structure name: ‘Name to Show’, value: ‘Value which you will get in component’ .
COLOR_PICKERA simple color picker provides the selected color’s hex value in the component’s props.
Here, we comprehend the concept of traits; let’s delve into How we can effectively utilize them.