Liquid Product List tag - {tag_productlist,,,,,, collection="prodList" template=""}

[BrandKits]

Hi,

I stumbled across this tag on the 'Enable other Liquid objects' doc as I was trying to find a solution to customise the HTML output of products so I can use a Masonry layout.

I added the code to the overall layout:

{tag_productlist,,,,,, collection="product-list" template=""}

<ul id="masonry-container" class="row small-block-grid-2 medium-block-grid-4 large-block-grid-4">

{% for item in product-list.items %}

<li class="product-list-masonry">

•• content **

</li>

{%endfor%}

</ul>

It works fine as list view, but nothing renders when clicking to the detail view. Can this tag be used yet? How do I render the product detail layout?

I also tried {module_data} but got into similar issues.

{module_data resource="products" version="v3" fields="id,name,tags,smallImage,largeImage,description,attributes,custom1,custom2,custom3,custom4,isOnSale,canonicalUrl" skip="0" limit="100" order="id" collection="products"}

Any pointers appreciated.

Thanks

Paul

[Mihai_Tica · Accepted solution]

Hi Paul,

You should use something like this instead:

{% if globals.get.ProductID %}
<p>This is the product detail layout</p>
{% else %}
<ul id="masonry-container" class="row small-block-grid-2 medium-block-grid-4 large-block-grid-4">
{% for item in custom-tag.items %}
<li class="product-list-masonry">
    {{item.name}}
</li>
{%endfor%}
</ul>
{% endif %}

You first need to tell whether you are in the product "large" view or on a catalog listing its products. After you know that you can either build the product view or loop the products and build the listing.

Hope this helps,

Mihai

[A3_Aaron]

Hey Mihai,

I am trying this as well, and I can get the <p>This is the product detail layout</p>  after adding the globals.get.productID, but am stuck trying to figure out how to actually output the content. I've tried a forLoop within and nothing is outputting on the product detail page.

I am using the {tag_productlist,,,,,, collection="product-list" template=""} as above and it is working fine for the small/list view, but not on the large view.

Suggestions?

Thanks,

Aaron