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 uudessa oletusteemassa tuotteiden poistaminen ostoskorista on valmiiksi toteutettu AJAX-pyynnöllä.
Poistamisen hoitaa cart.js-plugin, jonka avulla on toteutettu muutkin ostoskorin AJAX-hallintatoiminnot.
Uuden oletusteeman pluginissa on lisäksi koukkufunktioita, joiden avulla voit helposti liittää omia JavaScript-toimintojasi suoritettavaksi vaikka poistettaessa tuotetta ostoskorista.