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.