simpleCart(js)

Come creare un e-commerce in pochi minuti.

SimpleCart(js) è una semplice applicazione che consente in pochi minuti di avere una piattaforma di e-commerce funzionante. Non richiede database, nessuna conoscenza particolare di programmazione ma solo una abilità innata nel copy&paste.
Il tutto funziona attraverso una libreria javascript, simpleCart.js per l’appunto, e i cookie.

Di cosa abbiamo bisogno per preparare il nostro e-commerce:

Procediamo...

Passo 1 - Preparazione dell’ambiente:

Dopo aver prelevato il file javascript lo andiamo ad inserire nel nostro codice:

<script type="text/javascript" src="simpleCart.js"></script>

ed inseriamo l’account di riferimento di paypal:

<script type="text/javascript">
	simpleCart.email = "you@yours.com";
</script>

Passo 2 - Rendiamo un oggetto acquistabile:

Rendere un articolo acquistabile è un passo molto semplice, basta aggiungere al html che lo descrive un tag ‘a’ come il seguente:

<a onclick="simpleCart.add('name=[name]','price=[price]');return false;" href="#"> 
	link to add item 
</a>

in cui [name] è il nome del prodotto e [price] ne identifica il prezzo, tali informazioni saranno visibili nel carrello e nel resoconto di paypal al termine dell’acquisto.
Sono disponibili altri attributi da poter passare alla funzione add tra cui image per aggiungere una immagine al prodotto.

simpleCart.add('name=Shirt','price=6.00','image=images/myImage.png');

Passo 3 - Visualizzazione del carrello:

Per visualizzare il carrello basta inserire un elemento html con classe "simpleCart_items" in qualsiasi pagina in cui è stato inserito l’import di simpleCart.js (Passo 1):
<div class="simpleCart_items"></div>

la libreria attraverso richieste ajax provvederà ad aggiornare il carrello all’aggiunta di nuovi articoli.
Per visualizzare anche il numero degli articoli aggiunti al carrello basta aggiungere al codice precedente un elemento html con classe "simpleCart_quantity"

<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> oggetti

E' possibile inoltre visualizzare il totale dei prodotti aggiunti al carrello inserendo un elemento con classe "simpleCart_total"

Totale: <span class="simpleCart_total"></span> &euro;
<div class="simpleCart_total"></div> <span class="simpleCart_quantity"></span> oggetti

Passo 4 - Link di “checkout” e “svuota carrello”:

Per avere i link di “checkout” e “svuota carrello” è necessario aggiungere in qualsiasi pagina in cui è stato inserito l’import di simpleCart.js (Passo 1) due tag ‘a’ con classi "simpleCart_checkout" e "simpleCart_empty":
<a class="simpleCart_checkout" href="#">checkout</a>
<a class="simpleCart_empty" href="#">svuota il carrello</a>

Per maggiori informazioni:

link alla documentazione ufficiale: http://simplecartjs.com/documentation.html

link alla demo: http://demo.simplecartjs.com/

 

 

Share this on

Share |

On same topics

Commenti

comments powered by Disqus