Magento. 1001 modi per mostrare i prodotti in catalogo. In questo articolo voglio condividere un effetto molto carino che ho realizzato per un e-commerce di giocattoli (potete vederlo qui). Le informazioni sul prodotto e il bottone "aggungi al carrello" compaiono quando il mouse passa sulla foto.
I sorgenti sono in libero download su Github ma per i meno esperti vediamo passo passo come utilizzarli.
1) Categoria prodotto
In app/design/frontend/tuo_pacchetto/tuo_tema/template/catalog/product/ creiamo un nuovo file list.phtml cioè la vista di default della categoria prodotti - [Demo] - All'interno del div .in-stock inseriamo tutte le informazioni sul prodotto che vogliamo mostrare all'hover. Di default ci sono Brand, Dimensioni e prezzo ma possiamo aggiungere qualsiasi altro attributo semplicemente aggiungendo:
echo $_product->getAttributeText('id_attributo')
(Sostituite id_attributo con l'identificativo del vostro attributo)
All'interno del div .out-stock, invece, inserite il vostro messaggio nel caso in cui il prodotto fosse esaurito oppure non disponibile.
2) Stili e icone
Tra i file trovate gli stili .css per realizzare la griglia - [Demo] - Se utilizzate il file local.xml presente nel pacchetto [Demo] vi ritroverete già il foglio di stile incluso nel vostro tema. Oltre agli stili, tra i file c'è un font e l'icona del carrello ma potete sbizzarrirvi a personalizzare la vetrina secondo il vostro gusto (e lo stile del tema che state utilizzando).
3) Animiamo tutto con jquery
Nella cartella trovate l'ultima versione di jquery e lo script che da vita all'effetto hover. Vanno inseriti in una nuova cartella (che noi abbiamo chiamato jquery) in js/ Se avete già installato jquery non copiate il file jquery-1.9.1.min.js
Commenta
Commenta con Facebook
