Subscribe to Newsletter
#

Using Tempo Templates in Nopcommerce

Using tempo templates in nopcommerce is not an in-built feature of a nopcommerce site. This is a 3rd party application that is customized for clients as per their requirements and specifications. A Tempo template is used for rendering data in pure HTML form.

Why to be using Tempo Templates in Nopcommerce

Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. Tempo templates are mainly used to display the data fast wherein there is a bulk of it that needs to be displayed. The main benefit of using tempo templates in nopcommerce websites is fast rendering of data, as there is no data binding control and it is rendered through pure HTML.

What is a good reason for using tempo templates in nopcommerce

The following points state why using tempo templates in nopcommerce is a great idea:

  • There is a clear separation of concerns as there is no HTML in your JavaScript files and no JavaScript in your HTML.
  • Using tempo templates makes working with AJAX/JSON technology quite easy.
  • Tempo templates work in all types of browsers including Safari, Chrome, Firefox, Opera and Internet Explorer 6.

How are tempo templates integrated in a nopcommerce application?

Note: These steps are written while keeping in mind the developer's perspective:

Step 1. Firstly, include tempo script in the website where tempo templates needs to be used. The following script is the example of how script is to be included.

<script src="js/tempo.js" type="text/javascript"></script>

<script>Tempo.prepare("tweets").render(data);</script>

Step 2. Compose the data template inline in HTML. We have given an example for the users to elucidate it in simple terms.

<ol id="tweets">
  <li data-template>
      <img src="default.png" data-src="{{profile_image_url}}" />
      <h3>{{from_user}}</h3>
      <p>{{text}}<span>, {{created_at|date 'HH:mm on EEEE'}}</span></p>
  </li>
  <li data-template-fallback>Sorry, JavaScript required!</li>
</ol>

Step3. Finally the tempo templates are added in nopcommerce shopping cart application.

What are the key features of tempo templates?

  • Itty-bitty footprint, lightning-fast rendering!
  • No dependencies - Use with or without jQuery
  • Supports nested and conditional templates
  • Formatting functions and filters supported as well as safe attribute setters.
  • Inline Javascript expressions are covered by variable injections.
  • Incase JS is not used it degrades smoothly.
  • Good compatibility levels due to configurable syntax.

We have recently used tempo templates in nopcommerce site for a client. Figure 1 given below shows the screenshot wherein tempo template is used to display the list of products.

Using-Tempo-Templates-in-Nopcommerce

Figure 1

Please feel free to contact us for assistance in using tempo templates in nopcommerce.