Zones
Description
The purpose of this page is to show zones list with ability to enable or disable zone.
QA
Common components
Bell icon (todo link)
The UI elements
Add new zone button
| Description | Value | Error message |
|---|---|---|
Mandatory | No | - |
Allowed/Forbidden values | - | - |
Default value | - | - |
Help text | - | - |
Tool tips | Add new zone | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
ID search input
| Description | Value | Error message |
|---|---|---|
Mandatory | No | - |
Allowed/Forbidden values | - | - |
Default value | Placeholder: Search ID | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Zone search input
| Description | Value | Error message |
|---|---|---|
Mandatory | No | - |
Allowed/Forbidden values | - | - |
Default value | Placeholder: Search zone | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Enabled dropdown
| Description | Value | Error message |
|---|---|---|
Mandatory | Yes | - |
Allowed/Forbidden values | - | - |
Default value | All | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Search button
| Description | Value | Error message |
|---|---|---|
Mandatory | No | - |
Allowed/Forbidden values | - | - |
Default value | - | - |
Help text | - | - |
Tool tips | Search | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Enabled toggle switch
| Description | Value | Error message |
|---|---|---|
Mandatory | Yes | - |
Allowed/Forbidden values | - | - |
Default value | Yes | - |
Help text | - | - |
Tool tips | - | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Edit icon
| Description | Value | Error message |
|---|---|---|
Mandatory | No | - |
Allowed/Forbidden values | - | - |
Default value | - | - |
Help text | - | - |
Tool tips | Edit | - |
Lower limit | - | - |
Upper limit | - | - |
Behavior | - |
Behaviors description
Add new zone button behavior
This is CTA button with plus icon (Buttons with icons UI kit) once clicked it opens Add new zone page. When hover mouse pointer on it, button color changes.
Title of Zones behavior
Title includes the title and number of zones in the brackets.
ID search input behavior
This is input field (Forms normal UI kit) to set zone ID number, in order to find the appropriate zone and filter it out.
Zone search input behavior
This is input field (Forms normal UI kit) to set zone, in order to find the appropriate zone and filter it out.
Enabled dropdown behavior
Enabled dropdown (Dropdowns basics UI kit) allows to filter enabled and disabled zones. Dropdown has these options:
All - shows all zones
Yes - shows enabled zones
No - shows disabled zones
Search button behavior
Search is CTA button with search icon (Buttons with icons UI kit) once clicked it shows result by enter information in ID, Zone inputs and Enabled dropdown. By default button is disabled until any symbols is entered in input fields or dropdown option changed. When hover mouse pointer on it, button color changes.
Reset behavior
This CTA button (Buttons transparent UI kit) appears when a search has been executed. Resets the filtering, shows all the unfiltered Zones.
Zones list behavior
Every created zone is shown in separate line in Zones list. Each zone in list is shown with these elements:
ID - the unique ID number
Zone - the name of zone
Bulk actions behavior
When there are multiple zones created, Bulk Actions dropdown (Dropdowns basics UI kit) help manage them and configure the main actions. By default button is disabled until first checkbox is marked in list. Checkboxes (Forms checkboxes UI kit) in each zone line can be used, if there is need to manage zones separately and use for Bulk Actions for adjusting the zones. Once clicked on Bulk actions dropdown opens these options:
Enable selection - option to enable selected zones.
Disable selection - option to disable selected zones.
Delete selected - option to delete selected zones.
Enabled toggle switch behavior
This is toggle switch (Forms switch story UI kit) that allows to enable or disable zone in the list.
Edit icon behavior
Edit icon once clicked opens that zone page to make some changes.
Three-dot menu behavior
Once clicked opens popup with Delete option. When click on it, opens pop up with title Delete selection and X icon. This popup has notification: Are you sure you want to delete the selected item(s)? and 2 buttons:
Cancel -it is outlined CTA button (Buttons outlined UI kit), once clicked cancels deletion and closes popup.
Delete -it is a red color CTA button (Buttons basics UI kit), once clicked deletes selected zone and closes popup.
When hover mouse pointer on each button, it color changes.
Multistores functionality
Multistores independent page. Multistore functionality depends on Shop association block settings.
Last updated
