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.

/*
* Suoritetaan poistoskripti a.CartRemove-elementin klikkauksella
*/
$("a.CartRemove").on("click", function(event) {
    event.preventDefault();
    
    /*
    * Otetaan linkin osoitteesta talteen poistettavan
    * tuotteen ID.
    */
    productId = $(this).attr("href").split("/")[3];

    /*
    * Lähetetään POST-pyyntö
    */
    $.ajax({
        type: "POST",
        url: "/cart/delete/" + productId,
        success: function() {

            /*
            * Nyt tuote on poistettu, joten ladataan ostoskori uudestaan, että
            * muutos saadaan asiakkaan näkyville.
            */
            $.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.