Crea una pagina personalizzata in OpenCart

Prima di iniziare, tieni presente che stiamo pianificando specificamente di passare direttamente all'articolo. 

A tal fine, supponiamo di avere una copia funzionante di OpenCart installata e pronta per andare al lavoro.

Il flusso di lavoro di base

OpenCart è costruito utilizzando il popolare pattern MVC di programmazione. C'è anche un altro elemento aggiunto a questo modello chiamato "L" - una parte del linguaggio - quindi è chiamato pattern MVC-L in OpenCart. Non entrerò nei dettagli del pattern MVC poiché è un pattern di design molto popolare e familiare e lo abbiamo trattato in modo dettagliato in altri tutorial. 

Detto questo, abbiamo ancora bisogno di guardare il flusso di lavoro utilizzando questo modello.

Innanzitutto, il controller funge da punto di ingresso per qualsiasi pagina in cui definirai la maggior parte della logica dell'applicazione.Il modello si occupa del database back-end e la vista è responsabile della preparazione del contenuto da rendere all'utente finale. Nel contesto di OpenCart, avrai almeno bisogno di implementare un controller e una vista per creare una nuova pagina personalizzata.

Impostazione del controller

Per prima cosa, proviamo a capire il ruolo del controller in OpenCart. Il controller è il primo elemento che verrà eseguito quando si richiede una pagina. In primo luogo, è responsabile della configurazione delle variabili che verranno utilizzate in seguito nella visualizzazione per il display. Sebbene nel controller generico, ci sono un sacco di cose che accadono:

  • È possibile caricare i file di lingua in modo che sia possibile utilizzare le variabili della lingua per la visualizzazione del testo statico.
  • È possibile caricare file di modello in modo da poter utilizzare i metodi definiti in tali modelli per recuperare i dati dal database di back-end.
  • È possibile definire il file modello che verrà utilizzato dalla vista.
  • È possibile impostare le variabili personalizzate assegnando loro il contenuto che verrà utilizzato nel file del modello.
  • È possibile dichiarare i modelli figli che si desidera visualizzare come parte del modello principale. L'esempio più semplice di ciò sono i modelli di intestazione e piè di pagina che desideri visualizzare nel tuo modello principale.
  • Infine, puoi anche impostare valori per elementi come il titolo del documento, meta description ecc.

Basta teoria, giusto? Vediamo come appare il nostro controller personalizzato. Vai avanti e crea una nuova directory custompage sotto Catalogo / regolatore. Crea un nuovo file mycustompage.php sotto Catalogo / regolatore / custompage. Incolla il seguente codice nel file del controller appena creato "mycustompage.php".

document-> setTitle ("My Custom Page"); // define template file if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/custompage/mycustompage.tpl')) $ this-> template = $ this-> config- > get ('config_template'). '/Template/custompage/mycustompage.tpl';  else $ this-> template = 'default / template / custompage / mycustompage.tpl';  // definisce i modelli figli $ this-> children = array ('common / column_left', 'common / column_right', 'common / content_top', 'common / content_bottom', 'common / footer', 'common / header') ; // imposta i dati sulla variabile $ this-> data ['my_custom_text'] = "Questa è la mia pagina personalizzata."; // chiama la "vista" per rendere l'output $ this-> response-> setOutput ($ this-> render ()); ?>

Comprendiamo la convenzione di denominazione della classe controller. Il nome della classe controller viene costruito seguendo la struttura della directory e la convenzione del caso cammello. Si noti che il nome della classe inizia con la parola chiave "Controller" seguita dal nome della directory ("Pagina personalizzata") in cui risiede il file di classe. Infine, il nome del file di classe ("Mycustompage") viene aggiunto alla fine. Ora analizziamo ogni sezione in dettaglio.

Per prima cosa abbiamo impostato il valore del tag title html per la nostra pagina personalizzata.

$ this-> document-> setTitle ("My Custom Page");

Nella sezione successiva, abbiamo definito il nome del file modello che verrà utilizzato dall'elemento "Visualizza". Una cosa importante da notare qui è che abbiamo prima verificato che se il file modello è disponibile nel set tema personalizzato dal back-end, se è disponibile nel tema personalizzato lo useremo altrimenti utilizzeremo il file modello nel tema "predefinito". 

Questo è il concetto di modello prioritario.

