Skip to main content

Accessing Product Data in the Media Lightbox

Updated over 4 years ago

Surfacing product metadata in lightbox

First, you have to be familiar with the handlebar syntax that we use to surface object variables attached to the media being shown on the lightbox.

Handlebar variables look like this:

  • #{{images.normal}}

  • #{{this.name}}

Handlebar helpers look like this:

  • #{{#if this.relatedProducts.length}}

  • #{{#each relatedProducts}}

For more information about handlebars, please refer to the official documentation here: http://handlebarsjs.com/

We include variables and helpers the default template, so you should be able to reference any of the existing handlebar variables / helpers in the template.

Exploring the objects

To access any of the "extra data" related to the product (we consume this through the product feed), you can first explore what metadata that you can surface in the lightbox by using the #{{debug}} variable in the template. Using the #{{debug}} actually allows you to output the object being shown through the template in your console:

Now you can look for the "relatedProducts" object array, and find the product_info array:

Using the object variable in the template

We now know what to use as the variable name in the template. Now we can access the object variables like so:

<ul class="products-list">
    #{{#each relatedProducts}}
    <li>
        <a class="product-list-item" href="#{{this.shop_button_url}}">
      ...
      #{{this.product_info.color}}
      ...
        </a>
    </li>
    #{{/each}}
</ul>
Did this answer your question?