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:

└── src
  ├── views 
    ├── components
    |   ...
    |   └── header
    |       ├── header.twig
    |       ├── advertisement.twig
    |       ├── breadcrumbs.twig
    |       ├── menu.twig
    |       ├── menu-item.twig
        ...

Header Components Example

In the following example we can see that the header includes:

Header

Breadcrumbs

Menu Item

Header

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

{% component "header.header" %}

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:

  {% set nav_type = theme.settings.get('your_arrayable_key') %}
  {% if nav_type is iterable %}
  {% set nav_type = nav_type|first %}
  {% endif %}

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

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

{% component "header.advertisement" %}

Variables

number

required

Advertisement ID

title

string

required

Advertisement Title

description

string

required

Advertisement Description. 🌐 Support multi-language

type

object

required

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.

{% if advertisement.icon %}
  <span class="{{ advertisement.icon }}"></span>
{% endif %}
{% if advertisement.url %}
  <a href="{{ advertisement.url }}" {% if advertisement.is_new_window %} target='_blank' {% endif %}>
    {{ advertisement.description }}
  </a>
{% else %}
  {{ advertisement.description }}
{% endif %}

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.

{% component "breadcrumbs" %}

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.

{% for breadcrumb in breadcrumbs %}
    {% if not loop.last %}
        <li><a href="{{ breadcrumb.url }}" class="...">{{ breadcrumb.title }}</a></li>
        <li><i class="..."></i></li>
    {% else %}
        <li><span class="...">{{ breadcrumb.title|raw }}</span></li>
    {% endif %}
{% endfor %}

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.

{% component "header.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.

<ul>
    {% for menu in menus %}
        <li {{ menu.attrs }}>
            {% if menu.has_children %}
                <span>{{ menu.title }}</span>
                <ul>
                    <li><a href="{{ menu.url }}">{{ menu.title }}</a></li>
                    {% for submenu in menu.children %}
                        {# to make sure you are support three level of item you can use _self to render the same #}
                        {# twig file again and again for each level #}
                        {% include _self with {menu:submenu} %}
                    {% endfor %}
                </ul>
            {% else %}
                <a {{ menu.link_attrs }} href="{{ menu.url }}">{{ menu.title }}</a>
            {% endif %}

            {% if menu.mega_menu %}
                <div class="product-item-menu">
                    {% for product in menu.mega_menu|slice(0, 4) %}
                        <a href="{{ product.url }}">
                            <img src="{{ product.image.url }}" alt="{{ product.image.alt }}"/>
                            {% if product.promotion_title %}
                                {{ product.promotion_title }}
                            {% endif %}
                        </a>
                        <h3>
                            <a href="{{ product.url }}">{{ product.name }}</a>
                        </h3>
                        {% if product.on_sale %}
                            <div>
                                <h4>{{ product.sale_price|money }}</h4>
                                {{ product.regular_price|money }}
                            </div>
                        {% else %}
                            <h4>{{ product.price|money }}</h4>
                        {% endif %} 
                    {% endfor %}
                </div>
            {% endif %}
        </li>
    {% endfor %}
</ul>

Educational Clip

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.

{# MOBILE #}
    <li  {{ menu.attrs }}>
        {% if not menu.has_children %}
            <a {{ menu.link_attrs|raw }} href="{{ menu.url }}>{{ menu.title }}</a>
        {% else %}
            <span>{{ menu.title }}</span>
            <ul>
                <li><a {{ menu.link_attrs|raw }} href="{{ menu.url }}>{{ menu.title }}</a></li>
                {% for submenu in menu.children %}
                    {% include _self with {menu:submenu} %}
                {% endfor %}
            </ul>
        {% endif %}
    </li>

{# DESKTOP #}
    <li    {{ menu.attrs|raw }}>
        <a {{ menu.link_attrs|raw }} href="{{ menu.url }}">
            <span>{{ menu.title }}</span>
        </a>
        {% if menu.has_children %}
            <div>
                <ul>
                    {% for submenu in menu.children %}
                        {% include _self with {menu:submenu, is_root_menu:false} %}
                    {% endfor %}
                </ul>
                {% if menu.products %}
                    <div class="grow p-8">
                        <div class="grid gap-4 grid-cols-4">
                            {% for product in menu.products|slice(0, 4) %}
                                <salla-product-card shadow-on-hover product="{{product}}"></salla-product-card>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

            </div>
        {% endif %}
    </li>