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.