Poplets Using {module_data}

[Define Instruments]

I'm trying to insert poplets directly into my Large Product Layout using divs, instead of the default table output. I have been following the instructions on this page.

So far I have the following. It does work, but if a product has no poplets, it still tries to output the code and comes up with an image with a blank 'src' attribute. Not sure what to try next. Any help would be very much appreciated

                    {module_data version="v3" resource="products" resourceid="{{id}}" fields="poplets" collection="md_poplets" template=""}

                    {% if md_poplets.poplets -%}

                    {% assign ppl = md_poplets.poplets | split: ";" -%}

                    <div class="poplets">

                        <div id="productPoplets">

                          {% for item in ppl -%}

                          <div class="small-2 columns left productPopletsItem">

                              <a onclick="" rel="" href="{{item}}" title="">

                                  <img id="catpproduct_{{forloop.index}}" src="{{item}}?Action=thumbnail&width=65&height=65&USM=1" alt="{{name}}" style="cursor:pointer;" />

                              </a>

                          </div>

                          {% endfor -%}

                        </div>

                        <div class="clear"></div>

                    </div>

                    {% endif -%}

[Liam Dilley]

You do not need to use module_data AT ALL here.

If you view the output of your product in the layout through this|json you will see that if a product has poplets then there is a full object array of all the poplets in data form that you can construct what ever you like with.

[Define Instruments]

Hi Liam - thanks for the tip.

I am relatively new to BC and have never used JSON before. I've just read a couple of articles in the BC developers' guide, and am still confused about where to start

Can you provide me with a few more pointers? Do I need to render the entire page in JSON format, or can I use module_json to achieve what I want? (This second option would definitely be preferable!)

I've tried {module_json, json="{{this|json}}" template="/Layouts/OnlineShop/poplets.tpl"} in my product large template, but it can't find any data.

Thanks in advance for your help.

[Liam Dilley]

Hi,

I think just spending some time reading the docs will help you.

http://docs.businesscatalyst.com/developers

<script>console.log({{this|json}});</script>

If you put that in your product large layout and view it - This outputs the large product - all the things you can access. It just puts it in json format to either make it an object to read int he console like here or if you wraped it in a pre tag render on the page.

[Define Instruments · Accepted solution]

Thank you for the link. I have read the two articles on JSON in the developer docs.

I have tried your suggestion of putting <script>console.log({{this|json}});</script> in my product large layout, as follows:

<script>console.log({{this|json}});</script>

{% if this.poplets -%}

<div class="poplets">

    <div id="productPoplets">

          {% for poplet in this.poplets -%}

          <div class="small-2 columns left productPopletsItem">

              <a onclick="" rel="" href="{{poplet.url}}" title="">

                    <img id="catpproduct_{{forloop.index}}" src="{{poplet.url}}?Action=thumbnail&width=65&height=65&USM=1" alt="{{name}}" style="cursor:pointer;" />

              </a>

          </div>

          {% endfor -%}

    </div>

    <div class="clear"></div>

</div>

{% endif -%}

For most of my products this works perfectly. However every now and then I find one product where the poplets do not appear, and the json is in the console AND rendered on the page. I don't understand why this would be happening for some products and not others. Any ideas?

**Edit - I think there was a clash with another script on the pages where the above code did not work. Seems to be working fine, now! **