Share
In questo tutorial, esploreremo il concetto di layout in OpenCart. Inizieremo esplorando i layout principali disponibili in OpenCart e, mentre proseguiamo, daremo un'occhiata a come è possibile creare nuovi layout. Inoltre, vedremo l'associazione dei layout con prodotti, categorie e moduli.
Presumo che tu stia utilizzando l'ultima versione di OpenCart 2.0. Naturalmente, i layout sono disponibili anche nelle versioni precedenti di OpenCart, ma continueremo con l'ultima versione in quanto l'interfaccia non è esattamente la stessa di quella delle versioni OpenCart 1.x.
"Layouts" in OpenCart sono il concetto di organizzazione e fornitura di modelli per diversi tipi di pagine nel front-end. Cosa significa quando dici un "tipo" di pagina diverso? Se dai un'occhiata alle diverse pagine di OpenCart, noterai che la "struttura" del layout non è la stessa in ogni pagina. Ad esempio, il layout della pagina "elenco prodotti" non è uguale a quello della pagina "dettagli prodotto".
Inoltre, la struttura è variata nelle diverse pagine come "Pagine account", "Pagina contatti", "Pagina checkout", ecc. Quindi è qui che entra in scena il layout. Puoi dire che i layout sono i modelli di decoratore che preparano la pagina completa riempiendo gli slot ei moduli disponibili per quel particolare layout.
D'altra parte, i layout sono anche utili in OpenCart per assegnare diversi moduli alla pagina. Ad esempio, se si desidera visualizzare un modulo "Banner" nella pagina dei dettagli del prodotto, è possibile farlo dal back-end poiché il layout del dettaglio "prodotto" è già disponibile nel core. OpenCart consente inoltre di creare nuovi layout dal back-end in modo da poter sostituire i layout predefiniti assegnati alle diverse pagine del front-end.
Diamo un'occhiata ai layout integrati disponibili in OpenCart. Dirigiti verso il back-end di OpenCart. Nella navigazione, vai a Sistema> Design> Layout, che elencherà i layout principali.
Come puoi vedere c'è un bel elenco di layout già esistenti. Clicca sul modificare icona del Casa layout, come mostrato nell'immagine sopra, per configurare le impostazioni relative al layout.
Capiamo esattamente cosa rappresenta ciascuna sezione della configurazione.
È solo il nome del layout. Dovrebbe essere impostato su qualcosa di sensato in quanto ci aiuterà in seguito durante l'assegnazione del modulo.
La cosa importante qui è il valore della colonna "Route", che suggerisce a OpenCart che ogni volta che c'è un URL contenente "common / home" nella pagina front-end, dovrebbe attivare questa impostazione relativa al layout. Significa che attiverà tutti i moduli assegnati a questo layout durante la richiesta della home page nel front-end.
In questa sezione, puoi vedere che i moduli sono già configurati per essere visualizzati sulla home page. Ci sono tre moduli assegnati alla posizione "Content Top", sebbene sia possibile aggiungere più moduli per visualizzarli in diverse posizioni sulla home page. Ad esempio, puoi aggiungere un modulo "Banner" nella posizione "Content Bottom".
Allo stesso modo, è possibile configurare le impostazioni anche per gli altri layout. OpenCart fornisce un'interfaccia davvero maneggevole per assegnare moduli a diverse posizioni del layout.
Nelle prossime due sezioni, vedremo come è possibile creare un nuovo layout e utilizzare tale layout per sovrascrivere i layout principali di OpenCart.
Dirigetevi verso il Sistema> Design> Layout pagina. Clicca sul + firmare per aggiungere il nuovo layout. Compila le informazioni richieste come mostrato nello screenshot seguente e salvalo.
Abbiamo inserito "Layout prodotto personalizzato" come nome del layout. Abbiamo anche assegnato il modulo "Banner> Category" alla posizione "Column Right". Significa che ogni volta che il nostro layout viene attivato per qualsiasi richiesta nel front-end, verrà visualizzato il modulo "Banner" sulla barra laterale destra.
Esistono due modi per attivare il layout per qualsiasi richiesta di front-end. Abbiamo già discusso il primo, l'assegnazione "Route" nelle impostazioni di configurazione del layout. L'altra è l'opzione "override" disponibile per alcune pagine del front-end. Procederemo con la seconda opzione per il corso di questo tutorial.
Ora che abbiamo creato il layout personalizzato, andiamo avanti e controlliamo come utilizzare la funzione di sovrascrittura del layout in OpenCart. Userò l'esempio di prodotti predefiniti disponibili in OpenCart per semplificare le cose.
Vai a Catalogo> Prodotti, che elencherà tutti i prodotti disponibili nel negozio. Modifichiamo il prodotto "iMac" nella categoria "Desktop> Mac".
Nell'interfaccia di modifica del prodotto, vai su Design scheda, dove dovresti vedere il Sovrascrittura layout opzione per l'archivio predefinito. Selezionare customLayout nella casella a discesa e salvare il prodotto.
Hai appena scavalcato il layout del prodotto predefinito del prodotto "iMac" con il nostro layout "CustomLayout"! Significa che ogni volta che qualcuno visita la pagina dei dettagli del prodotto "iMac" nel front-end, "CustomLayout" verrà attivato per quella pagina. E come discusso nella sezione precedente, verrà visualizzato il modulo "Banner" nella posizione "Colonna destra". Proviamolo nel front-end!
Allo stesso modo, puoi anche sovrascrivere i layout per le categorie!
Quindi spero che dovresti avere una conoscenza di base di come funzionano i layout di OpenCart. I layout sono davvero utili per sovrascrivere i layout di default e assegnare moduli a diverse posizioni in OpenCart. Condividi i tuoi pensieri sotto forma di commenti e domande utilizzando il feed sottostante!
Accentsconagua