Removing multiple line items at once

rdrewniak
New Member
2 0 2

I'm working on a system which gives the user the ability to add and remove multiple bundled/grouped products. I have been able to successfully add the grouped products (I have successfully marked each of those line items with a single timestamp-based ID as an line_item property). However, I can't seem to successfully remove all of the items via the Ajax API.

My plan is to loop through the line items, finding those with the correct group ID, triggering the Ajax request for each one, then once there's none left, reload the page. Unfortunately, when I trigger the action, it appears to loop too quickly, not waiting for a successful confirmation of line item removal, before continuing with the loop. I have attempted to push each removal request to a deffered objects array, then once it has been completed, reload the page.

Here's the JS code that I'm currently working with:

// ON REMOVE BUILD CLICK (IN CART)
$('.remove-build .l-cartremove').on('click', function(e){
	e.preventDefault();

	set_loading_graphics();

	var removed_components_arr = [];

	// Target UL of build
	var build_list = $(this).parent().parent();

	build_list.find('li').each(function(){
		if (!$(this).hasClass('remove-build')) {
			var line_item_id = $(this).find('a.l-cartremove').attr('data-line-id');

			remove_custom_component(line_item_id, removed_components_arr);
		}
	});

	$.when.apply(null, removed_components_arr).done(function(){
		location.reload();
	});
});

function remove_custom_component(line_id, removed_components_arr) {
	var remove_request = CartJS.removeItem(line_id, {
		"success": function(data, textStatus) {
			if(data.status == 'success'){
				console.log(data);
			}
		}
	});
	removed_components_arr.push(remove_request);
}

I'm at my wits end, here. Can anyone shed some light on where I'm going wrong, or advise an alternative solution to my problem?

ivandurst
Shopify Partner
5 0 0

Bump. This is useful functionality, anyone have any luck?

0 Likes
HandHugs
Shopify Expert
158 0 33

This issue has been solved here:

https://community.shopify.com/c/Shopify-APIs-SDKs/Removing-multiple-line-items-at-once/td-p/462247

I also wrote a version that could be helpful here:

var groupKey = -- insert your selector informatio here to target all items that need to be removed -- 
var qty = -- this can be a variable based on a quantity selector or a predefined number (enter 0 to delete the items)-- 
         
            //for each with matching group key, grab ID and create an array
            var delArray = [];
            $('[data-group="'+groupKey+'"]').each(function() {
            	delArray.push($(this).attr('data-id'));
            });
            for (var i=delArray.length; i--;) {
                delArray[i] = 'updates[' + delArray[i]+ ']='+qty;
            }
            var updates = delArray.join('&'); 	

        jQuery.post('/cart/update.js', updates).done(function(cart){
          jQuery.getJSON('/cart.js', function(cart) {
            } );
           //console.log('done');
        }).fail(function(){
          //console.log('fail'); 
        });
0 Likes