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: "", // the data attribute can be left blank or removed altogether
        success: function() {
            /* Now the shopping cart is empty
            *
            * The element that contains the MiniCart tag is emptied
            */
            $("#MiniCartContainer").empty();

            // MiniCart is retrieved asynchronously and written back to its original location
            $.get('/interface/MiniCart', function (response) {
                $("#MiniCartContainer").html(response);
            });
        }
    });

// The function that empties the shopping cart is placed in the submit button
$.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.