JoonWeb Theme Guide

By using basic logical tags you can define template with logics for example if, else, or any such tags.

Tags are wrapped with curly brace percentage {% your_logic %} , these tags just for conditions and will not be rendered any how in templates.
For better understanding, an example below using if logic will solve your problem.

For example if title is empty, its div will hide, so we can write in JW template like:

{% if title != '' %} <div class="mytitle"> {{ title }} </div> {% endif %}

Logical Tags:

• Conditional Tags: If, else, elseif
• Loop: forloops

JW Template supports basic operators that could be used in conditions and tags to ensure a enchanic ability for designers to do dynamic things with their templates by using operators such as:

Operator Function

Operator	Defination
==	equals
!=	does not equal
>	greater than
<	less than
>=	greater than or equal to
<=	less than or equal to
or	or Condition A or Condition B
and	and Condition A and Condition

In Addition of logical operator and tags, we will have to fit section tags to the section to provide dynamic content to implement into template.

For example, In about us section, we have Tags such as title, subtitle, description, media and buttons. All Section tags/object are covered with double curly braces. For better understand below are the sample on how tags are covered

{{ title }}

Here, above tag is one title tag which is covered using curly braces. Here ar

Conditional Tags:

If, else, elseif:

if:

Using if will help you to create quick logics in template by the help of variable of  logical operators (==, !=, > , < . >= etc).

if syntax:

{% if your_condition is true %} <b>HTML code to display</b> {% endif %} 

Example:

{% if user.id != '' %} <b>Hello, User </b> { % endif %}

In above, example "Hello, User" will only be printed if user is logged in. for more information about user tags, Refer to Global Tag
 

 else:

If you understand the meaning of if, you must be aware of "else". it is simple like: if userid is not blank it will show otherwise it wil show hello guys. Here otherwise is else. syntax example:

if syntax:

{% if your_condition is true %} <b>Yes</b> {% else %} <b>No</b> {% endif %} 

Example:

{% if user.id != '' %} <b>Hello, User </b>  {% else %} <b>Hello Guest </b> {% endif %}

Like example of if, the above example will shows "Hello Guest", if  user.id is empty.


Elseif:
It is use for having multiple condition, example if name is ram, Hello ram, else if name is aman, hello aman, else hello unknow.

Usage:.

{% if user.name == 'ram' %} 

 <b>Hello Ram</b> 
 
{% elseif user.name == 'aman' %} 

 <b>Hello Aman </b> 

{% elseif user.name == 'rahul' %} 

 <b>Hello Rahul</b> 

{% else %}

<b>Sorry I dont know your name </b> 

{% endif %}

In other word you can use if for evualate the expression.

{% if  user.isLogged == false %}
    <p>Hi, Guest you are not allowed to access here, Please login</p>
{% endif %}

You can also use "if" to check either array/object is empty or not.
 

{% if users %}
    <ul>
        {% for user in users %}
            <li>{{ user.name }}</li>
        {% endfor %}
    </ul>
{% endif %}

Note
If you want to test if the variable is available, use if users is defined instead.
You can also use not to check for values that evaluate to false:

For checking multiple conditions ,You may use `and` and  `or` command example:

{% if product.price > 500 and product.price < 2000 %}
    <p>You are choosing a budget product between Rs.500 and Rs.2000 </p>
{% endif %}

For checking multple instance using elseif and else can be used You can use more complex expressions there too:

{% if product.stock > 10 %}
   Available
{% elseif product.stock > 0 %}
   Only {{ product.stock }} left!
{% else %}
   Sold-out!
{% endif %}

 

The ternary operator (?:) - Shorthand of if, else.

{{ foo ? 'yes' : 'no' }}

Above code means:

if `foo` is `true` show `yes` else show `no`

{{ foo ?: 'no' }}

or

{{ foo ? foo : 'no' }}

 

{{ foo ? 'yes' }}

 or

{{ foo ? 'yes' : '' }}

 

Evaluates:

