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[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

└── src
  ├── views 
    ├── components
    |     ...
    |     ├──── home
    |     ...
    ...

Home components are:

• Youtube
• Fixed banner
• Testimonials
• Random testimonials
• Parallax background
• Photos slider
• Store features
• Fixed products
• Products slider
• Featured products style 1
• Featured products style 2
• Featured products style 3
• latest products
• Vertical menue with slider

  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
• Advertisement
• 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
• Similar products

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

Comments component location

└── src 
    ├── components
    |   ...
    |   └── Comments      
    |   ...
    ...