Developer forum

Forum » Development » Adding Multiple Products with Variants to the Cart at Once

Adding Multiple Products with Variants to the Cart at Once


Reply
Hi there,

I have an eCommerce page that needs to display multiple products with variants at once with the option to add them to the cart.

Can somebody show me some sample code for custom functionality or refer me to the documentation that shows how this is done from a server side persepective?

Cheers,

Imar

Replies

 
Reply
Hi Imar

If you use the default product renderer, you can use the tag Ecom:Product.Form.Multi.HiddenFields. This tag contains the id and variant id for each product.

Then have all your products wrapped inside a single form and submit with the cart command 'addmulti' (CartCmd=addmulti)

If you don't use the default renderer, you can add these hidden fields for each product to make it work with addmulti:

ProductLoopCounter
ProductID
VariantID
VariantText
UnitID
Quantity
Type
ProductName
ProductNumber

All fields have the loopcounter as a postfix. E.g.:
ProductLoopCounter1 = 1
ProductID1 = PROD123
VariantID1 = <variantid>
And so on...

The loopcounter just needs to be unique.

 - Lasse
 
Reply
Hi Lasse,

Thanks for that. But I am not sure if this is going to work. For example, consider this:

<!--@LoopStart(Products)-->
<!--@Ecom:Product.Form.Multi.HiddenFields-->
<!--@LoopEnd(Products)-->

When this renders, I get stuff like this:

<input type="hidden" name="ProductLoopCounter1" id="ProductLoopCounter1" value="1" />
...
<input type="hidden" name="ProductLoopCounter1" id="ProductLoopCounter1" value="1" />
...
<input type="hidden" name="ProductLoopCounter1" id="ProductLoopCounter1" value="1" />

Which is pretty invalid markup because of the duplicate IDs.

Also, how would this enable me to selectively add products to the cart? E.g. I could have something like this:

Variant Name 1
Color ______\/    Size_________\/       Type_______ \/
[] Add to cart

Variant Name 2
Color ______\/    Size_________\/       Type_______ \/
[] Add to cart

Variant Name 3
Color ______\/    Size_________\/       Type_______ \/
[] Add to cart

Button: Add selected items to cart

What if a user checks off item 1 and 3 (the [] markers represent checkboxes, \/ are drop down lists) and clicks Add selected items to cart? How would I determine at the server which items to add to the cart and which variant combinations to add?

Imar
 
Reply
Hi Imar

The Quiantity parameter is the key to this.
When this is zero (or not set) the product will not be added to the cart.

If you always want to add just one of each product you can have the checkbox named 'Quantity<loopcounter' and its value set to '1'.

About the problem of the loopcounter allways being 1: How are the products rendered? Can't find any errors in the code here.

 - Lasse
 
Reply

They are rendered like this:

Dynamicweb.Templatev2.Template productRowTemplate = template.GetLoop("Products");

foreach (Product currentProduct in products)
{
 Renderer renderer = new Renderer();
 renderer.RenderProduct(currentProduct, renderExtendedProperties, productRowTemplate);
 renderer.RenderGroup(CurrentGroup, productRowTemplate);

 productRowTemplate.SetTag("MyCustomStuf", "SomeValue);
 productRowTemplate.CommitLoop();
}

>> When this is zero (or not set) the product will not be added to the cart.

Right; that makes sense. And so when loading, I can ignore the initial VariantId, and update it with client script to match the selection made by the user, right?

Thanks,

Imar

 
Reply
Hi Imar

I found out the problem with the loopcounter. Normally the products are rendered from an internal RenderProducts method, and from here the loopcounter is incremented in each loopiteration.

If you need it to work with your code you just add the counter to the RenderProduct call like this:

var loopCounter = 1;

foreach (Product currentProduct in products)
{
 Renderer renderer = new Renderer();
 renderer.RenderProduct(currentProduct, renderExtendedProperties, productRowTemplate, loopcounter);
 renderer.RenderGroup(CurrentGroup, productRowTemplate);

 productRowTemplate.SetTag("MyCustomStuf", "SomeValue);
 productRowTemplate.CommitLoop();

 loopCounter++;
}


And yes, it should work if you update the variant id just before submitting.


Happy coding!

 - Lasse

 

You must be logged in to post in the forum