E-shop - přidání zboží do košíku pomocí AJAX

Technologie AJAX (Asynchronous JavaScript And XML) umožňuje pomocí JavaScriptu načítat části obsahu stránek, aniž by muselo dojít k znovunačtení celé stránky. Vzhledem k tomu, že různé prohlížeče mají AJAX naimplementovaný rozličným způsobem, zapouzdřuje Visual PHP™ tuto technologii do objektu AJAX, který lze pomocí JavaScriptu využít.

Skript m_shop_purchase je již připraven pro použití AJAX, stačí tedy naimplementovat několik pomocných layoutů pro zobrazování stavu košíku, upravit šablony, nastavit DIV, který bude informovat o samotném přidání a přidat JavaScriptovou funkci, která bude veškeré přidávání a zobrazování řídit.

Zobrazování zboží v košíku

Zvolte si místo, kde budete chtít zobrazovat informace o aktuálním zboží v košíku a umístěte na toto místo div, kterému nastavte id například m_shop_cart. Identifikátor je v tomto divu velice důležitý, protože pomocí AJAX budeme měnit obsah tohoto divu po kliknutí na tlačítko pro přidání zboží do košíku. Do tohoto divu pak umístěte komponentu Include Layout a nastavte jí ve vlastnostech komponenty Název na hodnotu m_shop_cart a do Pořadí zpracování vyberte poslední. Tím zabezpečíme, že se layout zpracuje až po volání všech původních skriptů pro samotné vložení zboží do košíku.

Nyní si vytvoříme samotný layout. Přejděte do nabídky Prezentace -> Layouty a založte nový layout s názvem m_shop_cart. Zdrojový kód tohoto layoutu by mohl vypadat následovně:

Počet položek v košíku:
{php: getTable("m_shop_order_items")->getRecordCount("filter=customer='".$User->login."' AND parent IS NULL")}
<br />

Celková cena:
{php: $record = getTable("m_shop_order_items")->getRecord("filter=customer='".$User->login."' AND parent IS NULL,fields=SUM(taxPriceTotal) AS sum_price"); return(formatNumber($record["sum_price"])." Kč")}
<br />

<a href='m_shop.php'>Přejít do košíku</a>

Tento layout obsahuje dva inline PHP skripty, které z databáze načítají a zobrazují počet položek a celkovou cenu zboží v košíku.

JavaScriptová funkce pro vkládání zboží do košíku

Kamkoli do global layoutu vložte komponentu JavaScript a do ní následující kód:

function addToCart(id, count)
{
	var params = {
		'tableName' : 'scripts',
		'tid' : 'm_shop_purchase',
		'm_shop_actionType' : 'addItem',
		'm_shop_id' : id,
		'm_shop_count' : count
	};
	
	var count = AJAX.getContent('scripts', params);

	if (count == 0)
		alert("Položku již máte v košíku");
	else if (count == 1)
		alert("Položka byla přidána");
	else if (count > 1)
		alert("Bylo přidáno "+count+" položek");
	else
		alert("Přidáno do košíku");

	try
	{
		document.getElementById('m_shop_cart').innerHTML = AJAX.getLayoutContent('m_shop_cart');
	}
	catch(e)
	{
	}	
	
	return(false);
}

Funkce volá pomocí AJAX skript s tid m_shop_purchase, který následně vrací počet položek přidaných do košíku. Výsledek pak zobrazí a zahlásí návštěvníkovi. Poté načte obsah layoutu s názvem m_shop_cart a nahradí v divu s id m_shop_cart jeho původní obsah tímto novým, pomocí AJAX načteným, obsahem.

Úprava šablon na volání funkce addToCart pro vkládání do košíku

Výchozí šablony obsahují tlačítko pro odeslání formuláře, ve kterém je předáván identifikátor položky zboží, kterou chce návštěvník vložit do košíku, případně i počet položek, které se mají vložit. Funkce, kterou jsme deklarovali v minulém kroku umí přijímat oba tyto parametry. Stačí tedy do formuláře v šabloně m_shop_catalogue (případně m_shop_catalogue_tax) upravit form tak, že do něj přidáme volání události onSubmit, které bude volat naši JavaScriptovou funkci. Abychom pomocí JavaScriptu mohli načíst hodnotu počtu vkládaných položek do košíku, upravíme vstupní pole pro počet položek tak, aby měla id s hodnotou m_shop_count_[id]. Zdrojový kód formuláře pak může vypadat takto:

<form onsubmit="return addToCart('[id]', document.getElementById('m_shop_count_[id]').value);" enctype="application/x-www-form-urlencoded" action="m_shop.php?m_shop_actionType=addItem&amp;m_shop_tableName=m_shop_catalogue&amp;m_shop_id=[id]" method="post">
   <input size="2" value="1" id="m_shop_count_[id]" name="m_shop_count" type="text" />
   <input value="Do košíku" type="submit" />
</form>

Od této chvíle je namísto odeslání formuláře volána JavaScriptová funkce, která odešle potřebné parametry skriptu na serveru a znovu načte a zobrazí v divu s id m_shop_cart stav košíku, aniž by návštěvník opustil stránku, kde se zrovna nacházel.

Powered by Visual PHP ™