Tuotteiden lisääminen ostoskoriin JavaScriptin avulla

Johdanto

Tuotteen ostotyökalut tulostetaan tuotelistoilla {ProductAddToCart}-tagilla ja tuotesivulla {ProductBuy}-tagilla. Nämä tagit tuottavat erilaisen HTML-merkkauksen, joten lisääminen ostoskoriin JavaScriptin avulla tapahtuu molemmilla eri tavalla.

Tässä artikkelissa käydään läpi tuotteiden lisääminen ostoskoriin sekä tuotelistoilta että tuotesivulta. Mukana on JavaScript-esimerkki molemmista tapauksista, jonka voit halutessasi kopioida omaan teemaasi ja muokata sitä tarpeeseen sopivaksi.

Molemmissa tämän artikkelin esimerkeissä sivulla on myös ostoskorin esikatselu, jossa käytetään {MiniCart}-tagia:

<div class="MiniCartContainer">
    {MiniCart}
</div>

Tämä on sisällytetty esimerkkeihin, koska ostoskorin esikatselu on hyvä päivittää ilman erillistä sivunlatausta aina, kun tuotteita lisätään ostoskoriin AJAX-pyynnöillä.

Tuotteiden lisääminen oletusteemassa

Lisääminen tuotesivulta

Ohessa näet malliksi {ProductBuy}-ostolomakkeen HTML-koodin:

<form action="/cart/" enctype="multipart/form-data" method="post" class="BuyForm">
    <fieldset>
        <input type="hidden" name="products[0395][product_id]" value="29" class="HiddenInput">
        <div class="FormItem BuyFormQuantity">
            <label for="BuyFormQuantity-0395">Quantity:</label>
            <input type="number" id="BuyFormQuantity-0395" name="products[0395][quantity]" size="3" min="0" value="1">
        </div>
        <div class="FormItem FormSubmit">
            <button type="submit" class="SubmitButton AddToCart"><span>Add to cart</span></button>
        </div>
    </fieldset>
</form>

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
    	if (o[this.name]) {
    		if (!o[this.name].push) {
    			o[this.name] = [o[this.name]];
    		}
    		o[this.name].push(this.value || '');
    	} else {
    		o[this.name] = this.value || '';
    	}
    });
    return o;
};

Lähetä tuotteeen ostolomake POST-pyynnöllä palvelimelle. Voit käyttää tähän esim. jQueryn ajax()-funktiota:

/*
* Suoritetaan lisääminen ostoslomakkeen lähetyspainikkeen
* klikkauksella.
*/
$(".BuyForm .AddToCart").on("click", function(event) {
	event.preventDefault();

	/*
	* Otetaan talteen ostolomake
	*/
	var $form = $(this).closest(".BuyForm");

	/*
	* Lähetetään POST-pyyntö
	*/
	$.ajax({
		type: "POST",
		url: "/cart",

		/*
		* Käytetään serializeObject()-funktiota muotoilemaan data
		* palvelimella luettavaan muotoon.
		*/
		data: $form.serializeObject(),
		success: function() {

			/*
			* Lopuksi päivitetään ostoskori tuotteen lisäämisen jälkeen
			*/
			$.ajax({
				type: "GET",
				url: "/interface/MiniCart",
				success: function(data) {
					$(".MiniCartContainer").html(data);
				}
			});
		}
	});
});

ajax()-funktion settings-parametrissä voitaisiin määrittää callback-funktio myös epäonnistuneen pyynnön varalle. beforeSend-attribuutissa taas voitaisiin tarvittaessa validoida lomakkeen arvoja.

Lisääminen tuotelistoilta

Tuotteiden lisääminen ostoskoriin JavaScriptillä suoraan tuotelistoilta toimii eri logiikan mukaan, koska listoilla käytettävä {ProductAddToCart} ei tulosta lomaketta, vaan pelkän linkin, joka ohjaa tuotesivulle:

<a href="/product/29/pants" title="Add to cart" class="Button AddToCart">
    <span>Add to cart</span>
</a>

Jotta tuote voidaan lisätä ostoskoriin suoraan tuotelistalta, tuotteen ID-numero on poimittava linkin kohdeosoitteesta. Tämän jälkeen tuote voidaan lisätä sen ID:n perusteella ostoskoriin:

/*
* Adding products from lists
*/
$(".Product .AddToCart").on("click", function(event) {
	event.preventDefault();

	/*
	Ensin otetaan talteen klikattu linkki ja sen ympärillä oleva tuote-elementti
	*/
	var $link = $(event.currentTarget);
	var $product = $link.closest('.Product');

	/*
	* Tuote-elementin luokkanimien perusteella nähdään, onko sillä variaatioita, räätälöintejä tai ladattavia tiedostoja.
	*
	* Jos niitä on, ohjataan kävijä tuotesivulle tekemään tarvittavat valinnat, jotta tuotteen voi lisätä ostoskoriin.
	*/
	if ($product.hasClass('ProductVariations') || $product.hasClass('ProductTailorings') || $product.hasClass('ProductDownloads')) {
		window.location.href = $link.attr('href');
	}

	/*
	* Muuten lisätään tuote suoraan listalta ostoskoriin.
	*/
	else {

		// Poimitaan tuotteen ID linkin osoitteesta
		productID = $link.attr('href').split('/')[2];

		// Lähetetään POST-pyyntö, jolla tuote lisätään ostoskoriin.
		$.ajax({
			type: "POST",
			url: "/cart",

			/*
			* Pyynnön sisältönä lähetetään JSON-objekti, jossa tarvitaan vain
			* tuotteen ID.
			*/
			data: { products: [{ product_id: productID }] },
			success: function() {

				/*
				* Onnistuneen pyynnön jälkeen päivitetään ostoskori.
				*/
				$(".MiniCartContainer").empty();
				$.ajax({
					type: "GET",
					url: "/interface/MiniCart",
					success: function(data) {

						$(".MiniCartContainer").html(data);
					}
				});
			}
		});
	}
});