Section Templates Introduction

Introduction in section templates and how to properly create, make editable and publish them.

Section templates are HTML templates aka snippets ready to be injected into page. User will have option to choose section templates when creating a page.  

To publish a section template it's mandatory to have all fields filled properly and consistent. 

Section name

Most important field is section name. Naming must includ general type of section (Hero, CTA, etc..) and layout explanation (with angled image on right, simple centered). This are some examples of section names:

  • Hero: with angled image on right
  • Hero: simple centered
  • Hero: with screenshot
  • CTA: simple justified
  • CTA: split with image

See more examples of naming and categorising sections here.

Screenshots

Section must include screenshots for desktop and mobile. To see how it will look on each screen use browser "inspect elements" tool and device toolbar.

For desktop screenshot use 1920px x 1080px resolution and for mobile screenshot use 766px x 1080px resolution.

 

Data source

Section can use “hard-coded” data (custom data) or data from the database. 

Good example of section with database source is when a user wants to list products from a database.

Data source options:

  • Custom
  • Database
  •  

Components

Create editable components inside the section. 

As images placeholders we use stock images from the current theme. In theme current image sources is  “../../assets/img/1920x800/img2.jpg”. Change this to “/themes/front/assets/img/1920x800/img2.jpg”

First create new component and fill required fields:

  • Name - it will be used to access in content ( HTML). Avoid using whitespaces.
  • Source - data source custom or from database. For example if user wants to list products he will need to select a database as a data source.
  • Type - object or list. If list then the user can add multiple rows of the same fields. If object only component fields are shown.
  • Model - if source is database. User can choose the type of model ( Product, Post, Project etc..) he wants to list in this component.
  • Query - if source is database. Users can add specific queries for selected models. For example, limit the number of records or order by some column. Standard json format is used: {"categories":"1,2"} . This example query will return all products within category ID 1 and 2.

 

Component fields

Components with custom data sources need to have object fields. Users can add different types of fields. 

Create new field with fields:

  • label - just a label as display name
  • name - important as it will be used in HTML content. Whitespace is not allowed.
  • Type - field type ( input, textarea, etc…)

In case of component source custom fields are not required. User can only choose ordering and limit of chosen models. Also query can be added. Standard json format is used: {"categories":"1,2"} . This example query will return all products within category ID 1 and 2.


Add editable content

First you would need to to highlight editable content:

data-cid="{{ c_id($title) }}" class="component-container">{{ c_data($title, 'title') }}

You need to add data-cid property on the HTML tag and add a class component-container.

Function c_id(component_name) will return component ID.

To display data you will have to use function c_data(component_name, field_name). Function will return the value of a field_name from component_name.

 

Sections with database data source which depends from URL

Let’s take an example of a single product section where source depends from URL parameters. 

In order for this section to work it is required for the Page type to be Product and to have an url with slug parameter: products/{slug} . From URL {slug} parameter will match products {slug} parameter and it will show the correct product.

For example you have a product with url “macbook-pro-m1” and you have a page type “Product” with url: products/{slug}. This means that if the user types  …”products/macbook-pro-m1” it will match the product page and inside you have a product section which will find products based on URL.