Developer forum

Forum » Development » Adding multiple products by AJAX

Adding multiple products by AJAX

Oscar Romin
Oscar Romin
Reply

Hello!

I have a page in my website where there are ordinary products which are loaded in from DW-backend by setting the index in the DW-admin app for ecommerce, so then they appear in the GetLoop("Products"). But then on this same page you should also be able to buy 'add-ons' for these products which I load in via ProductService.GetAllProducts() or whatever, and then my plan is to add these products to the cart via AJAX and the ordinary product via the normal form post. Basically, I both get products from DW-backend and from the ProductService. 

My problem is though that I can't seem to be able to put my AJAX products in the cart like a want to. I found this link http://wrap.dynamicweb-cms.com/produkter/clothing/accessories which had some good javascript on it to save the products one by one by calling the url with query params like this: url/moreurl&cartcmd=add&ProductID=myproduct&Quantity=1, but then this becomes very complicated it seems when handling multiple products and I don't have the product.GetString("Ecom:Product.LoopCounter")-thing which appears to append on all properties like QuantityXX, ProductIDXX etc, which it does when dealing with this kind of thing and the products come from DW-backend and you can call @product.GetValue("Ecom:Product.Form.Multi.HiddenFields").  

Is there basically anyway to go around this and add multiple products to the cart with addMulti, but not getting the products from DW-backend? Or do I simply have to call url/moreurl&cartcmd=add&ProductID=myproduct&Quantity=1 several times to add all my products?


Replies

 
Jeppe Eriksson Agger Dynamicweb Employee
Jeppe Eriksson Agger
Reply

Hi Oscar,

I'm not completely sure I follow what you've done here.

If I understand you correctly, you're using the Product Catalogue module on a page to render products in the frontend. But you use the ProductService to fetch the product objects also? If this is correct, then you're basically doing the work of the Product Catalogue again. Products fetched by the module are already available for use in the "Products" loop that you refer to. No need to fetch them again -- unless you need some specific product data that isn't available as a tag in the loop. I would recommend changing this so you're not re-fetching product data.

Adding multiple products to the cart is possible. Take a look at this forum post: https://doc.dynamicweb.com/forum/development/development/adding-multiple-products-in-the-cart. The accepted answer tells you how to do it. Be aware that there's a typo in the answer which is discussed in the two post following.

I hope this helps you.

- Jeppe

 
Oscar Romin
Oscar Romin
Reply

Hello Jeppe!

I am doing so because the products that are arriving from the Product Catalogue are not the same products as which I'm fetching manually from the ProductService, and I cannot to my knowledge add multiple indexes in the Product Catalogue app. 

That post looks promising, but it's still not working for me even after fixing your typo. My code looks like this now:


            var productIDs = ["ID1", "ID2"]; //this part is of course more complicated but the array looks like this after some calculations

    var params = {};
            params["CartCmd"] = "addMulti";
            //params["OrderContext"] = "ORDERCONTEXT1";
            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 = "Default.aspx?id=" + '@GetPageIdByNavigationTag("json-cart swe")';
        $.ajax({
            type: "POST",
            url: url,
                data: params,
            async: false,
            success: function (data, textStatus, jqXHR) {
                console.log(data);
            }
        });
 
From what I can see this looks about exactly similar as in the link you linked, but do you see anything really stupid I've missed? 
Worth mentioning might be that the cart-page that I'm posting to has an OrderContext set and I want the products to end up in that ordercontext, hence the outcommented line which specifies the Ordercontext as a param. I tried that as well but no luck. I can see that I at least arrive at the page because I get a response so the url is correct. 
 
Jeppe Eriksson Agger Dynamicweb Employee
Jeppe Eriksson Agger
Reply

Looking at your code, I don't see anything obvious. It seems to be correct. You say you're getting a response from that page, I'm curious as to what that response contains. If you don't know if it's a success or fail response, you could try and add a "complete" or "error" callback and inspect the response to see if something else might be wrong.

I've tried the code here myself and it's working as excepted. This example, which is a slight rewrite of the given code, is behaving as excepted:

var settings = {
  "async": false,
  "url": "http://96.local.dynamicweb.dk/Default.aspx?ID=1",
  "method": "POST",
  "data": {
    "ProductLoopCounter1": "1",
    "ProductID1": "PROD1",
    "VariantID1": "",
    "UnitID1": "",
    "Quantity1": "1",
    "ProductLoopCounter2": "2",
    "ProductID2": "PROD2",
    "VariantID2": "",
    "UnitID2": "",
    "Quantity2": "1",
    "CartCmd": "addmulti"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

- Jeppe

 
Oscar Romin
Oscar Romin
Reply

Hmm, it seems that if I look in the Network section of the webconsole I see that my page returns a 302 HTML code, and then redirects me to the page I'm currently on again, and I get the page I'm currently on as a response in the jQuery function. Then maybe my post-request is never actually processed by the system?

I found in DW admin on the page I'm posting to that the redirect-boolean had been set to true for some reason, but it's false now and it still redirects me and I dont have any code in my templates that I use in the cart that can redirect. 

Do you know of any setting perhaps in the Cart-app or the Product Catalogue-app (I have both on my json-cart that I post to) that may cause me to redirect even though I don't post the Redirect-param in my postdata?

 
Oscar Romin
Oscar Romin
Reply

It also seems that when I AJAX-call my json-cart page without any postdata, it does not redirect. So then maybe some error occurs behind the scenes? Could I get a hold of that error somehow without the page redirecting?

 
Nicolai Pedersen
Reply
This post has been marked as an answer

add redirect=false to the request and/or change the response type of the page you are posting to. You can do that on the page properties: https://doc.dynamicweb.com/documentation-9/content/content/pages#3243 set content type to json - that should prevent the redirect.

BR Nicolai

Votes for this answer: 1
 
Oscar Romin
Oscar Romin
Reply

It seems I have fixed the issue. My problem was that on my page I was calling the AJAX-function from I always clear the cart in C# when first loading that page. So then when the page redirected to that page behind the scenes it cleared the cart, which I didn't think of since I was not the one who had written that C# code. Adding redirect=false to the request stopped the redirects from happening and thus the products are now added to the cart correctly. 

Thank you both for your help :)

 

You must be logged in to post in the forum