Barebones-teemassa yhden sivun kassan AJAX-toimintojen toteuttamista varten on saatavilla valmiit työkalut, joiden käyttö ohjeistetaan tässä artikkelissa.

Perusteet

Yhden sivun kassan osien päivittämiseen käytetään oletusteeman checkout.js-pluginia.

Plugin vaatii jQueryn toimiakseen. Voit lisätä jQueryn teemaan käyttämällä {SupportScripts}-tagia.

Oletusteemoihin jQuery on lisätty valmiiksi.

Löydät pluginin oletusteeman tiedostosta /plugins/checkout.js.

Plugin on alustettu valmiiksi tiedostossa /scripts/custom.js.

Plugin sisältää koukkufunktioita, joiden sisältämä JavaScript-koodi suoritetaan määrättyjen tapahtumien yhteydessä. Koukkujen kuvaukset löydät jäljempänä tässä artikkelissa.

Fallback-kassa

Mikäli verkkokaupan teemasta puuttuu yhden sivun kassan sivupohja, mutta yhden sivun kassa on valittu käyttöön jollekin versiolle, teemassa otetaan automaattisesti käyttöön Barebones-teeman yhden sivun kassa. Tällöin kassalle ei voi määrittää omia CSS-tyylejä tai skriptejä, vaan nämäkin tulevat Barebones-teemasta.

Kassan osien määrittäminen

Kun teemassa on käytössä checkout.js-plugin, jokainen yhden sivun kassan osa on merkattava data-checkout-part="PartName"-attribuutilla. Esimerkiksi laskutusosoite voitaisiin määritellä näin:

<fieldset id="CheckoutBillingAddress" data-checkout-part="BillingAddress">
	{CheckoutBillingAddress(
		mode: 'form',
		ajax: 'true'
	)}
</fieldset>

Nyt kun kävijä tekee muutoksia laskutusosoitteeseen, jota hallitaan {CheckoutBillingAddress}-tagin avulla, kaikki laskutusosoitteesta riippuvaiset kassan osat päivitetään automaattisesti.

Riippuvuudet määritellään /scripts/plugins/checkout.js-tiedoston dependencies-objektissa. Lue lisää riippuvuuksien määrittelystä.

Koukkufunktiot

Alla on listattu kaikki pluginin sisältämät koukut. Löydät näiden oletusasetukset tiedostosta /scripts/custom.js.

beforeUpdatePart()

Ajetaan ennen yksittäisen kassan osan päivittämistä.

afterUpdatePart()

Ajetaan yksittäisen kassan osan päivittämisen jälkeen.

beforeUpdate()

Ajetaan ennen kasan osien päivittämistä.

afterUpdate()

Ajetaan kun kaikki tarvittavat kassan osat on päivitetty.

Jos haluat lisätä teemaan omia toimintojasi koukkujen seuraamien tapahtumien yhteyteen, lisää oma koodisi koukkufunktioiden sisään.

Alla näet esimerkin koukkujen suoritusjärjestyksestä, kun asiakas muokkaa kassalla osoitetietojaan. Esimerkissä maksu- ja toimitustavat ovat riippuvaiset osoitetiedoista.

  1. Asiakas päivittää osoitetiedot kassalla.
  2. Ajetaan beforeUpdate().
  3. Ajetaan beforeUpdatePart() kaksi kertaa: ennen osoitetietojen molempien riippuvuuksien päivittämistä.
  4. Päivitetään osoitetietojen riippuvuudet, eli maksu- ja toimitustavat.
  5. Ajetaan molempien riippuvuuksien päivityttyä afterUpdatePart() (eli kun palvelin vastaa kunkin pyynnön jälkeen).
  6. Ajetaan lopuksi afterUpdate().

Koukkujen sisältö määritellään pluginin alustamisen yhteydessä. Katso ohjeet tähän seuraavasta kappaleesta.

Pluginin alustaminen

Plugin alustetaan kutsumalla sen init()-funktiota ja määrittelemällä sen sisällä pluginin käyttämät asetukset:

MCF.Checkout.init({
	afterUpdate: function () {
		MCF.Theme.updateMiniCarts();
	},

	beforeUpdatePart: function ($part) {
		MCF.Loaders.show($part);
	},

	afterUpdatePart: function ($part) {
		MCF.Loaders.hide($part);
	}
});

Esimerkissä asetetaan plugin päivittämään ostoskorien esikatselut afterUpdate()-koukussa. Sen lisäksi näytetään loaders.js-pluginin avulla latausoverlay kaikkien osien päivittymisen aikana.

$part-parametrissä välitetään funktiolle kulloinkin päivitettävä kassan osa jQuery-objektina.

Kassan osien riippuvuudet

Yhden sivun kassalla eri osat ovat riippuvaisia toisistaan. Esim. kun osoitetietoja muutetaan, pitää päätellä käytettävissä olevat toimitus- ja maksutavat.

Riippuvuuksia hallitaan tiedostossa /scripts/plugins/checkout.js:

dependencies: {
	'ShippingAddress': ['ShippingMethods', 'PaymentMethods'],
	'BillingAddress': ['ShippingMethods', 'PaymentMethods'],
	'ShippingMethods': ['PaymentMethods'],
	'PaymentMethods': []
}

dependencies-objektin avaimet ja arvot ovat kassan osien data-checkout-part-attribuuttien arvoja. Näille annetaan taulukossa jokaisen riippuvaisen osan vastaava arvo.

Yllä toimitus- ja asiakastiedoista ovat riippuvaisia toimitus- ja maksutavat. Toimitustavoista taas ovat riippuvaisia maksutavat ja maksutavoilla ei ole omia riippuvuuksia.