Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Common Components
  • Getting Started
    • Create a theme
    • Develop a theme
    • Setup a theme
    • Publish a theme
  • Requirements & Review
    • Overview
    • Main Requirements
    • Review Process
      • UI / UX Review
      • Technical Review
      • Metadata Review
      • Pre-Launch Review
  • Files and Folders Structure
    • Directory structure
    • Twilight.json
  • Twig Template Engine
    • Basic syntax
    • Twilight flavoured twig
  • Theme Architecture
    • Layouts
      • Overview
      • Master Layout
      • Global Variables
      • CSS Variables
      • Salla Icons
      • Custom Fonts
      • Hooks
      • Localizations
    • Pages
      • Overview
      • Home Page
      • Product Pages
        • Products listing
        • Single product
      • Customer Pages
        • Profile
        • Orders list
        • Order details
        • Wishlist
        • Notifications
      • Blog Pages
        • Blog listing
        • Single blog
      • Brand Pages
        • Brands listing
        • Single brand
      • Common Pages
        • Cart
        • Loyalty
        • Thank you
        • Single page
        • Landing Page
    • Componenets
      • Overview
      • Home Components
        • Youtube
        • Fixed banner
        • Testimonials
        • Parallax background
        • Photos slider
        • Store features
        • Square photos
        • Fixed products
        • Products slider
        • Featured products - Style 1
        • Featured Products - Style 2
        • Featured Products - Style 3
        • Brands
        • Enhanced Square Banners
        • Main Links
        • Enhanced Slider
        • Slider Products with Headers
        • Latest Products
        • Vertical Menu with Slider
      • Product Components
        • Essentials
        • Options
      • Common Components
        • Header Components
        • Footer Components
        • Comments component
  • Change Log
  1. Common Components

Header Components

The default header which comes with Twilight includes all of header-related components such as header,breadcrumbs,menu and many more. Developers can easily modify these components, as we see in this article.
Following is the location of the header components:

Header Components Example#

In the following example we can see that the header includes:
Header
Advertisement
Breadcrumbs
Menu
Menu Item
Header Component

Header#

This part is the main component of the header which embeds several parts, such as breadcrumbs and main menu.

Troubleshooting Tip#

The header design can occasionally be hidden. You can see twilight::errors in the browser's console logs, where you can investigate the problem. The following illustrates the error as follows:
Array to string conversion in File [src/views/components/header/header.twig] at line 7
The below code should solve the issue:
The line {% set nav_type = theme.settings.get('your_arrayable_key') %} retrieves the value of a setting from the Twilight theme settings. The developer needs to replace your_arrayable_key with the actual key representing the setting that contains the array.
By using this code, the developer handles the scenario where nav_type is an array. If it is an array, you are setting nav_type to its first item. This way, you avoid the error related to converting the array to a string.
Educational Clip

Advertisement#

This component receives an object representing an advertisement's text, and then displays its details.

Variables#

Advertisement
id
number 
required
Advertisement ID
title
string 
required
Advertisement Title
description
string 
required
Advertisement Description. 🌐 Support multi-language
type
object 
required
id
number 
required
Advertisement Type ID
name
string 
required
Advertisement Type Name
link
string  | null 
optional
Advertisement Type Link
style
object 
required
icon
string 
required
Advertisement Style Icon
font_color
string 
required
Advertisement Style Font Color
background_color
string 
required
Advertisement Style Background Color
expire_date
object 
required
date
string 
required
Advertisement Expiry Date
timezone_type
number 
required
Advertisement Timezone Type
timezone
string 
required
Advertisement Timezone
pages
array[string]
required
Which pages should the advertisement appear on

Usage#

Using the advertisement object, we can get the details of advertisement.icon, advertisement.url, advertisement.description, and so on. The developer can use these data within any style designed by them.

Breadcrumbs#

Breadcrumbs are a set of links that indicate the current page and its "ancestors" (parent, grandparent, and so on), usually leading back to the site's homepage.

Variables#

Breadcrumbs
breadcrumbs
array[object (Breadcrumb) {2}] 
optional
title
string 
optional
A title of breadcrumb
url
string 
optional
A url of breadcrumb

Usage#

This component receives breadcrumbs , which is an array of breadcrumb described by their title and url. A loop goes through this object and display its parts. Developer has the option to edit the look-and-feel of this object.

Menu#

This component represents the store's main menu, which is usually for the store categories pages. It's considered as the primary roadmap for the customers to the store's internal categories. It comes with many options, such as a list of products to be displayed on the menu.

Variables#

Menus
menus
array[object (Menu) {7}] 
optional
List of menus.
has_children
boolean 
optional
The availability of other menus related to this menu.
url
string 
optional
Url link of the menu.
title
string 
optional
Title of the menu.
attrs
string 
optional
Menu dom attributes.
Example:
id="offers"
link_attrs
string 
optional
Link of the dom attributes.
Example:
class="offers-link"
children
array[object (Menu) {7}] 
optional
The other menus related to this menu.
products
array[object (Product) {43}]  | null 
optional
List of selected products or null

Usage#

For this component, the object menus contains the details of each item in the menu. Using a loop these menu items can be displayed.
Educational Clip

Menu Item#

The Menu Item component plays a vital role in navigation and user experience. It helps create dynamic menus by organizing individual menu items.

Usage#

The menu item component is used for both mobile and desktop devices. It generates menu items with corresponding links and handles child menu items and associated products, adapting to different screen sizes.

Modified at 2024-09-03 08:26:33
Previous
Common Components
Next
Footer Components