Dearnex Themes

Appearance

Getting Started ​

This documentation is for designers and developer working internally at Dearnex or vetted developers.

View the demos ​

Check out some of the demos below

All these themes can be found in the dearnex/beacon-themes repositories under the core folder

Create a new theme ​

This tutorial will help you setup and prepare your first theme. Please make sure you've setup the Beacon CLI before you create your first theme.

From here you have 2 options, start from scratch or start using a skeleton. The skeleton theme uses bootstrap 4 and does not include every page but covers the majority of features available when creating themes.

All themes in Dearnex have their own fallback pages and use bootstrap 4. However if you choose to use another framework it's recommended you prepare all the relevant pages in your structure first.

INFO

Beacon will still attempt to load Dearnex default Bootstrap 4 pages even if you're using another framework.

WARNING

We are slowly working through displaying 404 errors or disabling features entirely on a store that does not have the supporting pages or components in a theme. For example: if you do not have products/show.blade.php and livewire/product.blade.php then product pages will display a 404 and in the system users will be warned that products are unusable but may still be added.

Setting up ​

If you haven't already setup the CLI make sure you've set this up, then run the watch command after doing this initial setup.

Create a new folder for your theme

Inside the folder create the basic folder structure below:

+ assets
+ configs
    + sections
+ resources
+ views

Create the initial files

  1. views/theme.blade.php

INFO

All themes currently only support Livewire 2.* for dynamic components, so you must include the Livewire styles and Livewire scripts.

Plans in place to create API endpoints so stores can be built using a headless system instead, disconnecting themes further from strict programming choices and biases.

html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <x-store-seo/>

    @livewireStyles
    @stack('styles')
</head>
<body>
    <x-store-section section="g:header" />

    @if(request()->routeIs('home') === false)
        <x-store-breadcrumb />
    @endif

    @yield('content')

    <x-store-section section="g:footer">

    @livewireScripts
    <script src="{{ asset(mix('theme.js', 'vendor/store')) }}"></script>
    @stack('scripts')
</body>
</html>
  1. configs/pages.json
json
{
    "_global": {
        "section": [
            "header",
            "footer"
        ]
    }
}
  1. views/index.blade.php
html
@extends('theme::theme')

@section('content')
    @if(Theme::hasComponent('section', 'layout'))
        @foreach(Theme::componentArray('section', 'layout') as $component)
            <x-store-section section="layout" :item="$component" />
        @endforeach
    @endif
@stop
  1. In the config/pages.json add an additional section for the index page
json
{
    ...
    "index": {
        "section": {
            "repeat": true
        }
    }
}

That's all you need to get started, follow the sections guide to add a new header, footer and your first home page section.