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:

/*
* Adding is performed by clicking
* the submit button on the purchase form.
*/
$(".BuyForm .AddToCart").on("click", function(event) {
	event.preventDefault();

	/*
	* The purchase form is saved
	*/
	var $form = $(this).closest(".BuyForm");

	/*
	* A POST request is sent
	*/
	$.ajax({
		type: "POST",
		url: "/cart",

		/*
		* The serializeObject function is used to format the data on the server
		* into processable form.
		*/
		data: $form.serializeObject(),
		success: function() {

			/*
			* Finally, the shopping cart is updated after the product has been added.
			*/
			$.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();

	/*
	* First, the clicked link and the product element around it are saved
	*/
	var $link = $(event.currentTarget);
	var $product = $link.closest('.Product');

	/*
	* Based on the class name of the product element, you can see whether it has variations, customizations, or downloadable files.
	*
	* If so, the visitor is directed to the product page to make the necessary choices to add the product to the shopping cart.
	*/
	if ($product.hasClass('ProductVariations') || $product.hasClass('ProductTailorings') || $product.hasClass('ProductDownloads')) {
		window.location.href = $link.attr('href');
	}

	/*
	* Otherwise, the product is added directly from the list to the shopping cart.
	*/
	else {

		// The productID is extracted from the link
		productID = $link.attr('href').split('/')[2];

		// A POST request to add the product to the shopping cart is sent.
		$.ajax({
			type: "POST",
			url: "/cart",

			/*
			* A JSON object is sent as the request's content, where only the
			* product ID is needed.
			*/
			data: { products: [{ product_id: productID }] },
			success: function() {

				/*
				* After a successful request, the shopping cart is updated.
				*/
				$(".MiniCartContainer").empty();
				$.ajax({
					type: "GET",
					url: "/interface/MiniCart",
					success: function(data) {

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