Sections

Sections are the most powerful of all the components and allow you to do even the most complex designs and make them fully dynamic.

Much like other components, these components are also used in the same way. Nested sections work differently but will be described below.

Unlike normal components however sections do not have a direct blade file associated to them, we instead need to add sections that can be created in the system.

<x-store-section section="my-section" />

Adding new sections

Sections require a json file to be available in the system otherwise they will not be loaded.

All json files are stored in configs/sections/[YOUR-SECTION].json

We'll Create an example component called About Us in this tutorial

1. To add a new section you will first need to create a blade file views/components/sections/about.blade.php
2. Next you'll need to add a json file in configs/sections/about.json

INFO

When creating a section you will need to add the minimum configuration to the json file for the section to be available in the system.

{
    "id": "about",
    "name": "About Us",
    "default_view": "components.sections.about",
    "pages": "any",
    "components": {},
    "settings": [],
    "translations": {
        "en": {}
    },
    "layout": {}
}

The id is the most important key and this tells the system how we can identify the component in the system. The id should be the same as the filename, but instead of using - it should use _ if you have any spaces.

The name can be anything you like, this is a human-readable identifer the user will use in Dearnex when selecting the section to create.

Using section only settings

Using section only translations

Using components inside a section

<x-store-tagged section="s:my-tags">

Using nested sections

<x-store-section section="my-nested-section" :child="true">

Helper Functions

{{ Section::default('my-setting') }}

{{ Section::translate('MY_CUSTOM_TRANSLATION') }}

{{ Section::default('my-setting') }}

Test your section loads

Testing your sections is easy. In your pages.json add your section component to your page.

Remember the component name is not the same as the actual section id, otherwise you wouldn't be able to store multiple section designs in the same component.

{
    "index": {
        "section": [
            "my-section"
        ]       
    }
}

Create your section

Now your page is setup to accept your sections you can now create a section based on your settings.

1. Click Content > Sections > Create Section
2. Enter a name for your section, this is just for the store you're working on.
3. Select your section from the dropdown list.
4. Click Create

Assign your section

1. With your section created, head over to your page in the Dearnex system and click Manage
2. Scroll down to Components and under Section > My-Section select you section from the dropdown list
3. Click Save Changes

Now you can refresh your page on your store and you should see your newly created component.