Components

Themes use components for quick and easy re-usability for example: The theme may have multiple sliders, but they all follow the same design, in this example we have a slider component that can be reused throughout the theme.

Each component added to a page, weather it is a banner or a product listing will have a system defined name created by the theme creator, it is up to the user to create a slider (for example) and assign it to the page, section or theme

Adding components to a page

Components can be easily added, all components start with x-store-

Here is an example of a slider being added

<x-store-slider section="hero" />

Repeating Components

A recent release of Beacon now allows themes to have repeating components.

In the pages.json file you can now lay out your pages like this to tell Beacon that these components should repeat:

{
    "index": {
        "location": {
            "main": {
                "repeat": true
            }
        }
    }
}

In the blade template, to figure out what to do with a repeating component you can do something like this:

@if(Theme::componentRepeating('location', 'main'))
    <div class="row">
        @foreach(Site::page()->sections['location']['main'] as $component)
            <div class="col-md-4">
                <x-store-location section="main" :item="$component" />
            </div>
        @endforeach
    </div>
@else
    <div class="row">
        <div class="col-md-4">
            <x-store-location section="main" />
        </div>
    </div>
@endif

If you're feeling a little lazier, or the design doesn't change if there is one or none then you can just do this

@if(Theme::hasComponent('location', 'main'))
    <div class="row">
        @foreach(Theme::componentArray('location', 'main') as $component)
            <div class="col-md-4">
                <x-store-location section="main" :item="$component" />
            </div>
        @endforeach
    </div>
@endif

In Dearnex you would create a new slider with a system name of hero and assign that slider to the page you just created where it will be displayed.