Home / Programmazione / Javascript - AJAX / Visualizzare immagini in simpleCart
Mattepuffo

Visualizzare immagini in simpleCart

Visualizzare immagini in simpleCart

simpleCart è un ottimo "plugin" per gestire il carrello usando Javascript.

E' abbastanza flessibile, e permette di gestire cosa visualizzare nel carrello usando il suo sistema di templating.

Oggi vediamo come visualizzare l'immagine del prodotto.

Prima di tutto in fase di inizializzazione:

            simpleCart({
                cartColumns: [
                    {view: function (item, column) {
                            return "<img src='" + item.get('image') + "' width='50'>";
                        },
                        attr: 'image'},
                    {attr: "name", label: "Nome"},
                    {attr: "price", label: "Prezzo", view: 'currency'},
                    {attr: "quantity", label: "Quantità"},
                    {view: "decrement", label: false, text: "-"},
                    {view: "increment", label: false, text: "+"},
                    {attr: "total", label: "Totale", view: 'currency'},
                    {view: "remove", text: "Rimuovi", label: false}
                ],
                cartStyle: "table",
                currency: "EUR",
                // ECCETERA
            });

E poi tutte le altre opzioni che vi servono.

Potete notare la prima colonna; è li che si svolge il tutto.

In pratica abbiamo usato uno shelf personalizzato.

A questo punto, dentro la pagina, dovremmo aggiungere una cosa del genere:

<img src="image.jpg" alt="Immagine" class="item_image">

La nostra immagine (quella del prodotto in sostanza) con la classe item_image (seguendo la documentazione).

Tutto qua.

Enjoy!