Share
Quando ho pianificato questa serie inizialmente, si pensava che fosse una serie di 15 articoli, in cui abbiamo pianificato di sviluppare tutte le pagine del tema, tra cui il carrello degli acquisti, le pagine di pagamento, le pagine di accesso / registrazione e le pagine degli account degli utenti.
Ma dopo aver scritto i primi 10 articoli, mi sono reso conto che abbiamo già spiegato, in dettaglio, tutti i passaggi necessari per apportare le modifiche nelle pagine del tema Magento, e la modifica delle altre pagine sarà solo una ripetizione dei passaggi che abbiamo già spiegato prima.
Pertanto, sto concludendo la serie in questo articolo, dove finalizzeremo la pagina del prodotto da dove l'abbiamo lasciata nell'articolo precedente, e ti darò alcuni suggerimenti su come utilizzare le tecniche che hai imparato in questa serie per modificare il resto delle pagine da soli.
Quindi riprendiamo la personalizzazione della pagina dei dettagli del prodotto. Ecco come appare attualmente:
Se lo confrontiamo con il design HTML che abbiamo, questo è come dovrebbe apparire:
Per far sembrare che il nostro design HTML, abbiamo bisogno di apportare alcune modifiche di carattere nelle sezioni di intestazione, prezzo e disponibilità del prodotto. Inoltre, nella sezione "Aggiungi al carrello" è necessario modificare il colore di sfondo e i bordi. Oltre a questo, abbiamo bisogno di apportare alcune modifiche con i margini e il padding. Lo faremo aggiungendo queste righe nel nostro file theme.css:
/ ***** Pagina dei dettagli del prodotto *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center; .more- visualizzazioni .product-image-thumbs a: hover border-color: # b39a64; .more-views .product-image-thumbs a float: left; imbottitura: 3px; border: 1px solid #cccccc; .products-details font-family: Georgia, sans-serif; .products-description .name font-family: Georgia, sans-serif; font-size: 30px; .availability.in-stock font-size: 11px; .products-details .products-description .price width: 50%; font-size: 25px; colore: # b39a64; font-weight: 500; .products-description .product-options border: none; padding-left: 30px; .product-view .products-description .product-options .swatch-attr label font-size: 11px; font-family: inherit; font-weight: normal; .products-description .product-options-bottom border: none; sfondo: nessuno; padding-left: 30px; font-size: 12px; imbottitura: 17px 0 0px 0; border-top: 1px solid #ccc; margine: 10px 30px 0 30px; .product-view .product-options-bottom .add-to-cart-buttons .button background: # b39a64; colore: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
Il codice dovrebbe apparire abbastanza auto-esplicativo. Dopo aver apportato queste modifiche, la pagina dovrebbe apparire così:
Ora siamo molto vicini ai nostri requisiti di progettazione HTML. Tuttavia, se guardiamo la sezione delle schede della pagina dei prodotti, anche se sembra soddisfacente, non corrisponde ai nostri requisiti di progettazione HTML. Ecco come appare attualmente:
Per farlo corrispondere al nostro design HTML, aggiungeremo queste linee CSS nel nostro file theme.css:
/ ***** Sezione Tabulazioni *********** / .product-view .product-collateral .toggle-tabs border: none; sfondo: nessuno; .product-view .product-collateral .toggle-tabs li.current .product-view .product-collateral .toggle-tabs li float: left; border: 1px solid #ececec; .product-view .product-collateral> dl> dd padding: 0 15px 15px 0px; border: none; .product-view .product-collateral .toggle-tabs li.current> span background-color: #eee; color: # b39a64 ;;
Abbiamo modificato il colore di sfondo delle intestazioni delle schede e il colore della scheda corrente. Anche il padding e il bordo per questi sono modificati. Ecco come dovrebbe apparire ora:
Adesso sembra abbastanza vicino. La pagina dovrebbe apparire buona tranne una piccola cosa: il margine tra la sezione delle schede e i prodotti correlati è troppo e rovina l'aspetto dell'intera pagina.
Questo è a causa del min-height proprietà definita per .scheda-box classe. Lo risolveremo con questo codice rapido:
/ ***** Risolto problema di fondo margine *********** / .product-view .tab-box min-height: initial;
Il problema è stato risolto ora:
Ora la nostra intera pagina dei dettagli del prodotto è pronta ed è abbastanza vicina ai nostri requisiti di progettazione HTML. Con questo abbiamo completato le tre pagine più importanti del sito eCommerce, che sono: homepage, pagina di elenco dei prodotti e pagina dei dettagli del prodotto.
Come ho detto all'inizio di questo articolo, concluderò qui questa serie di articoli fornendo alcuni suggerimenti su come personalizzare altre pagine del tema, utilizzando le abilità apprese in questa serie..
Diamo un'occhiata alla pagina del carrello. Attualmente sembra così:
Tuttavia, se guardiamo al nostro design HTML, dovrebbe assomigliare a questo:
Ora, per personalizzarlo, utilizzeremo la stessa procedura per attivare i suggerimenti del modello e per capire quali sono i file modello responsabili del rendering di questa pagina, e quindi apporteremo le modifiche in questi file:
Qui puoi vedere che il layout generale della pagina proviene dal file /template/checkout/cart.phtml. Dobbiamo modificarlo per posizionare i componenti nella giusta posizione. Inseriremo il codice HTML che abbiamo nel nostro file HTML e iniziamo a sostituire il codice con il codice dinamico.
Allo stesso modo, possiamo vedere che le righe di prodotto vengono visualizzate dal modello / checkout / carrello / articolo / file default.phtml. Dovremo modificare anche questo file. Oltre a questo, non penso che avremo bisogno di fare altre modifiche nei file phtml, perché possiamo fare il resto facilmente attraverso i CSS.
Ora controlliamo la pagina di checkout. Attualmente sembra così:
Secondo il nostro HTML, tuttavia, dovrebbe assomigliare a questo:
Ripetiamo la stessa procedura e scopriremo i file phtml che dobbiamo modificare qui. Qui puoi vedere che il layout principale proviene da /template/checkout/onepage.phtml. E la barra di avanzamento viene popolata da questo file: template / checkout / onepage / progress.phtml.
Possiamo apportare modifiche in questi due file confrontando il codice con il nostro file HTML. Dopo aver apportato le modifiche in questi due file, puoi apportare il resto delle modifiche tramite CSS. Non penso che dovrai modificare nessun altro file phtml per questa pagina.
Qui vorrei ribadire che non si dovrebbero apportare le modifiche al tema predefinito. Dovresti sempre creare una copia del file phtml che desideri modificare nel nuovo tema e modificarlo solo lì.
Passando alla pagina di accesso, al momento appare in questo modo:
Qui ripeteremo ancora tutti gli stessi passaggi e inizieremo abilitando i suggerimenti del modello:
Qui puoi vedere il file principale che dovrai modificare: template \ persistent / customer / form / login.phtml. Puoi modificare gran parte del layout della pagina da questo file. Per le modifiche allo stile, puoi farlo attraverso i CSS.
Allo stesso modo, possiamo vedere come modificare la pagina di registrazione. Innanzitutto abiliteremo i suggerimenti del modello:
Dai suggerimenti del modello possiamo vedere che il layout generale della sezione di registrazione proviene da template / persistent / customer / form / register.phtml. Puoi cambiarlo modificando questo file.
Se hai seguito fino ad ora, probabilmente dovresti conoscere tutti i passaggi a memoria. Puoi andare avanti e modificare le pagine degli account utente usando le stesse procedure apprese qui.
Puoi formalmente congratularti con te stesso ora: puoi definirti uno sviluppatore del tema Magento, perché hai effettivamente sviluppato un tema Magento e hai imparato tutti i metodi e le procedure di base necessari per.
Durante la stesura di questa serie, ho fatto un grande sforzo per renderlo semplice e chiaro da seguire. Spero che questa serie sia stata una buona esperienza di apprendimento per te!
Fornisci il tuo feedback su questa serie nella sezione commenti e continua a tornare su Tuts + per controllare altri articoli utili. E non dimenticare di vedere quali estensioni sono disponibili per estendere il tuo lavoro con Magento.
Buona esperienza di apprendimento!
Accentsconagua