Tässä artikkelissa ohjeistetaan yksittäisten tuotteiden sekä kokonaisten tuoterivien poistaminen ostoskorista AJAX-pyyntöjen avulla.

Poistamista varten ostoskorin tuoterivillä on oltava elementti, jota klikkaamalla poistoskripti voidaan ajaa. Tässä esimerkissä käytetään {Cart}-tagin oletustulostusta, josta tämä elementti löytyy tunnisteella a.CartRemove.

Alla esimerkin pelkistetty ostoskorisivun toteutus:

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

Ostoskorista poistetaan tuote lähettämällä POST-pyyntö osoitteeseen /cart/delete/n, jossa n on poistettavan tuotteen ID.

/*
* 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);
                }
            });
        }
    });
});

Voit tehdä useimmat ostamiseen liittyvät toiminnot asynkronisilla JavaScript-kutsuilla. Lue myös seuraavat asynkronisia toimintoja käsittelevät artikkelit:

Poistaminen oletusteeman Cart-pluginilla

MyCashflow'n oletusteemassa tuotteiden poistaminen ostoskorista on valmiiksi toteutettu AJAX-toiminnolla.