Product Data Example | Communifire Documentation

This page provides an example of the dynamic data widget.

We create the following product list page in Page Builder with a dynamic data widget:

The links in the ID column lead to a product page for the specified product, which is produced by a dynamic data widget as well.

1. Add Product List Template

First, we create a dynamic data template and name it Product List. This template will display product data from our database in a table. The variables enclosed in double brackets are HTML encoded. Some of the variables in double brackets ({{productid}}, {{name}}, {{category}}, {{price}}) are the column names in our table.

<div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{WidgetTitle}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
                <table class="table">
                  <thead>
                    <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Category</th>
                      <th>Price ($)</th>
                    </tr>
                  </thead>
                  <tbody>
                  {{#each Contents}}
                    <tr>
                      <td><a href="/productpage?id={{productid}}">{{productid}}</a></td>
                      <td>{{name}}</td>
                      <td>{{category}}</td>
                      <td class="price">{{price}}</td>
                    </tr>
                   {{/each}}
                  </tbody>
                </table>        
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
    </div>
    {{/if}}
</div>

We make the product ID entry a link that opens a new page: /productpage?id={{productid}}. We will create /productpage in Page Builder later.

2. Add Product List Widget

Next, we create a new Page Builder page and specify /products as the URL. We select a layout and add a dynamic data widget.

We set the widget's properties to the following:

In Templates, we select Product List.

When we open /products, we see the product information from our database in the Product List template. The product IDs are links and open new pages.

3. Add Product Page Template

Next, we create another dynamic data template and name it Product Page. This template will display a single product's image, name, category, and price.

<div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{WidgetTitle}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
        {{#each Contents}}
        <div class="product">
        <img src="{{imageurl}}" />
        <div class="product-info">
           <p class="name">{{name}}</p>
           <p class="category">Category: {{category}}<br/>
           ${{price}}</p>
           </div>
        </div>
        {{/each}}      
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
    </div>
    {{/if}}
</div>

4. Add Product Page Widget

Finally, we create a new Page Builder page and specify /productpage as the URL. We select a layout and add a dynamic data widget.

We set the widget's properties to the following:

When we click one of the product ID links on the product list page, we see this page:

The URL of this page is /productpage?id=100. The widget has parsed the id from the URL and used it in its query to the database.