Carousel adattivo con Magento e Bootstrap

Web e e-commerce 27 Luglio 2014

Vediamo come realizzare un semplice carousel di immagini per la home page di un template Magento. L'esigenza principale è far sì che il proprietario del sito possa caricare autonomamente (e cambiare) le slide dal backend e che non debba preoccuparsi di editare le immagini con un programma di grafica. L'idea più semplice è fargli caricare le immagini comodamente in dei blocchi statici.

IL PROBLEMA:

Il cliente è quella creatura mitologica che pensa di caricare un'immagine verticale in un carousel orizzontale, che vuole inserire una thumbnail in uno slideshow full screen e che nella migliore delle ipotesi non ha la più pallida idea di che tipo di slide vorrà nella home del suo sito. Quindi o gli diamo indicazioni tassative su come deve editare le sue immagini oppure troviamo noi una soluzione che vada bene a prescindere.

responsive carousel Magento Bootstrap

IL CODICE:

All'interno del vostro tema al percorso: app/design/frontend/tuo_pacchetto/tuo_tema/template/ create una cartella (nel mio esempio si chiama custom) e inserite il file .phtml scaricato da qui:

DOWNLOAD

Richiamatelo nel vostro local.xml come sicuramente già sapete fare:

<cms_index_index>
    <reference name="header"> 
       <block type="core/template" name="adaptive.carousel" template="custom/adaptive-carousel.phtml"/> 
    </reference>
</cms_index_index>

Inizializzatelo tramite js (facoltativo)

   jQuery('#adaptive-carousel').carousel({
        interval: 3000
    })

E infine compilate il css (obbligatorio):

.bootstrap-slide .carousel-inner {width: 100%;}
.bootstrap-slide .carousel-inner img {max-width: 100%;}
.bootstrap-slide .carousel-inner > .item {height: 350px; overflow: hidden;} /*modificate l'altezza secondo le vostre esigenze*/ 
.bootstrap-slide .carousel-inner > .item .slide-image {height: 100%; background-size: cover !important;}

Personalizzate il tutto con la grafica del vostro tema e non dimenticate di modificare l'altezza per mobile e large screen con le media queries.

A questo punto non vi resta che caricare le vostre immagini in blocchi statici che abbiano come id slide_1/ slide_2/slide_3

Tutto qui, lo script si occupa semplicemente di estrapolare le immagini dal blocco statico, eliminare eventuali refusi html generati dall'editor (<p>, <span> ..) e utilizzarle come sfondo delle vostre slide. Va da sè che il carousel rimane perfetto a qualunque risoluzione e che le immagini altezza o larghezza eccessive rispetto alle proporzioni del div contenitore verranno croppate centralmente.

A CHI SERVE:

A chi sta lavorando su un template in Bootstrap.
A chi non desidera installare componenti di terze parti.
A chi va di fretta ;)
A chi deve realizzare uno slideshow di sole immagini.
A chi non gestisce personalmente lo store.

A CHI NON SERVE:

A chi sta lavorando con framework diversi da Bootstrap (anche se è possibile fare un adattamento).
A chi necessita di uno slide complesso, con diversi livelli di testo e immagini e con animazioni pirotecniche.
A chi gestisce personalmente lo store (è sempre meglio editare le slide a mano con un programma di fotoritocco)

Naturalmente il web è strapieno di carousel e slideshow per Magento già pronti, magari basati su Bootstrap (mi permetto di segnalarne uno su tutti perché è free e perché merita: questo). Tuttavia, se non ci sono esigenze particolari, io sconsiglio sempre di installare plugin di terze parti per non appesantire eccessivamente il template, per evitare conflitti tra diverse estensioni e sopratutto per mantenere il controllo di quello che stiamo facendo.

Credits photo: freedigitalphotos

carousel-sample