Joonweb Developers Docs

Introduction to JW Tags

JW Tags is easiest modern templating engine which help designers to create dynamic template by using custom JW tags, logics, loops. operators and filters to construct a ready made template for Joonweb.

In otherword, HTML/CSS/JS is skelton of a template, however its brain will be JW tags to make it work.

Dynamic contents will be in "{{ your_content }}" which will be rendered on runtime with user inputs are covered by double braces, Later you will learn different tags according to sections.

Global Tags

Site Tags:

Tag	Details
site	Array of site configuration
site.name	Render Name of website
site.url	URL of site
site.currency	Render default store currency

Section Tags:
These tags contains section basic settings like, animation, colors, alignment etc

For basic structure of sections ie:

<section 
  id="{{section.id}}" 
  class="mysection {{section.class}} {{section.colors ? section.colors : 'background7'}} {{section.align ? 'see-text-' ~ section.align }} {{section.animation ? section.animation }}" 
  {{section.attributes}}
  {% if media %} style="background: url({{media}})no-repeat center / cover;" {% endif %} 
>

Tag	Details	Required
section.id	contains unique ID for section and is mandatory to add anyhow to every section you create. <section id="{{section.id}}">	YES
section.class	contains mandatory class for settings: <section id="{{section.id}}" class=”secard {{section.class}}”>	YES
section.colors	contains class used for changing section color and you have to put it in class ex: <section id="{{section.id}}" class=”secard {{section.colors ? section.colors }}”> <div class="second-datasecard {{section.colors2 ? section.colors2 }}"></div>	YES (If you want to use section color swapping feature) Note: You can use upto 4 color combinations in one section. {{ section.colors }} {{ section.colors2 }} {{ section.colors3 }} {{ section.colors4 }}
section.align	Contains, alignment class of section which helps to align content of sections. You can check and pass your own class accordingly.section.align output “left,right,center” you can also use it as: {{section.align ? 'see-text-' ~ section.align }}	Yes, Only if you want alignment setting in the section, else you can skip this
section.animation	This property of section contains animation class and can be used in main	NO (Required only if you want animation setting)
section.attributes	It contains required attributes for functioning of section and contains script settings and data-attributes which must be in toplevel element: <section id="{{section.id}}" class=”secard” {{section.attributes}} >	YES

User Tags
Contains user/members authentication details.

Tag	Details
user.id	renders unique userhash/id of logged member, also help in checking either user is logged in or not for example: `{% if user.id != '' %} <b> user is logged in </b> {% else %} <b> Hello guys, please login </b> {% endif %}`
user.name	renders name of user who is logged into website, example: {{ user.name }}
user.mobile	rendes user's mobile number
user.email	renders user's email if available or it returns empty.
user.avatar	render avatar image name of user

Section Tags

You must aware of Basic tags, conditions and architech of JW template, Before accessing on how to construct a section.
Construction a section is like creating a section using HTML/CSS/JS, Afterward adding JW tags, global tags, to make it fit.

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

Here, above tag is one title tag/variable which is covered using curly braces will render title provided by user on runtime.

Section Wise Rules:

Here we are going to show you section wise variables, Which is commonly used in any template.

Header Section:

Header scienerio is different than other section, as it contain different type of properties like (fixed, transparent, styles, mobile responsivenes).
Some time, We need to make seperate html for both mobile and desktop and sometime both in one. As you know Header section contains basic data like:
Logo, SiteName, Navigation, Social Icons, Email, Contact and sometime Special CTA button. Also if using Ecommerce, we can add Addtocart, login, profile, logout etc.

Basic rule of header:

Variable	Details	is Required
title	Title of the header	No
subtitle	Moto or subtitle of website	No
logo	Logo is a heart of a header section, using {{logo}} will render logo image link.	No
buttons	CTA buttons for header, like Quick Enquiry or Contact, Somewhat donate or call button	Optional
social	SocialIcons of websites like fb, twitter, insta will be render like: `<li class="social_icon"> <a href="https://facebook.com" class="page" target="_blank"> <i class="fas fa-link"></i> </a> </li> <li class="social_icon"> <a href="https://instagram.com" class="instagram" target="_blank"> <i class="fab fa-instagram"></i> </a> </li>`	Optional
phone	Renders Mobile/Phone for Header	Optional
email	Renders Emails of Website

Now, Navigation Rules It's important to add navigation in header by using "section.navigation" array.
section.navigation contains all the header menu in JSON, so we have to use `for loop` show menu.

