Remove specific products from cart on change

Shopify Discussion
2

Your concept and initial implementation are on the right track, but it seems like the script’s logic is not fully aligned with your requirements, especially in differentiating between removing all products and only those with a specific data-collection attribute. Here’s how you can refine your approach to achieve the desired functionality:

  1. Refine Attribute Check: Initially, ensure that your script correctly identifies cart items with the specified data-collection attribute (tier-1 to tier-5). It’s essential to verify that this part works as intended.

  2. Adjust Action on Quantity Decrease or Removal: Instead of clearing the entire cart, you’ll want to specifically target and remove items that match the tier-1 to tier-5 criteria when a product quantity is decreased or a product is removed.

  3. Update the Cart Accordingly: After removing the specified items, you’ll need to refresh or update the cart to reflect these changes.

Given your description, let’s adjust your script to focus on removing only the products with the tier- data attribute upon a quantity decrease or product removal, rather than clearing the entire cart.

$(document).ready(function() {
    // Function to check and remove tier products
    function checkAndRemoveTierProducts() {
        // Variable to hold products to be removed
        let productsToRemove = [];

        // Iterate over cart items to find tier products
        $('.media-link').each(function() {
            var collection = $(this).attr('data-collection').trim().toLowerCase();
            if (collection.includes('tier-')) {
                var tier = parseInt(collection.split('tier-')[1]);
                if (tier >= 1 && tier <= 5) {
                    // Assuming there's a way to identify each product uniquely, e.g., by a data attribute like data-line-item-key
                    productsToRemove.push($(this).attr('data-line-item-key'));
                }
            }
        });

        // Remove identified tier products from the cart
        if (productsToRemove.length > 0) {
            productsToRemove.forEach(function(lineItemKey) {
                $.ajax({
                    url: `/cart/change.js`,
                    method: "POST",
                    data: { quantity: 0, line: lineItemKey }, // Set quantity to 0 to remove the item
                    success: function(cart) {
                        console.log('Tier product removed from cart');
                        // Optionally, refresh the cart display here without a full page reload
                    }
                });
            });
        }
    }

    // Bind the function to events that indicate a potential change in cart item quantities or removals
    $(document).on("click change", ".sd_mini_removeproduct, .quantity-button.quantity-down, .ajaxcart__qty-num", function(evt) {
        checkAndRemoveTierProducts();
        // Consider debouncing this function if it gets triggered too frequently
    });
});

Key Changes and Considerations- Targeted Removal: This script specifically targets and removes products identified by the tier-1 to tier-5 attributes. Ensure each cart item can be uniquely identified for removal, such as by using a data-line-item-key attribute or similar.

  • Ajax Requests: For each tier- product found, an AJAX request is made to update the cart by setting the item’s quantity to 0, effectively removing it. Adjust the url and data parameters as necessary to match your cart system’s API requirements.
  • Cart Update: This approach may result in multiple AJAX requests if several tier- products are found. Consider how to efficiently refresh the cart display to reflect these changes, potentially aggregating changes to minimize the number of requests.
1 Like