I am building a custom module that needs to show multiple products on the same page. For each product, I need to be able to do the following:
1. Display up to three related drop-down list for variants. E.g. Size, Color and Type. These drop-downs should be filtered / filled based on the previous options when they are available as a variant.
2. Allow multiple products to be selected and added to the cart. Each product can be part of a set, so users need to be able to select one ore more products and add them at once.
With craploads of server side code, API calls and a rediculous amount of JavaScript I can more or less make this work for a single product although it's pretty shaky and ugly. However, I run into problems when I have multipe products. One of the reasons for this problem is that inside my nested loop that writes out the variants, I can't access the loop counter defined in the outer loop.
For example, consider this:
<!--@LoopStart(Products)-->
var myList<!--@Products.LoopCounter--> = new VariantSelector();<!--@LoopStart(VariantGroups)-->
group = new VariantGroup("<!--@Ecom:VariantGroup.ID-->","<!--@Ecom:VariantGroup.Name-->","<!--@Ecom:VariantGroup.Label-->");
<!--@LoopStart(VariantOptions)-->group.Options.push(new VariantOption("<!--@Ecom:VariantOption.ID-->","<!--@Ecom:VariantOption.Name-->"));
<!--@LoopEnd(VariantOptions)-->myList<!--@Products.LoopCounter-->.Groups.push(group);
<!--@LoopEnd(VariantGroups)-->
<!--@LoopStart(VariantCombinations)--> myList<!--@Products.LoopCounter-->.Combinations.push(new VariantCombination("<!--@Ecom:VariantCombination.VariantID-->"));
<!--@LoopEnd(VariantCombinations)-->
<!--@LoopEnd(Products)-->
In the second call to myList (to fill a JavaScript variable defined in the outer loop), I don't get access to the @Products.LoopCounter template tag which I need to successfully declare the myList outside the loop and use it inside one, and repeat that multiple times. E.g.:
var myList1;
myList1.Groups.push(....)
myList1.Groups.push(....)
myList1.Groups.push(....)
var myList2;
myList2.Groups.push(....)
myList2.Groups.push(....)
myList2.Groups.push(....)
Can someone show me how to do this? Is there any source code available from demo projects that show this is done?
Cheers,
Imar