"section":{
    "navigation":[
        {
            "label": "home",
            "link" :"index",
            "children": [],
        },
        {
            "label": "About",
            "link" :"about",
            "children": [
                {
                    "label": "About Company",
                    "link" :"about-company",
                },
                {
                    "label": "About Product",
                    "link" :"about-products",
                }
            ],
        }
    ]
}

Navigation Items [section.navigation array]:

Variable	Details	is Required
label	It can be used as {{ item.label }} for Menu Name in section.navigation loop	Yes
link	It can be used as {{ item.link}} for Link of menu in section.navigation loop	Yes
children	It contains same menu, if there is any drop down. Can be checked with if condition and nested loop if exist.	No

Basic Header HTML:

<header class="header2">
    <mobile class="mobile-header see-section">
      <div class="mob-nav-container">
        <div class="mob-contact">
          <ul class="inner-menu-contact">
            <li></li>
          </ul>
        </div>
        <a href="" class="see-logo">
          <img src="logo.png" class="" alt="logo">
          <div class="see-brand see-margin-y-auto"></div>
        </a>
        <button>
          <i class="fa fa-bars nav_button_open" aria-hidden="true"></i>
          <i class="fa fa-times nav_button_close"></i>
        </button>
      </div>
      <nav class="see-navigation">
        <div class="see-expanded" data-menu-style="default" data-menu-layout="leftpane75">
          <ul class="see-menus-mobile capt-nav bold-font ">
            <li>
              <a href="" class="see-menuitem">Home</a>
            </li>
            <li>
              <a href="" class="see-menuitem">About</a>
            </li>
            <li>
              <a href="" class="see-menuitem">Contact</a>
            </li>
          </ul>
          <div class="see-margin-y-auto call-to-action">
            <a class="see-prime-color">Quick Enquiry</a>
          </div>
          <ul class="mob-social-icons">
            <li class="social_icon">
              <a href="https://facebook.com" class="page" target="_blank">
                <i class="fas fa-link"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://instagram.com" class="instagram" target="_blank">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://twitter.com" class="twitter" target="_blank">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://youtube.com" class="youtube" target="_blank">
                <i class="fab fa-youtube"></i>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </mobile>
    <desktop class="desktop-header">
      <div class="see_header_1">
        <div class="see-width header-container">
          <ul class="social-icons">
            <li class="social_icon">
              <a href="https://facebook.com" class="page" target="_blank">
                <i class="fas fa-link"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://instagram.com" class="instagram" target="_blank">
                <i class="fab fa-instagram"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://twitter.com" class="twitter" target="_blank">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
            <li class="social_icon">
              <a href="https://youtube.com" class="youtube" target="_blank">
                <i class="fab fa-youtube"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="see_header_2">
        <div class="see-width header-container">
          <a href="" class="see-logo">
            <img src="logo.png" class="" alt="logo">
            <div class="see-brand see-margin-y-auto"></div>
          </a>
          <div class="nav-container">
            <nav class="see-navigation">
              <div class="see-expanded">
                <ul class="see-menus" data-menu-style="default" data-menu-layout="leftpane75">
                  <li>
                    <a href="" class="see-menuitem">Home</a>
                  </li>
                    <a href="" class="see-menuitem">About</a>
                  </li>
                  <li>
                    <a href="" class="see-menuitem">Contact</a>
                  </li>
                </ul>
              </div>
            </nav>
            <div class="call-to-action">
              <a class="jw-buttons">Quick Enquiry</a>
            </div>
          </div>
        </div>
      </div>
    </desktop>
</header>

When We convert it to JW Dynamic it will be like:-

