• › Ohjeet ja tuki
  • Ylläpitäjän ohjeet
  • Suunnittelijan ohjeet
  • Integraatio-opas
  • Perusteet
  • Sivupohjat
  • Tagit
  • Ohjeet
  • Barebones-teema
Näytä sivukartta
  • Tuotepakettien toteuttaminen verkkokaupan teemassa
  • Variaatiosplitterin lisääminen teemaan
  • Bannerikarusellin luominen
  • Hintojen ja ostotyökalujen näyttäminen vain kirjautuneille asiakkaille tai valituille asiakasryhmille
  • Ostoskorin jakamisen toteuttaminen teemassa
  • Ostoskorin tyhjentäminen
  • Ostoskorien palauttamisen toteuttaminen teemassa
  • Tuotteiden lisääminen ostoskoriin JavaScriptin avulla
  • Tuotteiden poistaminen ostoskorista JavaScriptin avulla
  • Muokattavan oletusteeman asentaminen
  • Yhden sivun kassan osien päivittäminen AJAX-pyynnöillä
  • Kassojen käyttöönotto teemassa
  • Tagien tulostuksen muotoilu helper-attribuutin avulla
  • Ristiinmyyntitagien ja -attribuuttien käyttäminen
  • Hakusuodattimien toteuttaminen verkkokaupan teemassa
  • Listojen luokkanimien määritteleminen
  • Tuotelistojen sivutustyökalujen toteuttaminen
  • Teematiedostojen synkronointi mycashflow-sync-työkalun avulla
  • PDF-tulosteiden muotoilu
  • Livehaun toteuttaminen verkkokaupan teemassa
  • Noston tuotesuosituksien toteuttaminen MyCashflow-teemassa

Tuotteiden poistaminen ostoskorista JavaScriptin avulla

/Ohjeet/Tuotteiden poistaminen ostoskorista JavaScriptin avulla

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:

  • Tuotteiden lisääminen ostoskoriin JavaScriptin avulla
  • Ostoskorin tyhjentäminen
  • Yhden sivun kassan osien päivittäminen AJAX-pyynnöillä

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.

Parent topic: Ohjeet

Aiheeseen liittyviä sivuja

  • Tuotteiden lisääminen ostoskoriin JavaScriptin avulla
  • Tuotteiden poistaminen ostoskorista JavaScriptin avulla
  • Verkkokaupan perustaminen
  • Ominaisuudet
  • Palvelut
  • Ulkoasu
  • Hinnasto ja avaus
  • Referenssit
  • Kumppanit
  • Tietoturva
  • Ohjeet ja tuki
  • Usein kysytyt kysymykset
  • MyCashflow blogi
  • Tilaa uutiskirje

info@mycashflow.fi
0600 16101
(1,92 €/min sis. alv)
Tarkemmat yhteystiedot

© Pulse247 Oy / MyCashflow | Palvelun käyttöehdot | Rekisteriseloste | Tietoa evästeiden käytöstä | Status