Utilizing JSRender for Dynamic Store Location Representation

JSRender is a powerful templating engine, you can effortlessly customize and render store location data dynamically based on various conditions and user interactions. In this documentation, we’ll explore practical examples and techniques to effectively utilize JSRender for enhancing your store location content.

Our example dataset for stores is as follows.

{
  "id": 3,
  "title": "Astro Club",
  "description": "not available",
  "street": "15 Heartly Road, Parsons Hill",
  "city": "Port Elizabeth",
  "state": "Eastern Cape",
  "postal_code": "45553",
  "country": "South Africa",
  "lat": -33.947128,
  "lng": 25.591169,
  "phone": "123 226 2222",
  "fax": "",
  "email": "",
  "website": "",
  "logo_id": 0,
  "path": null,
  "marker_id": "1",
  "description_2": "",
  "open_hours": null,
  "ordr": 0,
  "slug": "45553-port-elizabeth-eastern-cape-astro-club",
  "brand": ["37"],
  "special": [],
  "event_format": [],
  "institute": [],
  "categories": [
    {
      "id": "11",
      "name": "Fitness",
      "icon": "default.png",
      "ordr": "0",
      "children": [
        {
          "id": "55",
          "name": "Gyms",
          "icon": "default.png",
          "ordr": "0",
          "children": [],
          "value": ["55", "11"],
          "len": 0
        }
      ],
      "len": 5,
      "value": ["11"]
    },
    {
      "id": "12",
      "name": "Nightlife",
      "icon": "default.png",
      "ordr": "0",
      "children": [],
      "len": 4,
      "value": ["12"]
    }
  ],
  "days_str": null,
  "address": "15 Heartly Road, Parsons Hill <br>Port Elizabeth, Eastern Cape, 45553",
  "c_ids": ["11", "12"],
  "c_names": "Fitness, Nightlife",
  "str_brand": "Nike",
  "desc_link": false,
  "link": "http://domain.com/store-details/45553-port-elizabeth-eastern-cape-astro-club/",
  "target": "_self"
}

<li class="sl-item" data-id="{{:id}}">
  <div class="sl-addr-sec">
    <div class="sl-row addr-loc">
      <div class="{{if path}}pol-sm-8 pol-8 pr-0{{else}}pol-12{{/if}}">
        <p class="sl-addr-list-title">{{:title}}</p>
        <ul>
          <li class="sl-addr">
            <i class="icon-location-1"></i>  
            <span>{{:address}}</span>
          </li>
          {{if c_names}}
          <li class="sl-categories">
             <i class="icon-tag"></i>
             <ul class="inner-cat-list">
                {{for categories}}
                <li>
                   <span>{{:name}}</span>
                </li>
                {{/for}}
             </ul>
          </li>
          {{/if}}
        </ul>
      </div>
      {{if path}}
      <div class="pol-sm-4 pol-4">
        <div class="sl-logo-cont">
          <div class="sl-logo-box">
            <img alt="store-logo" alt="store-logo" src="{{:URL}}Logo/{{:path}}">
          </div>
        </div>
      </div>
      {{/if}}
    </div>
    {{:social_icons}}
    <div class="sl-act-btns mt-3">
      <a class="btn btn-asl s-direction">[Directions]</a>
      {{if link}}
      <a target="{{:target}}" class="btn btn-asl btn-asl-outline s-visit-website" href="{{:link}}">[Website]</a>
      {{/if}}
      {{if dist_str}}
      <div class="sl-miles">
        <span class="s-distance">{{:dist_str}}</span>
      </div>
      {{/if}}
    </div>
  </div>
</li>

Conditional Rendering of Store Offerings based on Categories #

{{if c_names.indexOf('Fitness') !== -1}}
  <div class="fitness-location">
    This location offers fitness services.
  </div>
{{/if}}

{{if c_names.indexOf('Nightlife') !== -1}}
  <div class="nightlife-location">
    This location offers nightlife activities.
  </div>
{{/if}}

{{if c_names.indexOf('Fitness') !== -1 && c_names.indexOf('Nightlife') !== -1}}
  <div class="fitness-and-nightlife-location">
    This location offers both fitness services and nightlife activities.
  </div>
{{/if}}

In this above example:

• We’re using indexOf() to check if a specific category exists in the c_names array.
• If the category exists, we render the corresponding section.
• You can customize the HTML content within each condition block to suit your needs.

Looping through Categories and Subcategories #

{{for categories}}
  <div class="category">
    <h2>{{:name}}</h2>
    <ul class="subcategories">
      {{for children}}
        <li>{{:name}}</li>
      {{/for}}
    </ul>
  </div>
{{/for}}

In this example, we’re iterating over the categories and displaying each category’s name along with its subcategories.

Categories name in the String Format for InfoBox Content #

{{if c_names}}
<div class="pol-6">
   <div class="info-addr-inner">
      <i class="icon-tag"></i>
      {{:c_names}}
   </div>
</div>
{{/if}}

Conditional Rendering based on Store Description #

{{if description}}
  <div class="store-description">
    <p>{{:description}}</p>
  </div>
{{else}}
  <div class="no-description">
    <p>No description available.</p>
  </div>
{{/if}}

Here, we’re checking if the store has a description. If it does, we display it. Otherwise, we show a default message indicating that no description is available.

Highlight the Brand Names #

{{if str_brand}}
  <div class="store-brand">
    <h3>Prominent Brand</h3>
    <p>{{:str_brand}}</p>
  </div>
{{/if}}

Enhanced Address Display #

<div class="store-address">
  <h3>Address</h3>
  <p>{{:street}}, {{:city}}, {{:state}}, {{:postal_code}}, {{:country}}</p>
</div>

This example presents a comprehensive view of the store’s address, including street, city, state, postal code, and country, ensuring users have all the necessary information for locating the store.