Sviluppo di temi Magento pagina di categoria, parte 2

Nell'articolo precedente sulle pagine delle categorie, abbiamo modificato la barra degli strumenti, la griglia e il layout dell'elenco. In questo secondo articolo sulla personalizzazione della pagina delle categorie, personalizzeremo la barra laterale e faremo alcune correzioni ai CSS.

Prima di tutto aggiungeremo alcuni componenti nella barra laterale, in modo da poterli ridimensionare. Qui, ai fini della dimostrazione, aggiungeremo solo uno o due componenti e li modificheremo. Ciò ti darà ampia comprensione su come puoi modificare anche gli altri componenti della barra laterale. 

Per ora aggiungeremo semplicemente "Confronta prodotti" e un banner della barra laterale alla barra laterale. Lo faremo dal codice local.xml. Se ricordi dai primi articoli della serie, puoi trovare il file local.xml nella cartella di layout del tuo file tema.

Aggiungeremo un riferimento alla sezione sinistra, quindi aggiungere un banner e confrontare il modulo del prodotto nella barra laterale, utilizzando il codice seguente:

   images / banner-small-01.png Il nostro servizio clienti è disponibile 24/7. Chiamaci al numero (555) 555-0123. checkout / cart   

Usalo come un codice di riferimento: puoi aggiungere più moduli o banner utilizzando la stessa procedura.

Se guardiamo al nostro design in HTML, noteremo che tutti i componenti sono ben progettati, specialmente la parte di intestazione, che ha più colori in essa. 

Considerando che il nostro design attuale è poco avanzato, sebbene possiamo modificare il design tramite CSS, ma dobbiamo modificare l'HTML per aggiungere classi per diversi colori nella rubrica. 

Per modificare l'HTML, prima abilitiamo i suggerimenti del modello e scopriamo che il file responsabile è \ template \ catalog / product / compare / sidebar.phtml.

Ora apriremo questo file sidebar.phtml e lo confronteremo con il codice HTML.

Il nostro codice HTML di progettazione per la barra laterale è simile al seguente:

 
Prodotti tag
 
 
Lincoln noi
 
SDress for Girl
 
Angolo
 
Finestra
 
PG
 
Oscar
 
Bagno
 
PSD
 
 

Possiamo vedere che l'intestazione ha il h3 tag con una classe di titolo, e ha il forte taggare attorno alle parti di intestazione, che hanno un colore diverso. 

Per questo, sostituiremo il titolo del blocco div con questo:

__ ('Confronta')?>__ ('Prodotti')?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>  

Aggiorna la pagina e dovrebbe apparire abbastanza vicino al nostro design HTML ora. Puoi aggiungere e modellare altri componenti della barra laterale in modo simile.

Ora che abbiamo finito di modificare i file phtml, iniziamo a correggere gli stili CSS.

Inizieremo a correggere gli stili dall'alto. Il primo componente che richiede la nostra attenzione è l'intestazione della pagina. Come possiamo vedere, è abbastanza spento e non è vicino ai nostri requisiti HTML.

Aggiungeremo queste righe nel nostro nuovo file CSS per modellare l'intestazione.

.titolo della pagina h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; fluttuare: a sinistra; posizione: relativa; larghezza: 100%; margin-bottom: 15px; font-size: 24px; colore: # 2f2f2f; font-weight: 300; imbottitura-fondo: 5px; allineamento del testo: centro; background: url (... /images/hadingBg.jpg) centro senza ripetizione; altezza della linea: 3;  .col-md-9 .toolbar float: none; border: none; colore di sfondo: trasparente; padding-left: 0; 

Qui abbiamo appena dato un buon carattere di testo, altezza della linea, allineamento del testo, immagine di sfondo, ecc. Inoltre, abbiamo reso lo sfondo trasparente senza bordi. Dovrebbe assomigliare a questo ora:

Successivamente abbiamo bisogno di modificare la sezione della barra degli strumenti. Per questo aggiungeremo questi stili nel nostro file CSS:

.toolbar .sorter> .view-mode float: left; .toolbar .sorter> .view-mode .grid background-image: url (... /images/grid-icon.png); larghezza: 25px; altezza: 25px; background-position: 0px 0px;  .toolbar .sorter> .view-mode .list background-image: url (... /images/list-icon.png); larghezza: 25px; altezza: 25px; background-position: 0px 0px;  .toolbar .sorter select font-size: 12px;

Qui abbiamo appena specificato alcune immagini di sfondo, larghezza, altezza, ecc., E farà praticamente il trucco. La pagina dovrebbe apparire così:

Ora, iniziamo a modificare la sezione prodotti in modalità griglia. La pagina appare così ora:

Dovremo solo apportare alcune modifiche alla larghezza e al passaggio del mouse. Anche il colore del prezzo deve cambiare. Faremo tutto ciò aggiungendo queste linee CSS:

.prodotti di categoria .products-grid - max-4-col> li width: 30%; .category-products .products-grid - max-4-col> li .view-eighth: hover .mask top : 170px; .item .price-box .price, .price color: black;

Ora la sezione della griglia dovrebbe apparire così:

Nell'ultima parte dobbiamo correggere la sezione prodotti nella modalità elenco. Attualmente sembra piuttosto incasinato, ma non preoccuparti: alcune righe di CSS imposteranno tutto correttamente. 

Per renderlo bello, useremo questi stili CSS:

.item .product-list-description .price-box .price float: left; dimensione del font: 28px; colore: # b39a64; margin-right: 10px; .products-list .products .thumbnail border: medium none; fluttuare: a sinistra; margine: 0; imbottitura: 10px; posizione: relativa; larghezza: 18%; height: auto; .products-list .products min-height: 100px; .products-list .products: hover background: #fff; border-color: # b39a64; -webkit-box-shadow: 0 0 5px 1px # d3d3d3; box-shadow: 0 0 5px 1px # d3d3d3;  .products-list .products border: 1px solid # e1e1e1; posizione: relativa; overflow: nascosto; sfondo: #fff; imbottitura: 15px; margin-top: 15px; altezza minima: 150 px;  .products .button background: # b39a64; colore: #fff; . button: hover, button: hover border: 1px solid # b39a64;  

Qui abbiamo impostato la larghezza dell'immagine del prodotto, fatto fluttuare il prezzo a destra, data l'intera sezione un bello sfondo, il bordo e l'effetto di passaggio del mouse e modificato leggermente il pulsante. La pagina dovrebbe apparire in questo modo:

Con tutto ciò, la pagina del tuo catalogo dovrebbe apparire piacevole e vicina ai nostri requisiti di progettazione HTML. Potresti aver bisogno di qualche altro fine-tuning CSS, ma a parte questo sei tutto pronto.

Nel prossimo articolo di questa serie, inizieremo a modificare la pagina dei dettagli del prodotto. 

Si prega di lasciare i vostri suggerimenti e feedback nella sezione commenti. Non vediamo l'ora.