Overview

In general, components are independent and reusable bits of code. Twilight theme defines a number of components in src/views/components/ that have properties with strict typing and default values. A property is only required if you mark it required. You can set default values otherwise.

📙 What you'll learn

This article lists all of the components shipped with the Twilight theme engin.

Tip

The developer has the flexibility of developing and including his own components. This mean that the developer can create new files for any desired new component he may need to add to his theme.

Components

Twilight main pages include many components that aim to deliver the best shipping experience for the end user.
In this article we will walk you through the main pages' components, which are:


Home components	Header components	Footer components	Products components	Comments component

Home Components

Home components src/views/components/home/ are found in the home page and it's significant in giving the store front- display. Each component plays a role in exhibiting the store main details such as, Youtube videos of the store, customer testimonials and other components that sets the store tone. More on home components and it's usage in home page here.

Home Components Location

Home components are:

Random testimonials

Header Components

The header components src/views/components/header/ are found on all pages of the store and considered to be used frequently so for ease of access it's postioned on the top area of the page. More about Header components here.

Header Components Location

└── src 
    ├── components
    |     ...
    |     ├──── header
    |     ...
    ...

Header components are :

Header

Breadcrumbs

Main Menu

User Menu

Footer Components

Footer components src/views/components/footer/ are also commonly used and usually found in the footer area of the page, such are contacts and payment methods. More about Footer components here.

Footer Components Location

└── src 
    ├── components
    |     ...
    |     ├──── footer
    |     ...
    ...

Footer components are:

Footer

Contacts

Copyrights

Mobile Apps

Pages

Payment Methods

Social

Products Components

Products components src/views/components/product/ are grouped into 2 groups:

Essentials

Options

Products Components Location

└── src 
    ├── components
    |     ...
    |     ├──── products
    |     ...
    ...

Essentials

Essentials components are the main components related to the product, more about Essentials components here.

Essentials components are:

Donation progress bar

Offer

Notify availability

Quick access

Options

These components help to add more options to the product components to make it versatile by using color options also, adding images using image option can give the used a better view of the product. More about Options components here.

Options components are:

Color

Date

Datetime

Donation

Image

Multiple Options

Number

Single Option

Splitter

Text

Textarea

Thumbnail

Time

Comments component

Comment component is used to display comments made by useres on Single page or Single product page. More about Comments component here

📙 What you'll learn#

Components#

Home Components#

Home Components Location#

Header Components#

Header Components Location#

Footer Components #

Footer Components Location#

Products Components#

Products Components Location#

Essentials#

Options#

Comments component#

Comments component location#

📙 What you'll learn

Components

Home Components

Home Components Location

Header Components

Header Components Location

Footer Components

Footer Components Location

Products Components

Products Components Location

Essentials

Options

Comments component

Comments component location