if foo show yes else show nothing

The null-coalescing operator (??:)

{{ foo ?? 'no' }}

Above code Returns the value of foo if it is defined and is not null, otherwise it will return "no".

For Loops:

For loop is a common logic for showing data in array or object, It can be help to fetch products, images, blog posts, cart items, or any listitems in an array or object.
It is also compulsary in Listitem sections like services, features, testimonials etc.

For example, suppost blog.items is a array and we need to run loop, First need to check if blog.items is an array and is not empty. For doing so lets check.
If you are not aware of using "if, else" Please refer to "if, else, endif" topic.

Usage of For Loop:

        {% if blog.items %}
          <ul class="articles">
            {% for post in blog.items %}
              <li>
                <a href="{{post.url}}"><div class="list-head">{{post.title}}</div></a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}

The above code iterates over each item in a sequence and displays it in a list format.
 

Advance Mode

The sequence can be an array or an object that implements the Traversable interface. To iterate over a range of numbers, the `..` operator can be used:

{% for i in 0..10 %}
    * {{ i }}
{% endfor %}

The above code will print all numbers from 0 to 10. The `..` operator can also be used with letters:

{% for letter in 'a'..'z' %}
    * {{ letter }}
{% endfor %}

The above code will print all numbers from 0 to 10. The `..` operator can also be used with letters:

If a step different from 1 is needed, the range function can be used instead.

The loop variable provides information about the current iteration of the loop. It includes the following variables:

• loop.index: The current iteration of the loop (1-indexed).
• loop.index0: The current iteration of the loop (0-indexed).
• loop.revindex: The number of iterations from the end of the loop (1-indexed).
• loop.revindex0: The number of iterations from the end of the loop (0-indexed).
• loop.first: True if first iteration.
• loop.last: True if last iteration.
• loop.length: The number of items in the sequence.
• loop.parent: The parent context.

{% for user in users %}
    {{ loop.index }} - {{ user.name }}
{% endfor %}

Conditional For Loop

Conditions can be added to the loop to filter the sequence during iteration. In the following example, only active users are displayed:

<ul>
    {% for user in users if user.active %}
        <li>{{ user.name }}</li>
    {% endfor %}
</ul>

If no iteration takes place because the sequence is empty, the `else` clause can be used to display a replacement block example:

<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% else %}
        <li><em>no user found</em></li>
    {% endfor %}
</ul>

 

Iterating over Keys

Note: By default, the loop iterates over the values of the sequence. To iterate over keys, the `keys` filter can be used:

<h1>Products</h1>
<ul>
    {% for key in products|keys %}
        <li>{{ key }}</li>
    {% endfor %}
</ul>

Iterating over Keys and Values:

To access both keys and values, the following code can be:

<h1>Products</h1>
<ul>
    {% for key, product in products %}
        <li>{{ key }}: {{ product.title }}</li>
    {% endfor %}
</ul>

Iterating over a Subset:

You can use the slice filter to iterate over a subset of values:

<h1>Top 5 Products</h1>
<ul>
    {% for product in products|slice(0, 5) %}
        <li>{{ product.title }}</li>
    {% endfor %}
</ul>

In this example, the `slice` filter is used to get the first 5 items from the products array sequence and iterate over them.
 

Filters are use with variables to manipulate it for better dynamic output, it can be render as:
This is a advance filters, so read before applying:
 

Filter	Details
date	Help in modify the given date format like {{ "now"| date("m/d/Y") }} {{ post.created | date("d-m-y") }}
date_modify	Usage: {{ post.created | date_modify("+1 day")| date("m/d/Y") }}
escape	for escaping input, {{ user.name | escape }}
format_currency	for adding currency in price
join	joining array
keys	helpful during loops
length	For get length of Array/Object {{ items | length }}
lower	For making lower character {{ "Hello World" | lower }}
number_format	formating integers in number format
striptags	removing extra html from input
trim	trimming spaces
url_encode	Encoding of url