Shop Module

Among many different options that our system has to offer, one of the most important is the Shop. As the name implies this is the section for presenting our products to our visitors and future customers.

The shop has the following sections:

  • Home (Index)
  • Products
    • Product Details
  • Blog
  • Contact
  • Checkout

Each section listed above is composed of what we call Children Components (CC), these  CC work as "lego" parts; although they are encapsulated and work independently from each other, they have the capability of sharing information and the state of many variables. It is important to mention that due the complexity of each CC they are not completely customizable. Using some CSS rules we are able of changing some visual properties such as color, font size, background, etc. But some of these CC have a predefined layout and in this version of the shop they are not editable (however in the future they will be).

Children Components

These listed elements are some of the main CC that give the shop the capability of displaying all our products and allow our customers to perform purchases. These components are only customizing via CSS rules. The layout such as the order of the buttons or the location of the main product image are not completely customizable. This document will try to describe in depth how to customize some of the CC, as we will describe in future sections some of this components will be editable using css rules and others can be modified in the admin section.

  • Listed Products
  • Product
  • Checkout Form
  • Sidebar
  • Blog Post
  • Carousel

The image located below shows an example of a section of the shop; with a red border all the children components that are being displayed in the home section (not fully customizable) and with purple border the rest of the sections that are completely customizable either by css rules or by using the admin.