Engine syntax

Interpolation

Interpolation is a way to print out the dynamic data inside the HTML structure.

Syntax

Description

@print(variable)

Print out the variable

@lang(variable)

Print out the variable or string which will be supported multiple

@attr()

Print out the escaped of variable into attribute of HTML element

section.lh
<h1 class="@attr(section.settings.class)">
Hello @print(section.settings.name)! Welcome to the Layouthub.com
</h1>

Evaluate

The engine is built in Javascript, In some situations, it's useful to embed logic code into your views. You can use the blade @js directive to execute your logic code. It works similarly to <?php and ?> in PHP programming language.

Name

Syntax

Start

@js

End

@endjs

section.lh
<ul>
@js
let items = section.settings.items_group;
items.map((item) => {
print('<li>'+item.name+'</li>');
// the print function works same with @print()
})
@endjs
</ul>

Conditionals

You may construct if statements using the @if, @elseif, @else, and @endif directives. These directives function identically to their Javascript counterparts:

Name

Syntax

if

@if (conditions)

else if

@elseif (conditions)

else

@else

endif

@endif

unless

@unless(!conditions)

section.lh
@if (section.settings.limit_items < 5)
Product items limit less than 5
@elseif ( section.settings.limit_items < 10)
Product items limit less than 10
@else
Product items limit greater than 10
@endif

For convenience, Blade also provides an @unless directive:

section.lh
@unless (section.settings.show_logo == 'yes')
Customer don't want to show logo
@endunless

Switch case

Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

Name

Syntax

switch

@switch (variable)

case

@case (value)

break

@break or @endcase

default

@default

endswitch

@endswitch

section.lh
@switch (section.settings.head)
@case 'one'
<h1>The case one of variable section.settings.head<1>
@break
@case 'two'
<h2>The case two</h2>
@break
@default
<h3>The default</h3>
@break
@endswitch

For Loop

In addition to conditional statements, Engine provides simple directives for working with Javascript's loop structures. Again, each of these directives functions identically to their Javascript counterparts:

Name

Syntax

for

@for (contitional statements)

endfor

@endfor

elsefor

@elsefor // incase array has no items

endelse

@endelse

section.lh
// Loop JSON object
@for (object as key => item)
<p>@print(key): <strong>@print(item)</strong></p>
@elsefor
<p>No items</p>
@endelse
// Loop an array
@for (array as item)
<p>@print(item)</p>
// The current index is: _i
@endfor
// Loop sequentially
@for (var i=0; i<10; i++)
<p>@print(i)</p>
@endfor

While loop

Name

Syntax

while

@while (conditions)

endwhile

@endwhile

section.lh
@var i=10
@while (i > 0)
<p>@print(i--)</p>
@endwhile

Including sub-views

Engine's @include directive allows you to include a Engine view from within another view (file *.lh) in /includes folder. All variables that are available to the parent view will be made available to the included view via section.assign

Notice: You should separate it to a sub-view, it will cleaner than and load faster than

Name

Syntax

include

@include('name', assign)

section.lh
includes/menu.lh
section.lh
<div>
<div class="logo">
<img src="%URL%logo.png" />
</div>
<div class="main-menu">
@include('menu')
</div
</div>
includes/menu.lh
<ul>
<li><a href="/">Home</a></li>
<li><a href="/collections/all">Catalog</a></li>
</ul>

Javascript callback

You can write your javascript callback function for section template file section.lh or any Include Sub-Views file. The callback will between the @javascript and @endjavascript The callback will be called after the HTML of template file is rendered with some arguments.

Name

Description

this

The HTML Node of curent view

section.url

The http url of current section

section.settings

All settings of current section

section.lh
<div id="my-section">
<a href="#">Click me</a>
</div>
@javascript
// this is the HTML Node div#my-section
$(this).find('a').on('click', (e) => {
alert('Clicked on you');
});
@endjavascript