This section states the purpose of each reusable element.

Introduction

Reusable Element - an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often.
💡

Reusable Elements

addToCart

This reusable element is used on 5 pages, displaying the list of items that are added to the cart.
Image without caption

adminOption

This reusable element is used on the admin page, to manage users with admin rights.
Image without caption

brandEdit

This reusable element is used on the admin page, to edit&delete the store's brands.
Image without caption

categoryEdit

This reusable element is used on the admin page, to edit&delete the store's categories.
Image without caption

footerElectronic

This reusable element is used on all pages related to the electronic store. It displays the store's logo, contact information, and links that you can set up to your preferences.
Image without caption

headerElectronic

This reusable element stays on top of the pages related to the electronic store. This header contains a logo, a search bar, and a Cart.
Image without caption
It also has two groups that are being shown depending on the state of the current user, if he is logged in, you will see the user's name and a picture.
If you'll click on either of them a menu will appear with options to navigate to a certain page. It contains Profile, Wishlist, Multistore, and Logout options.

item

This reusable element is used to present a product card on the electronic store pages. It displays all the information available on a certain product, such as product image, price, available colors, and category.
Image without caption
It has one group focus and one simple group with a call to action (CTA), such as add to cart and wishlist.
Group focus is used to show those CTA's whenever a user navigates from a desktop app, and the simple group is used whenever a user navigates from a mobile app.
It also has a popup called wishlist that serves as a notification whenever you wishlist a product.
You will also see an admin option in case you are the platform's admin.

mainHeaderElectronic

This reusable element is placed on the top of the electronic store pages. This header contains a logo, a search bar, and contact info as well as a dropdown with categories, a cart, and a wishlist icon.
Image without caption
It also has two groups that are being shown depending on the state of the current user, if he is logged in, you will see the user's picture.
If you'll click on it a menu will appear with options to either got to your profile or log out. It also contains Products, About Us, and Multistore options. In case the user isn't logged in, you will be shown Signup and Login.

shoppingCart

This reusable element is used to display the list of products added to the shopping cart. It offers customers the possibility to either go back shopping or check. It contains a repeating group with all the added products.
In terms of information, it shows you the title of the product, the quantity which can be modified, its price, as well as the shipping fee for your order, and the total price.
Image without caption
Also, it contains an HTML element that defines the style of the scrollbar within the repeating group.

Powered by Notaku