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.

💡

Tip: See Bubble Reference for details https://manual.bubble.io/core-resources/elements/reusable-elements 🙂

Reusable Elements

addToCart

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

addToCartClothes

This reusable element is used on 3 pages, it pops up when you add something to your cart and displays the list of added items.

It has all the important info about a product such as the title, price, size & color variety and two buttons to Shopping & Go to cart.

adminOption

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

brandEdit

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

categoryEdit

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

footerClothes

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

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.

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.

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.

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.

itemClothes

This reusable element is used to present a product card on the fashion store pages. It displays all the information available on a certain product, such as product image, price, available sizes, brand, and category.

It has two groups with an add-to-cart button. One is used to show the button whenever a user navigates from a desktop app, and the group is used whenever a user navigates from a mobile app.

mainHeaderClothes

This reusable element is placed on the top of the fashion store pages. This header contains a logo, a search bar, and icons for your profile, wishlist and cart.

If the user is logged in, you will be able to click on the user's icon subsequently a menu will appear with options to go to Profile, Multistore or Logout.

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.

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 checkout. 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.

Also, it contains an HTML element that defines the style of the scrollbar within the repeating group.

shoppingCartClothes

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 to shopping or checkout. It contains a repeating group with all the added products.