if (file_exists (DIR_TEMPLATE. $ this-> config-> get ('config_template'). '/template/custompage/mycustompage.tpl')) $ this-> template = $ this-> config-> get ('config_template '). '/Template/custompage/mycustompage.tpl';  else $ this-> template = 'default / template / custompage / mycustompage.tpl'; 

Abbiamo anche definito i modelli per bambini utilizzando l'array. Come esempio, comuni / intestazione esegue il mapping al file di modello che si trova in Catalogo / view / theme / default / template / common / header.tpl ed esegue lo stesso. Il risultato sarà assegnato alla variabile $ header che è possibile utilizzare nel file di modello per visualizzare l'intestazione del sito.

$ this-> children = array ('common / column_left', 'common / column_right', 'common / content_top', 'common / content_bottom', 'common / footer', 'common / header');

Inoltre, abbiamo dimostrato come è possibile impostare le variabili personalizzate che saranno disponibili nel file di modello. Anche se qui abbiamo usato un semplice testo statico, è possibile assegnare un contenuto più sensibile, ad esempio una matrice di prodotti recuperata dal
Banca dati.

$ this-> data ['my_custom_text'] = "Questa è la mia pagina personalizzata.";

Infine, la cosa più importante è chiamare la visualizzazione in modo che possa iniziare il processo di rendering effettivo.

$ This-> response-> SetOutput ($ this-> render ());

Questo è l'assaggio del flusso di lavoro del controller.

Nel front-end, si accede a questo controller usando la variabile stringa di query  route = custompage / mycustompage. È importante notare che se si definisce il metodo del controller con un altro nome tranne indice è necessario specificarlo anche nell'URL. 

Ad esempio, se hai creato il metodo named costume, dovrebbe apparire il tuo formato di URL front-end route = custompage / mycustompage / custom.

Comprendiamo come le mappe OpenCartqualsiasi url al file del controller specifico. Il formato della variabile di percorso è Directory / filename / methodname. Directory mappa nella directory sotto Catalogo / regolatore. nome del file esegue il mapping al nome del file del controller in Catalogo / regolatore / directory. E infine, cercherà il nome del metodo controller Methodname se è specificato nel percorso, altrimenti chiamerà il valore predefinito indice metodo.

Preparare la vista

In questa sezione creeremo il file del modello di visualizzazione che abbiamo definito precedentemente nel metodo dell'indice del controller. Vai avanti e crea una nuova directory custompage sotto Catalogo / view / theme / default / template. Crea un nuovo file mycustompage.tpl sotto Catalogo / view / theme / default / template / custompage. Incolla il seguente contenuto nel file del modello appena creato mycustompage.tpl.

 

Quindi questo è il nostro file modello di layout principale che è responsabile della visualizzazione del contenuto della nostra pagina personalizzata. In questo file di modello, abbiamo appena usato le variabili che abbiamo impostato nel controller indice metodo. 

L'unica variabile personalizzata in questo file modello è $ my_custom_text, il resto delle variabili contiene i contenuti relativi ai modelli figli come intestazione, piè di pagina, ecc. Le variabili $ column_left, $ column_right, $ content_top e $ content_bottom vengono utilizzati per visualizzare i moduli assegnati alla nostra pagina personalizzata dal back-end.

Se si desidera assegnare moduli alla nostra pagina personalizzata, è innanzitutto necessario creare una nuova voce di layout dal back-end. Dopo aver aggiunto un nuovo layout, ti piacerebbe aggiungere un percorso come custompage / mycustompage voce per quel layout. Ora puoi anche assegnare qualsiasi modulo alla nostra pagina personalizzata.

Hai appena creato una pagina personalizzata completa in OpenCart! Puoi controllare lo stesso all'URL: http://www.yoursiteurl.com/index.php?route=custompage/mycustompage.

Conclusione

In questo tutorial, abbiamo imparato come creare la nostra pagina personalizzata in OpenCart. Se hai familiarità con il pattern MVC, il flusso di lavoro per creare una nuova pagina personalizzata dovrebbe essere familiare.

Vai avanti ed esplora alcuni file core per familiarizzare con il codice. Vorrei che estendesse il nostro esempio caricando i file di modello e di lingua nel controller e osservando come funzionano le cose! In attesa di feedback, domande e commenti!