Personalizzare Virtuemart

Come molti sanno Virtuemart è un componente per la creazione di uno shop integrato in joomla installabile in pochi click e gestibile direttamente dal pannello di controllo con facilità e flessibilità da invidiare persino ad i cms dedicati .
Un pregio è senza dubbio la gestione degli stili che si integra molto bene con il css del proprio template in uso ma non sempre tutto è come lo vorremmo . Vediamo quindi come modificare in grandi linee le varie parti che lo compongono .
Immagini
– Supponiamo di dover cambiare l’icona del carrello.
Ogni foto che vediamo è presente nel nostro server e per editarla basterà trovare il suo percorso , aprirla, salvarla e ricaricarla sostituendola .
Possiamo utilizzare firebug ( estensione firefox ) il quale analizzando l’elemento ci restituirà il link da seguire che si troverà in :

[code]/components/com_virtuemart/shop_image/ps_image[/code]

Testi
-Supponiamo di voler cambiare la voce ‘Questa Categoria è attualmente vuota.’
Apriamo il nostro client FTP e ci spostiamo nella destinazione indicata

[code]/administrator/components/com_virtuemart/languages[/code]

dove troveremo una serie di cartelle che suddivideranno le varie pagine , come Prodouct ( pagina prodotti ) Shipping ( per le spedizioni ) ecc..
Andiamo nella parte desiderata e all’interno troveremo un file chiemato italian.php / english.php il quale aprendolo conterrà tutte le voci come ‘EMPTY_CATEGORY’ => che stà ad indicare che la categoria è vuota con accanto la traduzione da visualizzare poi sul sito .

Struttura
Ogni file che costituisce la struttura delle pagine si trova in :

[code]/components/com_virtuemart/themes/default/templates[/code]

Nella quale trovaremo piu cartelle che suddivideranno il carrello , l’anteprima, la pagina dettagliata ed il resto.
*Premessa: prima di partire con la modifica di ogni elemento teniamo conto del file css che definisce lo stile che si trova in:

[code]/components/com_virtuemart/themes/default/theme.css[/code]

Vediamo ora le sezioni più importanti:

Anteprima prodotti (Browse page)
Apriamo il file browse_1.php ( o quello scelto tramite il pannello della configurazione ) e noteremo subito una pagina contentente dei div contenenti ognuno un codice PHP che richiama le varie parti che compongono l’anteprima come echo $product_name che andrà ad inserire il nome prodotto . A questo punto una volta individuate le parti da editare possiamo iniziare creando ad esempio una tabella da 50 % di larghezza contenente 2 colonne , una per i testi ed una per la miniatura immagine . Una volta effettuate tutte le modifiche sostituiamo il vecchio file con quello appena creato e noteremo il lavoro svolto.
Definita “l’impaginazione” diamo uno stile grafico originale o che si avvicini a quello del sito aprendo il nostro theme.css dove possiamo aggiungere come nel nostro caso un pulsante diverso

[css].addtocart_button {
background: transparent url( link) no-repeat scroll center center;[/css]

( nel caso siano tagliati aumentare le dimensioni del valore height e width)
Ecco un esempio base realizzato ed impostato su 2 colonne per riga:


Pagina prodotto (Prodouct_details / Flypage)
Come per l’anteprima qui utilizziamo gli stessi metodi però editando in particolar modo il file : flypage.tpl.php .
Seguono:
checkout (operazioni di pagamento)
Common (generica)
Order_emails (contenuto e-mail)
Pages (pagine extra)
Nei prossimi articoli verranno approfondite le modifiche alle singole pagine .
(v 1.1.x )