Adding multiple products in the cart

Bo Møller

Posted on 15/09/2011 13:01:33

Hey everybody,

I'm trying to add multiple products through an AJAX call, but it just doesn't work.
I've tried several ways.

I'm testing by just calling the URL where the cart is located.

This is an example of a command that works:

Kurv.aspx?cartcmd=emptycart

Here's an example of what I'm trying to do, but doesn't work:

Kurv.aspx?CartCmd=addMulti&ProductLoopCounter1=1&ProductID1=PROD48&VariantID1=&UnitID1=&Quantity1=1&ProductLoopCounter2=2&ProductID2=PROD18&VariantID2=&Unitid2=Quantity2=1&Redirect=/da-DK/AJAX-Kurv/Kurv.aspx

I've tried removing the empty fields, and I've tried several combinations of uppercase and lowercase naming.

Can someone please help here? I've looked through the other examples here on Engage as well.

Replies

Vladimir

Posted on 16/09/2011 05:43:03

Hi!

You should use a form tag to add multiple products. But you can do ajax submit of that form...

Best regards,
Vladimir

Bo Møller

Posted on 16/09/2011 10:19:38

Hi Vladimir, thanks for your reply.

I am aware of this - just not what it should look like.
Does anyone know exactly how this form should look?

Morten Snedker

Posted on 16/09/2011 10:29:15

Hi Bo,

Vladimir is right - when using addmulti it takes the values from form fields, whereas add uses querystring. So you may want to create some hidden fields you can ask upon.

Regards /Snedker

Morten Snedker

Posted on 16/09/2011 10:48:44

Hi Bo,

Something like this:

<form name="multiForm" id="multiForm" method="post">
    <input type="hidden" name="CartCmd" id="CartCmd" value="addMulti" />
   <!--@LoopStart(Products)-->
       <!--@Ecom:Product.Form.Multi.HiddenFields-->
        <!--@Ecom:Product.Number--> - <!--@Ecom:Product.Name-->
        <!--@Ecom:Product.Price.Price--><br />
        <input type="text" name="Quantity!--@Ecom:Product.LoopCounter-->" value="0" />
    <!--@LoopEnd(Products)-->
</form>

Though, I'll try go get it to standard that is takes querystring as well. But I don't suppose you can wait up for that! :-)

Regards /Snedker

Jeppe Eriksson Agger

Posted on 16/09/2011 11:06:24

This post has been marked as an answer

Or, if you want to do it in JS, you can do something like this:

// Or however you want to store your product IDs
var productIDs = ["PROD1", "PROD2"];

var params = {};
params["CardCmd"] = "addmulti";
for (var i = 0; i < productIDs.length; i++) {
    var productLoopCounter = i+1;
    params["ProductLoopCounter" + productLoopCounter] = productLoopCounter;
    params["ProductID" + productLoopCounter] = productIDs[i];
    params["VariantID" + productLoopCounter] = "";
    params["UnitID" + productLoopCounter] = "";
    params["Quantity" + productLoopCounter] = 1;
}

var url = "Kurv.aspx";

If you use PrototypeJS:
new Ajax.Request(url, {
    method: 'post',
    parameters: params
});

If you use jQuery:
$.post(url, params);

Hope this helps

- Jeppe

Votes for this answer: 0

Bo Møller

Posted on 19/09/2011 09:37:17

Hey Jeppe, We have done exactly what you write, but it doesn't work.
We are now attempting to create a from like the one Morten suggests.

It would be best if we could generate and submit a query through javascript though. Any input here is welcome.

Jeppe Eriksson Agger

Posted on 19/09/2011 11:02:36

Okay, so I made a small typo. It should have been CartCmd and not CardCmd.

I've tested it here, and it works.

- Jeppe

Bo Møller

Posted on 19/09/2011 15:01:41

Hi all,

Thanks for the help guys. We finally got it to work!
Jackie (The primary developer on the project) will post the code. Right Jackie? :-)

Jackie Nagel

Posted on 19/09/2011 16:29:12

This is what we ended up using:

//Parameter is an array of product ids and  quantities according to the pattern:
//["ProductID1-Quantity1","ProductID2-Quantity2"]
function addItemsToCart(productIDs){
  
var params = {};
params["CartCmd"] = "addMulti";
for (var i = 0; i < productIDs.length; i++) {
	var splittedProducts = productIDs[i].split('-');
    var productLoopCounter = i+1;
    params["ProductLoopCounter" + productLoopCounter]  = productLoopCounter;
    params["ProductID" + productLoopCounter] = splittedProducts[0];
    params["VariantID" + productLoopCounter] = "";
    params["UnitID" + productLoopCounter] = "";
    params["Quantity" + productLoopCounter] = splittedProducts[1];
}
params["Redirect"] = "/da-DK/AJAX-Kurv/Kurv.aspx";

$.ajax({
      type: "POST",
      url: "/da-DK/AJAX-Kurv/Kurv.aspx",
      data: params,
      async: false,
      success: function(data){
		$('#prices').html(data);
      }
    });
}

Yet again, thanks alot for your suggestions! :-)

Nicolai Høeg Pedersen

Posted on 19/09/2011 16:53:08

Hi Jackie

Glad you guys figured it out - and thanks for sharing (and caring!)

Jacob Storgaard Jensen

Posted on 09/05/2012 22:25:15

Hi Jackie,
Does this solution require a form to work? How is it triggered?

I've got this page where I try to add X amount of each product to my cart via ajax, then slide down (show) the cart in the top showing the added products and the total cart amount. (The jagged blue field behind the white box in the top should slide down).

http://spiseriget.net.dynamicweb-cms.com/da-DK/Bestil-Menu.aspx

You must be logged in to post in the forum

Developer forum

Adding multiple products in the cart

Replies