Dynamically add products to cart?

[djkencloud]

Hello,

Is there any way to add more than one type of product to the cart via one event or API call?

I have a client who is a wholesaler of goods, they want to have a grid like ordering system, with sizes in rows, and colours in columns.

I can see how you could display this kind of grid via the liquid tags, but I can't work out if its possible to add all the items to the cart.

The {tag_addToCart} doesn't have much documentation, I see when it renders in the DOM that it has extra arguments, but I can only work out what a few of them are for.

I did also come across the method - bcInternals.shop.addToCart - but this is throwing an error, I suspect it maybe depreciated legacy code.

Any ideas?

Cheers,

Ken.

[djkencloud]

I've done a bit more investigating and am still unable to work out if this is possible.

As a small update - I was wrong - the function bcInternals.shop.addToCart does work (partially).  Here it is...

bcInternals.shop.addToCart = function (e, t) {

  t = t || {}, t.frame = t.frame || "", t.buynow = t.buynow || !1, t.selectedOptions = t.  || [], t.quantity = t.quantity || 1, t.skipRefreshAfter = t.skipRefreshAfter || !1, context = e.context || {}, context.templateTypeId = context.templateTypeId || 3, AddToCart(e.catalogueId, e.productId, t.frame, context.templateTypeId, t.buynow, t)

It ends up calling the global 'AddToCart' function anyway (you can set skipRefreshAfter here to false which is handy). 

On the downside the quantity parameter (see t object above) is passed through to AddToCart, but doesn't seem to be used by the AddToCart function, which grabs the quantity directly from the DOM.

I may have hit a dead end.

Ken.

[Stephen_Blignault1]

Hey Ken,

I make "quick-order" type pages for customers quite often, where they want a page that lists out all their products in a grid like fashion allowing logged in customers to easily batch process quantities and attributes and with one "Add all items to cart" button click, voila, they are all added to cart.

Here is start, update as you please and post back what worked for you.

Step 1) Adjust your markup to take note of the Product ID and Catalogue ID, these are important to get AddToCart() to function as desired.

<input id="Units_{{ id }}" class="productTextInput" type="text" value="0" name="AddToCart_Amount" data-catalogue-id="{{ catalogId }}" data-product-id="{{ id }}">

Step 2) Using JS, apply a one-click-adds-all-items-to-cart button.

// onclick add all quantity values to shopping cart.

$('.addAllToCartTrigger').on('click', function( event )

{

    event.preventDefault();

    var pid = cid = 0;

    $('.productLineItem.item').each(function( key, element ) // CHOOSE YOUR OWN IDENTIFIER PER PRODUCT ITEM

    {

        var _quantityObj = $( element ).find('input');

        var _quantityVal = +( $( _quantityObj ).val() );

        if ( _quantityVal )

        {

            catalogId        = $( _quantityObj ).data( 'catalogue-id' );

            productId       = $( _quantityObj ).data( 'product-id' );

            AddToCart( catalogId, productId, '', 3, '', '', true );

        }

    });

});

Bonus) In the event you are not using Product Large detail page, then you may have to apply the following code:

// Every time you run AddToCart(), BC needs to refresh/update the DOM, for reasons I'm not going to go into for now.

// The '/_System/assets/tpl/quickOrderListItem.tpl' refers back to a custom template being run on the following module:

// {module_product catalogId="{{ productLineItem.catalogueId }}" productId="{{ productLineItem.productId }}" useLi="true" template="/_System/assets/tpl/quickOrderListItem.tpl"}

// As I am using a custom template, it's possible to let AddToCart() know that there WAS a custom template to begin with.

AddToCart( catalogId, productId,'',3,'/_System/assets/tpl/quickOrderListItem.tpl','jg06iJJNlq8+/XDINgiJ+7OAnGg=',false);

// ps. Im not 100% sure what the 2nd to last attribute is, looks like caching, but I don't know. I got this text from running {tag_addToCart} manually once.

The above is rather elaborate but it gives you a foundation for understanding a method I have come up with to add multiple items to cart. I have this and several variants of this working on many websites, so it works.

Hope this helps Ken!

[djkencloud]

Hello Stephen,

Thanks for taking the time to reply to my problem.

I can see how your solution would work for a group of different product ID's.

But, I am looking to add items with the same product ID, but different attribute ID's.   For example a t shirt that comes in different colours and sizes.

I can't see from your above code, how I pass in the different attribute options to the AddToCart Function.   Or how I would pass in a quantity value for each either.

Let me know if I'm missing something - thanks again.

Ken.

[djkencloud · Accepted solution]

Hey Stephen, I found a solution.

I'm not sure why AddToCart() doesn't use the quantity value that is passed from bc.internals.addToCart() - but it doesn't so that was the fix.

Apologies for the raw paste but I couldn't get the syntax highlighting to work correctly.

Thanks again for replying.

k.

var e = {tag_product_json};

var t = {

    buynow: false,

    selectedOptions: [13401326, 13401328],

    quantity: 10,

    skipRefreshAfter: true,

}

AddToCartCustom(e, t);

function attributeArray(attrArr) {

    if (attrArr.length > 0) {

        var newArr = [];

        for (var i = 0; i < attrArr.length; i++) {

            newArr.push(attrArr + "|1")

        }

        return newArr;

    } else {

        return [];

    }

};

function AddToCartCustom(e, t) {

    var context = e.context || {};

    var cartId = readCookie("CartID");

    var catalogueId = e.catalogueId;

    var productId = e.productId;

    var units = t.quantity;

    var relatedProductIds = "";

    var attributeIDs = attributeArray(t.selectedOptions);

    var instructions = "";

    var vertical = false;

    var templateTypeID = context.templateTypeId || 3;

    var isQuote = false;

    var targetFrame = "";

    var v2 = true;

    var templateName = "";

    var templateHash = "";

    var cartSummaryTemplateName = null;

    var cartSummaryTemplateHash = null

    var result = CMS.CatalogueRetrieve.ServerSideAddItemToOrder(cartId, catalogueId, productId, units, relatedProductIds, attributeIDs, instructions, vertical, templateTypeID, isQuote, targetFrame, v2, templateName, templateHash, cartSummaryTemplateName, cartSummaryTemplateHash);

    if (result.value[1] === 0 && t.skipRefreshAfter) {

        // added to cart

        return result;

     } else {

          // do other checks and balances

     }

}