This article describes how to remove individual products and entire product lines from a shopping cart by using AJAX requests.

The product line in a shopping cart must have an element that can be clicked to initialize the removal script. In this example, we use the default output of the {Cart} tag, in which the element can be found based on the a.CartRemove identifier.

Below you can see the example of a simplified shopping cart page implementation:

<div class="CartContainer">
    {Cart}
</div>

A product is removed from the shopping cart by sending a POST request to the address /cart/delete/n where n is the ID of the product to be deleted.

/*
* The removal script is executed after the a.CartRemove element is clicked
*/
$("a.CartRemove").on("click", function(event) {
    event.preventDefault();
    
    /*
    * The ID of the product to be removed is retrieved
    * from the link.
    */
    productId = $(this).attr("href").split("/")[3];

    /*
    * A POST request is sent
    */
    $.ajax({
        type: "POST",
        url: "/cart/delete/" + productId,
        success: function() {

            /*
            * The product is now removed and the shopping cart is reloaded
            * so that the customer can see the change.
            */
            $.ajax({
                type: "GET",
                url: "/interface/Cart",
                success: function(data) {
                    $(".CartContainer").html(data);
                }
            });
        }
    });
});

You can implement multiple functions connected to purchasing by using asynchronous JavaScript calls. Read also the following articles about asynchronous actions:

Removing products with the default theme's Cart plugin

In MyCashflow's default theme, removing products from the shopping cart has already been implemented by using an AJAX function.