<header id="{{section.id}}" class="header2 {{section.class}}" {{section.attributes}}>
    <mobile class="mobile-header see-section">
      <div class="mob-nav-container">
        {% if phone or email %}
        <div class="mob-contact">
          <ul class="inner-menu-contact">
            <li>
                {% if phone %}
                <a href="tel:{{site.phone.0}}"><i class="fa fa-phone see-lh-22"></i></a>
                {% endif %}
                {% if email %}
                <a href="mailto:{{site.email.0}}"><i class="fa fa-envelope see-lh-22"></i></a>
                {% endif %}
              </li>
          </ul>
        </div>
        {% endif %}
        <a href="{{root.url}}" class="see-logo">
          <img src="{{logo}}" class="" alt="logo">
          <div class="see-brand see-margin-y-auto">
            {% if title != '' %}<div class="see-brand-name see-fw-9">{{title}}</div>{% endif %}
            {% if subtitle != '' %}<div class="see-brand-tagline see-fw-6">{{subtitle}}</div>{% endif %}
          </div>
        </a>
        <button>
          <i class="fa fa-bars nav_button_open" aria-hidden="true"></i>
          <i class="fa fa-times nav_button_close"></i>
        </button>
      </div>
      <nav class="see-navigation">
        <div class="see-expanded" data-attributes>
        {% if section.navigation %}
          <ul class="see-menus-mobile capt-nav bold-font ">
            {% for navkey, menu in section.navigation %}
            <li>
                <a href="{{menu.link}}" class="see-menuitem">{{menu.label}}</a>
                {% if menu.children %}
                <ul class="sub-menu see-second-color">
                    {% for subkey,submenu in menu.children %}
                    <li>
                        <a href="{{submenu.link}}" class="">{{submenu.label}}</a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
            </li>
            {% endfor %}
          </ul>
        {% endif %}
        {% if buttons %}
          <div class="see-margin-y-auto call-to-action">
            {{buttons}}
          </div>
        {% endif %}

        {% if social %}
          <ul class="mob-social-icons">
            {{social}}
          </ul>
        {% endif %}
        </div>
      </nav>
    </mobile>

    <desktop class="desktop-header {{section.colors ? section.colors  : 'see-prime-color'}}">
      <div class="see_header_1">
        <div class="see-width header-container">
           {% if social %}
        <ul class="social-icons">
          {{social}}      
        </ul>
        {% endif %}
        </div>
      </div>
      <div class="{{section.colors2 ? section.colors2  : 'see-second-color'}} see_header_2">
        <div class="see-width header-container">
          <a href="{{root.url}}" class="see-logo">
            {% if logo %}<img src="{{logo}}" class="">{% endif %}
            <div class="see-brand see-margin-y-auto">
                {% if title %}<div class="see-brand-name see-fw-9">{{title}}</div>{% endif %}
                {% if subtitle %}<div class="see-brand-tagline see-fw-6">{{subtitle}}</div>{% endif %}
            </div>
          </a>
          <div class="nav-container">
            <nav class="see-navigation">
              <div class="see-expanded">
                {% if section.navigation %}
                <ul class="see-menus responsive-theme-lgray-color capt-nav bold-font" data-attributes>
                  {% for navkey, menu in section.navigation %}
                  <li>
                    <a href="{{menu.link}}" class="see-menuitem">{{menu.label}}</a>
                    {% if menu.children %}
                    <ul class="sub-menu see-second-color">
                      {% for subkey,submenu in menu.children %}
                      <li>
                        <a href="{{submenu.link}}" class="">{{submenu.label}}</a>
                      </li>
                      {% endfor %}
                    </ul>
                    {% endif %}
                  </li>
                  {% endfor %}
                </ul>
                {% endif %}
                {{member}}
              </div>
            </nav>
            {% if buttons %}
            <div class="call-to-action">
                {{buttons}}
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </desktop>
    {#JW1#}
</header>

Footer Section:

Variable	Details	is Required
title	it defines title of About	No
subtitle	Subtitle variable is secondary heading of section	No
description	It renders the description	No

About Section:

Variable	Details	is Required
title	it defines title of About	No
subtitle	Subtitle variable is secondary heading of section	No
description	It renders the description of a section	No
media	Is used for rendering media, if you would like to have two variants, you can check using "Property.media.varient == 1" 0 for image, 1 for icon & 2 for embed video (Youtube/Vemeo)	No
buttons	Buttons is for rendering buttons	No

Example of Conversion from Basic About Section [HTML] to Dynamic JW About Section:

Basic About Section:

 <section>
    <div class="text-div">
        <div class="title_class"> Sample Title </div>
        <div class="mysubtitle"> Sample Subtitle </div>
        <div class="services-desp">Our organization's professional description</div>
    </div>
    <div class="see-button-prime">
        <a class="jw-buttons btn-medium see-prime-color" href="javascript:void(0);">Contact US</a>
    </div>
    <div class="media">
        <img src="sample_image.png" alt="sample_alt">
    </div>
</section>

Converted to Dynamic JW Section:

<section 
    id="{{section.id}}"
    class=" 
        {{section.class}} 
        {{section.colors ?  section.colors : 'see-prime-color'}} 
        {{section.align ? "see-text-#{section.align}" }} 
        {{section.animation ? section.animation }}
        "
    {{section.attributes}} 
>

    {% if title != '' or subtitle != '' or description !='' %}
    <div class="text-div">
        {% if title !='' %}<div class="title_class see-title {{class.title}}" {{attributes.title}}> {{title}} </div>{% endif %}
        {% if subtitle !='' %}<div class="mysubtitle see-subtitle {{class.subtitle}}" {{attributes.subtitle}}> {{subtitle}} </div>{% endif %}
        {% if description !='' %}<div class="services-desp see-desc {{class.description}}" {{attributes.description}}> {{description}} </div>{% endif %}
    </div>
    {% endif %}
   
    {% if buttons %}
        <div class="see-button-prime {{class.buttons}}" {{attributes.buttons}}>
            {{buttons}}
        </div>
    {% endif %}


    {% if media !='' %}
    <div class="media {{class.media}}" {{attributes.media}}>
        <a {% if Property.media.hreflink != '' %} href="{{Property.media.hreflink}}" {% endif %}>
            <jw-media>
                {% if Property.media.varient == 'image' %}
                    <img 
                        src="{{media}}" 
                        alt="{{media.alt}}" 
                        {{attributes.media}} 
                        {{Property.media.effect ?  'data-parallax="scroll" data-speed="0"' : ''}}
                    >
                {% elseif Property.media.varient == 'embed' %}
                    <iframe type="text/html" 
                        src="{{media}}" 
                        title="{{media.alt}}"
                        frameborder="0" 
                        allow="accelerometer; autoplay;" 
                        width="100%" >
                    </iframe>
{% endif %}
            </jw-media>
        </a>
    </div>
    {% endif %}
    {#JW1#}
</section>

Service Section:

Very essential section of any template, it is similar to any listitem section such as Features, testimonials etc.

Variable	Details	is Required
title	Title variable is used to define text/heading of section.	No
subtitle	Subtitle variable is secondary heading of section	No
description	Description variable output description for the section.	No
media	Is used for rendering media	No
buttons	Buttons is for rendering buttons	No
footer_description	Is used for footer textif any, recommend using it after listitem.	No
footer_buttons	Is used for footer buttons if any, same like footer description.	No
listitem	Listitem is array/subsection which includes sub variables in loop. For rendering, we have to run "for loop" logic.	No
Listitems Variables	Below rules includes listitem variables in "listitem" array, first check if array has item then for start loop.
item_name	It will be listitem item_name and can be used as {{ item.item_name }} in for loop.	No
item_subtitle	It will be listitem subtitle and can be used as {{ item.item_subtitle }}	No
item_decription	It will be listitem item_decription and can be used as {{ item.item_decription }} in loop.	No
media	it will be media of listitem, it contains image link can be used as:

Good Practice

When writing your template code using JW Tags we recommend that you follow these practices.

Indent your code

Indent your code with a tab inside tags. This improves readability. Within the editors in BranchCMS a tag equals 4 spaces.

{% if store.products %}
    {% for product in store.products %}        
        <p><a href="{{ product.url }}">{{ product.title }}</a></p>    
    {% endfor %}
{% endif %}

Delimiter spacing

Put one (and only one) space after the start of a delimiter ( {{, {%, and {# ) and before the end of a delimiter ( }}, %}, and #} )

{{ variable }}
{% if variable %}
{% endif %}
{# comment #}

When using the whitespace control character do not put any spaces between it and the delimiter.

{{- variable -}}
{%- if variable -%}
{%- endif -%}
{#- comment -#}

Operator spacing

Put one (and only one) space before and after the following operators: comparison operators ( ==, !=, <, >, >=, <= ), math operators ( +, -, /, *, %, //, ** ), logic operators ( not, and, or ), ~, is, in, and the ternary operator ( ?: ).

{{ 1 + 2 }}{{ foo ~ bar }}
{% if variable is not null %}
{{ true ? true : false }}

Do not put any spaces before or after ...

{% for i in 1..10 %}{% endfor %}

Array, hash and range operator spacing

Do not put any spaces before or after ., or [ ].

Parenthesis spacing

Do not put any spaces after an opening parenthesis and before a closing parenthesis in expressions.

Do not put any spaces before and after the parenthesis used for filter and function calls.

String delimiter spacing

Do not put spaces before or after string delimiters (i.e quotes ' " ) unless you intend to include a literal space in the string.

{{ ' string' }} would include a space before "string".

Filter spacing

Do not put any spaces before or after the filter ( | ) operator.

JoonWeb Theme Guide