Add poplets to a product listing

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

The poplets added to a product are only available on the Individual product (large) layout layout, this means you cannot display the poplets on the list layout or a custom layout for example.

Using module_data however you can access the paths of the poplets and create your own thumbnail images effectively creating your own poplet listing. :

Step 1 - insert a product module with your custom template

For this example we will use an individual product listing with a custom template. Insert a single product item on any page:

{module_product catalogId="25481" productId="3909340" template="/poplet-test.tpl"}

Step 2 - create the custom template that will be used to render the product

Once this module is in place create the custom template and paste in this bit of code:

{module_data version="v3" resource="products" resourceid="{{id}}" fields="poplets" collection="md_poplets" template=""}
<div class="shop">
    <h1 class="product_title entry-title">{{name}}</h1>
<p class="price"><span class="amount">{tag_saleprice}</span></p>
    {% if md_poplets.poplets %}
    {% assign ppl = md_poplets.poplets | split: ";"%}
   
    <div class="poplets">
    <table cellspacing="0" class="productPoplets">
      <tbody>
        <tr>
          {% for item in ppl %}
          <td class="productPopletsItem"><img id="catpproduct_{{forloop.index}}" src="{{item}}"/></a></td>
          {% endfor %}
        </tr>
      </tbody>
    </table>
    </div>
    {% endif %}
<h2>Description</h2>
<p>{{description}}</p>
</div>

the code above will be your layout used to render the product. You will notice we are using module_data to get the product's poplets (which are not exposed by default). {{id}} will take the value of the product being listed.

We then check IF the current product has any poplets and start rendering the div and table if so.

Then we iterate over the poplet images and add wash one in its own tr element - you can add onclick events at this point if you need to have a Lightbox effect when clicking the images.