Home Page

Components

By default, the home page displays a collection of Theme Features listed in the twilight.json under the features section. Which are located in the src/views/components/home/ folder and were developed specially for the Home Page.

More about twilight.json file in this article.

:::info[A thing to know!]

• The Theme Features names have the prefix component- inside twilight.json.
• Developer must remove the Theme Features that will not be used in the theme.
• It's advised to use the Theme Features as a best practise to ensure a smooth experience for all Salla partners.
  :::

The content of {% component home %} renders the following Theme Features as per the store's settings.

Theme Preview

The components can be added using the theme preview in the Theme menu item of Salla Partners Portal. The developer can add the component and enable it in the theme preview dashboard.

Usage

Twilight provides two different methods to handle the Home Page via the file src/views/pages/index.twig. The goal here is to enable the developer to perform any design or appearance he may need for this page.

The methods are:

• Theme Features and Theme Components
• Developer Static Content

Theme Features and Theme Components

This is the default method, in which the Home Page simply displays the Theme Features explained in the previous section of this article.

In addition to the Theme Features, the developer has the option to build their own/new Theme Component(s) as per the store’s requirements.

:::info[The new Theme Component should be:]

• Created inside the path src\views\components\*.twig
• The schema is declared inside the file twilight.json under the components section.
  :::

Following is an example of the twilight.json where we delcare a new Theme Component named "custom-slider".

...
  "components": [
    {
      "name": "custom-slider",
      "title": "صور متحركة (مخصص)",
      "icon": "sicon-image-carousel",
      "path": "home.custom-slider",
      "fields": [
        {
          "id": "images",
          "type": "collection",
          "format": "collection",
          "required": true,
          "minLength": 1,
          "maxLength": 10,
          "fields": [
            {
              "id": "image",
              "type": "string",
              "format": "image"
            },
            {
              "id": "title",
              "type": "string",
              "label": "عنوان رئيسي (إختياري)"
            },
            {
              "id": "sub_title",
              "type": "string",
              "format": "textarea",
              "label": "نص توضيحي (إختياري)"
            }
          ]
        }
      ]
    },

...

In the previous example, the path of the new component is mentioned in "path": "home.custom-slider". This means that the new component is located inside src\views\components\home\custom-slider.twig.

:::tip[Note]
The developer has the option to create their component anywhere within the src\views\components\ folder.
:::

Twilight is shipped with some ready Theme components, which can be easily modified by the developer. Below is the list of these Theme Components.

Below is the src\views\pages\index.twig file for the Home Page, where, in line #3, the {% component home %} renders both of the Theme Features and Theme Components.

{% extends "layouts.master" %}
{% block content %}
    {% component home %}
{% endblock %}
{% block scripts %}
    <script type="text/javascript" defer src="{{ asset('dist/home.js') }}"></script>
{% endblock %}

The visibility of each of the Theme Features and Theme Components in the Home Page is managed from the Partners Portal. This means that the partner has the ability to show/hide any of the Theme Features and Theme Components.

Static Content

In this method, the developer has the option of building their own static content without using the Theme Features nor Theme Component(s). However it's highly advised to utalize the previous methods to ensure a smooth expereince for the end users.

The added static content does not depend on any of the Store settings. It will be displayed as per the given design by the developer. Below is an example for this method.

{% extends "layouts.master" %}
{% block content %}

    <-- just add your static content here -->  
    <div id="container">
        <h2> My Home Page </h2>
        <img src="{{ asset('images/my_img.png') }}" alt="" />
    </div>
    
{% endblock %}
{% block scripts %}
    <script type="text/javascript" defer src="{{ asset('dist/home.js') }}"></script>
{% endblock %}