Brands list

Description

In this page Brands and their addresses are displayed.

Common components

The UI elements

Add new brand button

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Add new brand

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Add new brand address button

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Add new brand address

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Setting wheel icon

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Settings

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

ID input (in Brands)

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search ID

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Name input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search name

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Enabled dropdown

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

All

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Search button in Brands

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Search

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

View icon

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

View

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

ID input (in Addresses)

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search ID

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Brand input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search name

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

First name input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search first name

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Last name input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search last name

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Zip/Postal code input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search post code

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

City input

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

Placeholder: Search city

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Country dropdown

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

--

-

Help text

-

-

Tool tips

-

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Search button in Addresses

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Search

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Edit icon

DescriptionValueError message

Mandatory

No

-

Allowed/Forbidden values

-

-

Default value

-

-

Help text

-

-

Tool tips

Edit

-

Lower limit

-

-

Upper limit

-

-

Behavior

link to the behavior

-

Behaviors description

Add new brand button behavior

This is CTA button with plus icon (Buttons with icons UI kit), once clicked it opens Add new brand page. When hover mouse pointer on it, button color changes.

Add new brand address button behavior

This is CTA button with plus icon (Buttons with icons UI kit), once clicked it opens Add new address page. When hover mouse pointer on it, button color changes.

Notification behavior

This is alert notification (Alerts basics UI kit) on top of page and it is: The display of your brands is enabled on your store. Go to Shop Parameters > General to edit settings.

Title of Brands block behavior

It contains title and number of brands in list in brackets.

Setting wheel icon behavior

This setting wheel icon is in both Brands and Addresses blocks. Once clicked opens popup with these options:

  • Import

  • Export

  • Refresh list

  • Show SQL query

  • Export to SQL Manager

ID input (in Brands) behavior

This is input field (Forms normal UI kit) to set brand ID number, in order to find the appropriate brand and filter it out.

Name input behavior

This is input field (Forms normal UI kit) to set brand name, in order to find the appropriate brand and filter it out.

Enabled dropdown behavior

This is dropdown (Dropdowns basics UI kit) to filter out all, enabled or disabled brands.

Search button in Brands behavior

Search is CTA button with search icon (Buttons with icons UI kit) once clicked it shows result by enter information in ID and Name inputs and Enabled dropdown. Button become active only some entries are entered in inputs or dropdown option chosen. When hover mouse pointer on it, button color changes.

Reset button in Brands behavior

Reset button appears in search results page. Reset is CTA button with x icon (Buttons with icons UI kit) once clicked it closes search result page and brings back to Brands list page.

Brands list behavior

Every created brand is shown in separate line in Brands list. Each brand in list could be shown with these elements if they were entered while creating brand:

Enabled toggle switch behavior

This toggle switch (Forms switch story UI kit) that allows to enable or disable each brand in list.

View icon behavior

Once clicked on this icon, opens this brand information page.

Three dot menu icon behavior

Once clicked on this icon, opens pop up with Edit and Delete options. When click on Edit option, opens this brand edit page. When click on Delete option opens popup that has these elements:

  • Title - Delete selection

  • Notification - Are you sure you want to delete the selected item(s)?

  • Delete - it is red CTA button (Buttons basics UI kit), once clicked deletes profile from the list and closes popup. Appears notification (Alerts basics UI kit): Successful deletion.

  • Cancel - it is outlined CTA button (Buttons outlined UI kit), once clicked cancels deletion and closes popup.

Brands Bulk actions behavior

When there are multiple brands created, Bulk Actions button help manage them and configure the main actions. Bulk action button is disabled until first checkbox in the list is marked. Checkboxes (Forms checkboxes UI kit) in each brand line can be used, if there is need to manage brands separately and use for Bulk Actions for adjusting the brands. Once clicked on Bulk actions dropdown opens this option:

  • Enable selection - enables selected brands at once.

  • Disable selection - disables selected brands at once.

  • Delete selected - after specific multiple brands checkboxes selection, it can be deleted from the listing at once. When click on Delete selected option

    opens popup that has these elements:

    • Title - Delete selection

    • Notification - Are you sure you want to delete the selected item(s)?

    • Delete - it is red CTA button (Buttons basics UI kit), once clicked deletes profile from the list and closes popup. Appears notification (Alerts basics UI kit): Successful deletion.

    • Cancel - it is outlined CTA button (Buttons outlined UI kit), once clicked cancels deletion and closes popup.

Title of Addresses block behavior

It contains title and number of addresses in list in brackets.

ID input (in Addresses) behavior

This is input field (Forms normal UI kit) to set address ID, in order to find the appropriate address and filter it out.

Brand input behavior

This is input field (Forms normal UI kit) to set brand, in order to find the appropriate address and filter it out.

First name input behavior

This is input field (Forms normal UI kit) to set first name, in order to find the appropriate address and filter it out.

Last name input behavior

This is input field (Forms normal UI kit) to set last name, in order to find the appropriate address and filter it out.

Zip/Postal code input behavior

This is input field (Forms normal UI kit) to set zip or postal code, in order to find the appropriate address and filter it out.

City input behavior

This is input field (Forms normal UI kit) to set city, in order to find the appropriate address and filter it out.

Country dropdown behavior

This is dropdown (Dropdowns basics UI kit) to set country, in order to find the appropriate address and filter it out.

Search button in Addresses behavior

Search is CTA button with search icon (Buttons with icons UI kit) once clicked it shows result by enter information in ID, Name, First name, Last name, Zip/Postal code and City inputs and Country dropdown. Button become active only some entries are entered in inputs or dropdown option chosen. When hover mouse pointer on it, button color changes.

Reset button in Addresses behavior

Reset button appears in search results page. Reset is CTA button with x icon (Buttons with icons UI kit) once clicked it closes search result page and brings back to Brands list page.

Addresses list behavior

Every created address is shown in separate line in Addresses list. Each address in list could be shown with these elements if they were entered while creating address:

Edit icon behavior

Once clicked Edit icon opens that Address editing page to make some changes.

Three dot menu icon behavior

Once clicked Three dot menu icon opens Delete option, when it clicked opens popup that has these elements:

  • Title - Delete selection

  • Notification - Are you sure you want to delete the selected item(s)?

  • Delete - it is red CTA button (Buttons basics UI kit), once clicked deletes profile from the list and closes popup.

  • Cancel - it is outlined CTA button (Buttons outlined UI kit), once clicked cancels deletion and closes popup.

Bulk actions behavior

When there are multiple profiles created, Bulk Actions button help manage them and configure the main actions. Bulk action button is disabled until first checkbox in the list is marked. Checkboxes (Forms checkboxes UI kit) in each profile line can be used, if there is need to manage profiles separately and use for Bulk Actions for adjusting the profiles. Once clicked on Bulk actions dropdown opens this option:

  • Delete selected - after specific multiple titles checkboxes selection, it can be deleted from the listing at once. When click on Delete selected option

    opens popup that has these elements:

    • Title - Delete selection

    • Notification - Are you sure you want to delete the selected item(s)?

    • Delete - it is red CTA button (Buttons basics UI kit), once clicked deletes profile from the list and closes popup. Appears notification (Alerts basics UI kit): Successful deletion.

    • Cancel - it is outlined CTA button (Buttons outlined UI kit), once clicked cancels deletion and closes popup.

Multistores functionality

This is Multistores independent page.

PreviousBrands & SuppliersNextView brand

Last updated