Stock management

Description

This page shows all the stock of the products that are in the shop, also it can be configured from this page.

Stock management User Interface

QA

Link to the test

Common components

• E-commerce logo.

• PrestaShop version number.

• Quick access dropdown.

• Search input - Forms input with dropdown UI kit.

• Bell icon (todo link)

• Account icon.

• Breadcrumbs navigation - Breadcrumb UI kit.

• Heading of the page - Headings UI kit.

• Sorting rules.

• Pagination.

The UI elements

Search input

Description	Value	Error message
Mandatory	NO	No product matches your search. Try changing search terms.
Allowed/Forbidden values	-	-
Default value	-	-
Help text	Search products (search by name, reference, supplier)	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	link to the behavior	-

Search a supplier input

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	-	-
Default value	-	-
Help text	Placeholder: Search a supplier	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	link to the behavior	-

Export icon

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	-	-
Default value	-	-
Help text	-	-
Tool tips	Export data into CSV	-
Lower limit	-	-
Upper limit	-	-
Behavior	link to the behavior	-

Import icon

Description	Value	Error message
Mandatory	NO	-
Allowed/Forbidden values	-	-
Default value	-	-
Help text	-	-
Tool tips	Go to the import system	-
Lower limit	-	-
Upper limit	-	-
Behavior	link to the behavior	-

Bulk edit quantity input

Description	Value	Error message
Mandatory	NO	Use checkboxes to bulk edit quantities.
Allowed/Forbidden values	Only numbers allowed	-
Default value	0	-
Help text	-	-
Tool tips	-	-
Lower limit	-	-
Upper limit	-	-
Behavior	link to the behavior	-

Behaviors description

Search input behavior

This is search input with helper (Forms helpers UI kit). This input has Search CTA button. All entered words are converted into tags. Search button click splits the tags. Even one symbol can be converted into tag. Once clicked Search, it executes the searching action after the fields are set and shows search results in table. When hover mouse pointer on it, buttons color changes.

Advanced filters behavior

It is a drop-table with a placeholder "Advanced filters", when pressed, a table below appears with the following elements:

• Filter by supplier, this section had a search by supplier input, and 2 check boxes (Forms stylised checkboxes UI kit). If any of the checkboxes are marked, only the products from those suppliers will be shown, also the selected check box appears as a text box that can be removed in the search bar. By default there are: "Fashion supplier" and "Accessories supplier".

• Filter by categories, this section has an option to expand, and collapse, when collapsed, has the following checkbox:

  • Home When expanded the following additional checkboxes appear: - Clothes - Men - Women - Accessories - Stationery - Home accessories - Art When any of the checkboxes are pressed, below only the selected filtered categories are shown.

• Filter by status,there are three radio buttons (Forms radio buttons UI kit) options, only one can be selected:

  • Enabled (selected by default)

  • Disabled

  • All

Search by supplier input behavior

This is input field with placeholder (Forms normal UI kit) for product search by supplier.

Export icon behavior

When icon clicked, the CSV file can be saved.

Import icon behavior

When icon clicked, in a new window opens the the window Advanced Parameters -> Import.

Display products below low stock level first checkbox behavior

On the top of list a checkbox (Forms stylised checkboxes UI kit) is shown: Display products below low stock level first, when pressed, re-arranges the products so that the low stock products would be shown first.

Bulk edit quantity input behavior

On the left there is Bulk edit quantity number input (Forms number UI kit) with checkbox (Forms stylised checkboxes UI kit), when the checkbox is marked, all the products get marked. There are also arrows for number increasing or decreasing.

When a number is entered in the field and the checkbox is marked, every product's below "Physical" and "Available" sections have an additional arrow appeared on the right of them with a new number, that the amount would be increased to. The number that will be increased depends on the "Bulk edit quantity" field entered number.

When a number in the "Bulk edit quantity" is entered, Apply new quantity button with edit icon (Buttons with icons UI kit) become enabled. When this button clicked, the quantities will be added to the products, with a message shown: Stock successfully updated.

Products list behavior

There are these products elements in the each row of the list:

• Checkbox - (Forms stylised checkboxes UI kit) to mark product for bulk actions. When marked in product row, also become marked Bulk edit quantity checkbox.

• ID - shows product ID number.

• Product name - shows picture and the name of the product.

• Reference - shows reference of the product.

• Supplier - shows the supplier of product.

• Status - shows if product is disabled or enabled.

• Physical - shows physical quantity of product.

• Reserved - shows reserved quantity of product.

• Available - shows available quantity of product.

• Edit quantity - input field (Forms number UI kit) for a number of quantity editing. Has 2 arrows for increasing and decreasing.

Multistores functionality

Multistores dependent page.