Ostoskori

Perusteet

Ostoskorin AJAX-toiminnot suoritetaan Barebones-teeman cart.js-pluginin avulla.

Oletusarvoisesti plugin on oletusteemassa asetettu suorittamaan kaikki ostoskoriin liittyvät toiminnot AJAX-pyyntöinä. Jos teemassa ovat mukana cart.js-plugin sekä /scripts/custom.js ja plugin on alustettu oletusarvoisella tavalla, sinun ei tarvitse ottaa pluginin toimintoja erikseen käyttöön.

Plugin sisältää koukkufunktioita, joiden sisältämä JavaScript-koodi suoritetaan määrättyjen tapahtumien yhteydessä. Katso koukkujen kuvaukset seuraavasta kappaleesta. Koukkujen avulla voit helposti muokata toimintoja, jotka suoritetaan esim. kun tuote lisätään ostoskoriin AJAX-pyynnöllä.

cart.js-pluginin koukkufunktiot

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

beforeAddProduct()

Suoritetaan kun kävijä on klikannut tuotteen ostopainiketta, mutta ennen kuin tuote on vielä ostoskorissa.

afterAddProduct()

Suoritetaan kun tuote on lisätty ostoskoriin.

beforeRemoveProduct()

Suoritetaan kävijän painettua ostoskorituotteella poistolinkkiä, mutta ennen kuin tuotetta on vielä poistettu ostoskorista.

afterRemoveProduct()

Suoritetaan kun tuote on poistettu ostoskorista.

beforeUpdate()

Suoritetaan ennen ostoskorin päivittämistä. Ostoskori päivitetään Cart-pluginin updateCart()-funktiolla.

afterUpdate()

Suoritetaan ostoskorin päivittämisen jälkeen.

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

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

cart.js-pluginin alustaminen

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

Alla on malliksi Barebones-teeman toteutus cart.js-pluginin alustamisesta ja koukkujen määrittelystä:

MCF.Cart.init({
	beforeUpdate: function ($cart) {
		MCF.Loaders.show($cart);
	},

	afterUpdate: function ($cart) {
		MCF.Loaders.hide($cart);
		MCF.Theme.updateCarts();
	},

	beforeAddProduct: function ($buyForm) {
		MCF.Loaders.show($buyForm);
	},

	afterAddProduct: function ($buyForm) {
		MCF.Loaders.hide($buyForm);
		MCF.Theme.updateMiniCarts()
			.then(function () {
				MCF.Drawers.toggleByName('cart');
		});
	},

	beforeRemoveProduct: function ($removeLink) {
		var $product = $removeLink.closest('.Product');
		$product.fadeOut('fast');
	},

	afterRemoveProduct: function () {
		MCF.Theme.updateCarts();
	}
});

Tuotteiden lisääminen ostoskoriin

Plugin on valmiiksi asetettu lisäämään tuotteet AJAX-pyynnöillä, kun tuotteen ostopainiketta painetaan. Tätä ominaisuutta ei siis tarvitse ottaa teemassa erikseen käyttöön, jos et ole tehnyt skripteihin muutoksia. Alla on kuitenkin havainnollistettu, kuinka lisääminen voidaan suorittaa ostopainikkeen klikkauksella:

$(".BuyForm .AddToCart").on("click", function (event) {
	event.preventDefault();

	var $buyForm = $(event.currentTarget).closest(".BuyForm");
	MCF.Loaders.show($buyform);

	MCF.Cart.addProduct($buyForm)
		.then(function () {
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					$("#Cart").html(html);
					MCF.Loaders.hide($buyForm);
				});
		});
});

Tuote siis lisätään ostoskoriin antamalla pluginin addProduct()-funktiolle parametrinä ostolomakkeen sisältävä jQuery-objekti.

addProduct()-funktion sisällä suoritetaan koukut beforeAddProduct() ja afterAddProduct().

Tuotteiden poistaminen ostoskorista

Tuotteet poistetaan ostoskorista pluginin removeProduct($removeLink)-funktion avulla, jossa $removeLink-parametri on jQuery-objekti, joka sisältää ostoskorituotteen poistolinkin.

Plugin on valmiiksi asetettu poistamaan tuotteet AJAX-pyynnöllä, kun poistolinkkiä klikataan. Tätä ominaisuutta ei siis tarvitse ottaa teemassa erikseen käyttöön, jos et ole tehnyt skripteihin muutoksia. Alla on kuitenkin havainnollistettu, kuinka poistaminen voidaan suorittaa poistolinkin klikkauksella:

$(".ProductRemove").on("click", function (event) {
	event.preventDefault();

	var $link = $(event.currentTarget);
	MCF.Loaders.show("#Cart");

	MCF.Cart.removeProduct($link)
		// Nyt tuote on poistettu ostoskorista
		.then(function () {
			// Päivitetään ostoskorielementin merkkaus
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					$("#Cart").html(html);
					MCF.Loaders.hide("#Cart");
				});
		});
});

Ennen poistamista suoritetaan koukku beforeProductRemove() ja sen jälkeen koukku afterProductRemove().

Ostoskorin päivittäminen

Pluginin updateCart()-funktion avulla voit päivittää ostoskorin, kun siihen on tehty muutoksia.

Ostoskori kannattaa päivittää esimerkiksi silloin, kun sinne on lisätty tuotteita. Tämän voit tehdä käyttämällä updateCart()-funktiota koukussa afterAddProduct():

$("#Cart").on("submit", function (event) {
	event.preventDefault();

	var $form = $(event.currentTarget);
	MCF.Loaders.show($form);

	MCF.Cart.updateCart($form)
		.then(function () {
			return $.get('/interface/Helper?file=helpers/cart')
				.then(function (html) {
					MCF.Loaders.hide($form);
					$("#Cart").html(html);
				});
		});
});

Esimerkissä näytetään loader.js-pluginin avulla ensin overlay ostoskorin päällä beforeAddProduct()-koukussa. Tämän jälkeen päivitetään ostoskori ja poistetaan overlay afterAddProduct()-koukussa.