Understanding layouts

Layouts are very important part of the theme. In would be impossible to create any design without having at least one layout.

It is as simple as you might expect - for each page of your project you assign just one layout. For example, you can have following basic set of layouts in your theme:

• HomePage
• WithoutSidebar
• WithLeftSidebar
• ContactPage

Then, in the administration panel you can attach the layouts to your pages as follows:

• www.myeshop.com/home - HomePage layout
• www.myeshop.com/products - WithLeftSidebar (you want to have the filtering panel in the left sidebar)
• www.myeshop.com/some-product - WithoutSidebar (you want to have the full with of the screen for the information about product)
• www.myeshop.com/contact - ContactPage layout

If you are starting with layouts, we recommend you to start with just one layout. Use the HelloWorldTheme in this case.

Layout's PHP class file

Each layout needs a bit of PHP programming. In the layout's PHP class file you configure the layout.

The layout's PHP class file is stored here:

ROOT/
  src/
    Themes/
      MyFirstTheme/
        Layouts/
          WithoutSidebar.php

Example: Location of PHP class file for the layout called WithoutSidebar.

Following chapters describe the content of this file.

Layout sections

Each layout is split into sections. The way how the layout is split depends solely on the designer - on you. This means - your layout can have any sections arranged in any way you like.

Sections in layout are defined in the layout's PHP class file, in the getPreviewHtml() method. It is as simple as this example:

<?php

namespace Surikata\Themes\HelloWorld\Layouts;

class WithoutSidebar extends \Surikata\Core\Web\Layout {

  public function getPreviewHtml() {
    return "
      <div class='row'>
        <div class='col col-12' data-panel-name='header'>Header</div>
      </div>
      <div class='row'>
        <div class='col col-12' data-panel-name='navigation'>Navigation</div>
      </div>
      <div class='row'>
        <div class='col col-12' data-panel-name='section_1'><i>Section 1</i></div>
      </div>
      <div class='row'>
        <div class='col col-12' data-panel-name='footer'>Footer</div>
      </div>
    ";
  }
}

Example: Definition of sections in the very simple layout called WithoutSidebar

Using a layout defined like this, you will be able to attach the plugins to following sections:

• Header
• Navigation
• Section 1
• Section 2

It is important to specify the "technical name of the section. As per the example above, we have the "Section 1" which is referenced as "section_1". This referencing is done in the data-panel-name* attribute.

Each section must have its data-panel-name attribute:

<div class='row'>
  <div class='col col-12' data-panel-name='section_1'><i>Section 1</i></div>
</div>

Example: Referencing "Section 1" to "section_1" using data-panel-name attribute

Attaching content to sections

As you might already understood the real content of the page is not attached to the layout but to the layout's sections. This attaching is done in the administration panel where a page can be edited.

Finally, the content in the section is represented by a plugin. Plugins are prepared by the backend programmer and they prepare variables for your templates.

Conclusion

The magic for defining the structure of the webpage's design is simple:

• You have several layouts in your theme. You can have as many layouts as you want.
• You split each layout into sections.
• You attach the page to a selected layout and plugins (prepared by your backend programmer colleague) to each section in the layout.

There is one piece of puzzle missing to create the complete design - the templates for plugins. That's where the design of a plugin is created.

Surikata

E-commerce development framework