Adventure Documentation

2. Architecture

  1. File structure
  2. Admin
  3. i18n
  4. Components
  5. Elements
  6. Templates
  7. Views

File structure

This is the core file structure:

admin/
    options/
        settings.json
        ...

    i18n/
        da.json
        en.json
        nb.json
        ...

    output/
        theme.json
        settings.json
        legacy.settings.json

    presets/
        light/
        dark/

modules/
    framework/
        email/
        print/
        ...

src/
    components/
        SomeComponentGroup/
        SomeComponent/
            SomeComponent.css
            SomeComponent.js
            SomeComponent.tpl
        ...

    elements/
        SomeElementGroup/
        SomeElement/
            SomeElement.css
            SomeElement.js
            SomeElement.tpl
        ...

    functions/
        SomeFunctionFile.tpl
        SomeOtherFunctionFile.tpl
        ...

    templates/
        SomeTemplates/
        SomeTemplatePartial/
            SomeTemplate.tpl
        ...

    vendors/
        SomeVendor/
        SomeOtherVendor/
        ...

    views/
        SomeView.tpl
        ...

meta.json
template-config.json

Admin

  • The file /admin/output/settings.json contains defaults for all seting values from the adminstration and are re generated by the adminstrations as a user selects their options.
  • The file /admin/output/legacy.settings.json contains the legacy (Rooty structure) settings related to emails. Settings in here are not used in the new code structure for the Adventure template.
  • The file /admin/output/theme.json contains defaults for all color values and are re generated by the adminstrations as a user selects their options.
  • The folder /admin/ is experimental but will in the future give access to set up all data for the adminstration to handle the build of theme.json and settings.json values.

Template Config

  • The file /template-config.json contains the developer configuration for the template. These settings are not meant for the administration, but for special configurations for the template.
  • As of writing, the settings here related to cookie names and thumbnail sizes and breakpoints.

i18n

The i18n folder is a collection of JSON files anmed after each language in ISO 639 format. Read more in 5. I18n.

Modules

Inside of the /modules/framework/ folder you will find legacy code related to email and print. This is still running on a code structure as known from Rooty. Changes to these files should be done as if editing code in our Rooty template. Most of the documentation on this page, will not apply to these files.

Views

The directory holds a collection of files which names each represents a route in the template such as home.tpl, product.tpl or blog.tpl.

Further specifications are specified with '-' such as product-category.tpl or checkout-success.tpl

Components

Components represent independent and isolated partials that make them reusable.

See 3. Components for more information.

Elements

Elements are smaller components often related to HTML elements.

See 3. Components for the general definition.

Functions

Functions are collections of Smarty functions that are used in the template. They usually contain business logic or helper functions. The goals of these functions are: - To separate the logic from the presentation code - To better reuse the logic across multiple components - To make it easier to edit and maintain the logic

Read more about functions in 4. Data.

Templates

Templates define a layout for one, or a group of pages. By default, all views extend the "default.tpl" template that includes the most common partials such as footer and navigation.

The specific content can then be defined within the {block} Smarty function.

ParentFile.tpl:

<header>
    I'm a header
</header>

{block name="content"}
    Default text
{/block}

<footer>
    I'm a footer
</footer>

ChildFile.tpl:

{extends file="ParentFile.tpl"}

{block name="content"}
    <main>
        I'm a main
    </main>
{/block}

Result:

<header>
    I'm a header
</header>

<main>
    I'm a main
</main>

<footer>
    I'm a footer
</footer>

Vendors

Vendors are third-party libraries that are used in the template. They are not part of the template itself, but are used to enhance the functionality of the template. As of writing, we have the following vendors:

  • Swiper - A library for creating sliders and carousels
  • Morphdom - A library to help update DOM elements asynchronously more smoothly and efficiently. (Also provides hooks to enhance functionality)

Search results