A variantloop inside a variantloop aka loop inception

I have a product list, on which I wish to list all variants as if they were independent products. This is easy sauce:

<!--@LoopStart(Products)-->
  <!--@LoopStart(VariantCombinations)-->

    <div>My amazing markup</div>

  <!--@LoopEnd(VariantCombinations)-->
<!--@LoopEnd(Products)-->

Now then, when you click a product, it will fold out to reveal more information, including a list of thumbnails of all the variants of the same product. This is a bit trickier, because it will be a loop inside a loop.

<!--@LoopStart(Products)-->
  <!--@LoopStart(VariantCombinations)-->

    <div>My amazing markup</div>
       
    <!--@LoopStart(VariantCombinations)-->
      <img src="<!--@Ecom:Product.ImageSmall.Clean-->" />
    <!--@LoopStart(VariantCombinations)-->

  <!--@LoopEnd(VariantCombinations)-->
<!--@LoopEnd(Products)-->

Of course, that won't work. But how would you go about it? Move the inner part to a product page, and then request that via AJAX on click? Show it all in a hidden container on the page, and DOM manipulate it to the correct place onLoad or onClick? Voodoo?

Developer forum

A variantloop inside a variantloop aka loop inception

Replies