Ostoskorin tyhjentäminen

Johdanto

Molemmissa alla esitetyissä esimerkeissä luodaan sivulle lomake, jonka avulla ostoskori tyhjennetään:

<form id="cartEmptyForm" action="/cart/empty" method="POST">
    <button>{%ClearCart}</button>
</form>

Voit lisätä lomakkeen esim. mille tahansa sivulle, missä esitetään ostoskori tai sen osia. Eräs hyvä käytäntö on näyttää jokaisella sivulla jonkinlainen esikatselu ostoskorista (esim. {MiniCart}-tagilla) ja antaa perusteellisempi esitys ostoskorisivulla.

Ostoskorin tyhjentäminen lomakkeen avulla

Kun annat lomakkeelle attribuutin action="/cart/empty", ostoskori tyhjennetään lomakkeen lähetyksen yhteydessä. Lomakkeella ei tarvitse olla mitään muita kenttiä, kuin lähetyspainike, eli <button type="submit">-elementti.

Ostoskorin tyhjentäminen JavaScriptin avulla

Jos haluat vähentää ylimääräisiä sivunlatauksia verkkokaupassa, voit toteuttaa ostoskorin tyhjentämisen AJAX-kutsulla.

Alla olevassa koodissa ostoskori tyhjennetään ja ladataan uudestaan elementti, joka sisältää {MiniCart}-tagin:

function emptyAndReloadCart() {
    $.ajax({
        type: "POST",
        url: "/cart/empty",
        data: "",  // data-attribuutti voidaan jättää tyhjäksi tai kokonaan pois
        success: function() {
            /* Nyt ostoskori on tyhjä
            *
            * Tyhjennetään elementti, joka sisältää MiniCart-tagin
            */
            $("#MiniCartContainer").empty();

            // Haetaan MiniCart asynkronisesti ja kirjoitetaan se aiemmalle paikalleen
            $.get('/interface/MiniCart', function (response) {
                $("#MiniCartContainer").html(response);
            });
        }
    });

// Sidotaan ostoskorin tyhjennysfunktio lomakkeen lähetyspainikkeeseen
$.on("click", "#cartEmptyForm>button", function(event) {
    event.preventDefault();
    emptyAndReloadCart();
});

Jos käytät ostoskorin tyhjennyslomaketta ostoskorisivulla, kannattaa ostoskorin sisältö ladata uudestaan asynkronisesti, jotta asiakas näkee muutoksen ilman erillistä sivunlatausta.