Prestashop è probabilmente la soluzione di e-commerce open source numero 1 sul web. Offre innumerevoli funzioni, componenti aggiuntivi e temi, ma la mancanza di una buona documentazione ha dato ai nuovi arrivati ​​la percezione che sia inavvicinabile. In questo articolo, ti guiderò attraverso il processo di creazione del tuo tema personalizzato, oltre a creare e personalizzare i moduli Prestashop.

Prestashop funziona su PHP e mySQL e si affida al motore Smarty per i suoi "Modelli" (pagine). Non preoccuparti, se non hai familiarità con Smarty. Fondamentalmente lo usi per creare pagine con sezioni segnaposto e Prestashop riempie le informazioni quando la pagina viene caricata. È facile passare a, se hai usato qualcosa come Handlebars o modelli Underscore.

Suppongo che tu abbia già scaricato e installato Prestashop. In caso contrario, è possibile scaricare l'ultima versione; hanno un video didattico che puoi guardare per imparare a configurarlo.

Registrazione del tema

Il tuo sito dovrebbe assomigliare all'immagine seguente, se imposti Prestashop con le impostazioni predefinite.

Il processo di creazione del tuo tema inizia con la creazione di una cartella. Nel tuo browser di file di scelta, vai alla directory principale di Prestashop e troverai una cartella, chiamata temi. Dentro il temi cartella, crea una nuova directory con il nome del tuo tema. Chiamerò il mio, "Demo".

Se aggiungi una foto del tuo modello a questa cartella e la dai un nome preview.jpg, Prestashop dovrebbe trovare e aggiungere automaticamente il modello al back-end. In caso contrario, o se preferisci aggiungere l'immagine in un secondo momento, puoi aggiungere manualmente il tema. Per fare questo, andare al Temi opzione sotto il Preferenze menu e fare clic Aggiungere nuova in cima. Una volta completato, vedrai il tuo tema al centro della pagina. Attivalo semplicemente facendo clic su di esso e premendo il pulsante Salvare pulsante.

Aggiungi il tuo logo (s) mentre sei qui; puoi trovare questa opzione in fondo alla pagina. Potrebbe essere necessario aumentare il limite di upload del file in Prestashop (o forse anche nel file di configurazione di PHP) se hai un'immagine molto grande.

Crash Course in Prestashop

Smarty è un motore di template per PHP, che facilita la separazione della presentazione dalla logica dell'applicazione.

Come ho detto prima, Prestashop usa Smarty per generare le pagine; quindi, tutti i file modello hanno un .tpl estensione. Ci sono molte pagine che devi creare per avere un tema completo; prenditi un momento e guarda l'elenco dei file.

In definitiva, la funzionalità del tuo tema determina quali pagine devi implementare. Queste pagine si basano sui file nella cartella dei controller e puoi sostituire i controller predefiniti o aggiungere i tuoi controller personalizzati per adattarli al tuo tema. Ma questo va oltre lo scopo di questo articolo. Tra i controller in controller \ directory anteriore sono due file modello che caricano automaticamente: header.tpl e footer.tpl.

Il contenuto principale del tuo sito verrà caricato dai moduli con l'aiuto di "Hook".

Esistono due tipi di hook in Prestashop: action e hook di visualizzazione. Entrambi funzionano allo stesso modo, ma differiscono nello scopo. Un gancio fornisce fondamentalmente all'utente un mezzo per collegare un codice personalizzato a una fonte esterna. Nel caso di un hook di azione, qualsiasi codice collegato all'hook viene eseguito quando viene chiamato il hook. Ad esempio, Prestashop viene fornito con un hook predefinito chiamato actionProductAdd che viene eseguito quando si aggiunge un prodotto. Quindi potresti collegare un modulo a questo gancio se desideri inviare una newsletter ogni volta che viene aggiunto un nuovo prodotto.

Un hook di visualizzazione è molto simile, ma invece di connettere una funzione a un evento, connetti una funzione a una posizione specifica sul modello. In altre parole, Prestashop chiamerà il tuo modulo da un punto specifico (ad es. Barra laterale destra), e tutto ciò che viene restituito viene inserito nella pagina. Puoi visualizzare tutti gli hook attualmente registrati andando al Moduli> Posizioni pagina nell'amministratore posteriore.

Personalmente, trovo il modo migliore per iniziare con un tema HTML standard. Questo non è un requisito, ma lo consiglio vivamente per una serie di motivi:

• Ti permette di vedere immediatamente quali ganci hai bisogno e come dividere il tuo contenuto.
• Ti dà una chiara indicazione di quali file template devi creare, oltre a darti un'idea di cosa sarà il contenuto statico e quale dovrebbe essere un modulo. Ti permette anche di aggiungere preview.jpg file subito.

L'immagine seguente è una foto del mio modello HTML di esempio:

E qui puoi vedere come lo dividerò in ganci Prestashop:

Creazione dei modelli parziali

Ora creiamo il header.tpl file nella directory dei temi e riempilo con l'intestazione dei temi. Questo include il DOCTYPE, area e tutto il corpo che si desidera visualizzare su tutte le pagine. Ecco un esempio header.tpl file:

     if isset ($ css_files) foreach from = $ css_files key = css_uri item = media  / foreach / if if isset ($ js_files) foreach from = $ js_files item = js_uri  / foreach / if   
 
 $ HOOK_TOP 
 
  
 

Ci sono alcune cose da sottolineare in questo codice. Ho preprended il nome del file CSS con $ Css_dir. Questa è una variabile Smarty che punta a una cartella, chiamata css all'interno della directory del tema, dove dovrebbero andare tutti i file CSS.

La riga successiva usa Smarty per ciascuno loop per aggiungere tutti i file CSS dei moduli abilitati. Vale la pena notare che, se si crea un file CSS chiamato global.css nel css directory, il loop aggiunge automaticamente quel file alla pagina.

Alcune righe dopo, un altro per ciascuno loop elabora i file JavaScript nel file js directory e li aggiunge alla pagina. Nell'ultima sezione, apro l'elemento body e definisco un hook per il modulo menu. Infine, finisco visualizzando il logo del sito.

A meno che tu non sia un veterano di Prestashop, probabilmente ti starai chiedendo dove sto arrivando con queste variabili. Come ho detto prima, sfortunatamente manca la documentazione di Prestashop, ma forniscono uno strumento di debug che puoi avviare aggiungendo Debug a uno qualsiasi dei file modello. Quando apri la pagina corrispondente nel tuo browser, riceverai un pop-up contenente un elenco di tutte le variabili per quel modello specifico. Questo ti permette di capire rapidamente (usando ctrl / cmd-F in modo drammatico) per identificare quali variabili sono definite, così come i loro valori.

Ora creiamo il footer.tpl modello. Ho intenzione di mantenere questo semplice e basta chiudere il e elementi, ma sentiti libero di aggiungere tutto quello che vuoi mostrare in fondo a ogni pagina. Questo può includere qualsiasi cosa, dagli hook al JavaScript personalizzato; non ci sono limiti a ciò che potresti mettere qui.

L'ultimo file che voglio implementare è il index.tpl file. Questo è il file "home page" che viene visualizzato quando un utente accede alla radice del tuo sito. Nel tema predefinito di Prestashop, le barre laterali sono caricate nel header.tpl file e il modello di indice effettivo contiene solo una chiamata al file displayHome gancio. Questo va bene se vuoi che le barre laterali siano su tutte le pagine, ma ancora una volta, vorrei sottolineare che i ganci sono implementati a tuo piacimento. Non è necessario implementare alcun hook e puoi aggiungere i tuoi ganci personalizzati se ti serve più della funzionalità standard.

Quando crei la tua pagina indice, devi decidere quali parti sono statiche e quali parti devono essere caricate dinamicamente attraverso i moduli. Ho rimosso il menu principale dall'intestazione perché è qualcosa che volevo controllare con un modulo. Così ho posizionato un gancio dove volevo il menu e posso creare un modulo che si attacca a questo gancio. Puoi caricare più oggetti con lo stesso gancio. Non vi è alcun motivo per aggiungere più hook tra loro e si può gestire l'ordine dei moduli di un hook nel back-end sotto Moduli> Posizioni.

Localizzazione

L'ultima caratteristica specifica di Prestashop da considerare è gli strumenti di localizzazione di Prestashop. Prestashop ti permette di tradurre facilmente il tuo sito in più lingue usando una funzione Smarty, chiamata l. Lo usi sostituendo una stringa standard con il l funzione, passando la stringa come parametro. Ecco un esempio di

elemento, sia con che senza traduzione:

* Senza strumento di traduzione * 
Iscriviti a noi!
 * Con lo strumento di traduzione * 
l s = "Abbonati a noi!"

Anche se attualmente non pianifichi di tradurre il tuo sito, è una piccola modifica che ti consente di tradurre facilmente le tue pagine se in seguito decidi di farlo. Una volta apportate queste modifiche ai tuoi modelli, puoi andare su Localizzazione> Traduzioni pagina nel back-end e fai clic sulla nazionalità a cui vuoi tradurre.

L'aggiunta di lingue non predefinite è semplice e la copro nella seconda sezione della pagina (giustamente chiamata "Aggiungi / aggiorna una lingua").

Un altro vantaggio dell'utilizzo della localizzazione di Prestashop è l'elenco delle frasi che Prestashop offre. Invece di esaminare l'intero sito, puoi semplicemente passare l'elenco di frasi a un madrelingua della lingua desiderata e inserire rapidamente i valori, senza mai toccare il tuo tema.

Ora inserisci l'HTML specifico della tua home page su index.tpl, e assicurati di fornire i ganci che desideri utilizzare. Ricordati di usare il Debug Funzione Smarty, se hai bisogno di vedere le variabili sono disponibili per il tuo modello.

Ora puoi aprire un browser e navigare alla radice del tuo sito. Il mio assomiglia a questo:

Potrebbe non sembrare molto, ma hai costruito il guscio esterno del tuo modello. Se il tuo modello sembra un pasticcio di oggetti, è probabilmente perché hai molti moduli installati. Per impostazione predefinita, Prestashop abilita molti moduli; Raccomando di andare alla pagina dei moduli e disinstallare tutti i moduli. Non preoccuparti di perderli perché puoi reinstallarli facendo clic sul pulsante Installa accanto al modulo desiderato.

Quando si crea un tema Prestashop, si noterà che i moduli sono responsabili di circa il 90% del contenuto. Ci sono moduli che mostrano i prodotti, i moduli per il carrello della spesa, ecc. Una parte importante dell'essere un themer di Prestashop include, come minimo, una conoscenza pratica su come personalizzare l'aspetto dei moduli.

---

moduli

I moduli in Prestashop non sono gli stessi dei widget di Wordpress.

I moduli in Prestashop non sono gli stessi dei widget di Wordpress; I moduli di Prestashop possono essere collegati solo agli hook specificati dal creatore del modulo. Ad esempio, se crei un modulo che visualizza un blocco "iscriviti alla newsletter" e lo imposti per andare in una delle barre laterali, non puoi posizionarlo nell'area del footer.

Questo può sembrare complicato, ma c'è una buona ragione per questo: quando crei un modulo, fornisci una funzione separata per ciascuno degli hook che vuoi usare. Ad esempio, se un modulo di menu può comportarsi diversamente in base alla sua posizione nel modello.

Questo ti dà un sacco di spazio per personalizzare un modulo.

Questa pratica ha molto più senso se si considerano altri tipi di ganci: i ganci di azione. Ovviamente non vuoi che la funzione venga eseguita quando aggiungi un nuovo prodotto da eseguire quando un utente acquista un prodotto da te. Lo stesso vale per visualizzare i ganci; ogni gancio ha una sua funzione, che ti permette di fare tutto ciò che vuoi con esso.

Quando si crea un tema, ci sono due modi per aggiungere moduli. La prima opzione è creare il tuo modulo. Questa è l'opzione più noiosa, ma ottieni molto più controllo nel prodotto finale. D'altra parte, ci sono oltre 2000 moduli nel catalogo ufficiale dei moduli (e ancora di più su siti di terze parti). Le probabilità sono buone puoi trovare qualcosa che corrisponde alle tue esigenze.

La tua seconda opzione è installare un modulo già pronto; Prestashop ti offre la possibilità di personalizzarne l'aspetto sovrascrivendo i file modello. Questa è l'opzione migliore, se non vuoi veramente iniziare a codificare il tuo modulo, e ti permette di concentrarti sul lato grafico. Coprirò entrambe le opzioni; quindi iniziamo con il primo.

Creare il tuo modulo

Costruiremo un modulo che visualizza un numero configurabile di prodotti sulla home page. Questo è liberamente basato sul modulo azionario, ma il mio modulo andrà un po 'di più nelle classi sottostanti di Prestashop per sperare di darti uno sguardo più approfondito sul processo.

Innanzitutto, crea una cartella nel moduli directory, quindi creare un file PHP al suo interno con lo stesso nome della cartella. Quando apri il moduli cartella, vedrete una convenzione di denominazione, in cui tutti i moduli che visualizzano solo i contenuti iniziano con la parola "blocco". Questo, ovviamente, non è un requisito, ma ha senso. Chiamerò la mia cartella blockdisplayproducts, e, al suo interno, creerò il file PHP con lo stesso nome.

Apri il file PHP e definisci la classe dei moduli:

name = 'blockdisplayproducts'; $ this-> tab = 'front_office_features'; $ this-> version = 1.0; $ this-> author = 'Gabriel Manricks'; $ this-> need_instance = 0; parent :: __ construct (); $ this-> displayName = $ this-> l ('Visualizza modulo prodotti'); $ this-> description = $ this-> l ('Visualizza una quantità configurabile di prodotti per la home page.'); 

I moduli Prestashop sono orientati agli oggetti; pertanto, devi creare una classe per il tuo modulo. Il nome della tua classe dovrebbe essere la versione con scatola di cammello del nome della tua cartella.

Nella parte superiore del file, puoi vedere un Se dichiarazione. Ciò garantisce che il file non venga caricato direttamente attraverso il browser. Successivamente, la classe deve direttamente sottoclasse la classe del modulo o sottoclasse un decedent della classe del modulo.

All'interno del costruttore, impostiamo le proprietà del modulo. Prestashop utilizza queste informazioni per visualizzare nel back-end:

• nome è un "nome in codice" univoco e non è il nome effettivo mostrato nel back-end.
• linguetta dice a Prestashop la categoria del modulo. È possibile trovare un elenco completo di categorie aprendo il Controller \ Admin \ AdminModuleController.php file.
• autore, nome e versione sono auto-esplicativi.
• needs_instance indica a Prestashop di creare un'istanza della variabile quando accede alla pagina dei moduli. Di solito non è richiesto, ma se il modulo deve mostrare un messaggio o registrare qualcosa quando la pagina dei moduli è attiva, è necessario cambiarla in un 1.

Le ultime due righe impostano il nome e la descrizione effettivi del tuo modulo e usano lo stesso metodo di localizzazione per consentire la loro traduzione in lingue diverse. Queste due linee devono andare dopo l'inizializzazione del genitore secondo l'ordine preferito di Prestashop usato dai loro moduli ufficiali.

Il prossimo passo è quello di sovrascrivere il metodo di installazione. Qui è dove possiamo specificare gli hook di cui abbiamo bisogno, così come le opzioni predefinite per il nostro modulo. Se una delle impostazioni fallisce, l'installazione fallirà.

Questo modulo è destinato alla home page, quindi lo collegherò al gancio home. Vogliamo anche aggiungere un file CSS all'intestazione, il che significa che sarà necessario aggiungere anche l'hook dell'intestazione. Se vai al back-end sotto il Moduli> Posizioni pagina, puoi trovare i nomi tecnici dei ganci (che è quello che specificheremo qui).

Subito dopo __costruire() funzione, aggiungere quanto segue:

public function install () if (parent :: install () == false || $ this-> registerHook ('displayHome') == false || $ this-> registerHook ('displayHeader') == false || Configurazione :: updateValue ('DP_Number_of_Products', 6) == false) return false; ritorna vero; 

Questo aggiunge i due ganci e imposta il numero predefinito di prodotti su sei. Dovresti nominare la proprietà qualcosa di unico in modo che altri moduli non interferiscano con i tuoi valori. Un semplice approccio aggiunge il nome o le iniziali del tuo modulo all'inizio del nome.

È ora possibile installare il modulo nella pagina dei moduli e dovrebbe essere installato correttamente se tutto è impostato correttamente. Vai alla pagina delle posizioni, e verrà visualizzato come registrato sotto i due ganci.

Implementare ganci è abbastanza semplice; creare una funzione pubblica con la parola "hook" seguita dal nome del hook. Iniziamo con il gancio dell'intestazione. Vogliamo solo aggiungere un file CSS al nostro tema. Ecco la funzione completa:

funzione pubblica hookdisplayHeader ($ params) $ this-> context-> controller-> addCSS (($ this -> _ path). 'blockdisplayproducts.css', 'all'); 

Crea quel file CSS nella tua directory dei temi e il tuo modello dovrebbe caricarlo nell'intestazione.

Il prossimo hook è un po 'più complicato. Dovrebbe recuperare un certo numero di prodotti dal database e caricarli in un file modello. La funzione per recuperare i prodotti non restituisce le immagini oi collegamenti dei prodotti, quindi dobbiamo chiamare alcune funzioni diverse e "costruire" una serie di prodotti. Ecco la funzione completa:

funzione pubblica hookdisplayHome ($ params) $ languageId = (int) ($ params ['cookie'] -> id_lang); $ numberOfProducts = (int) (Configuration :: get ("DP_Number_of_Products")); $ productsData = Product :: getProducts ($ languageId, 0, $ numberOfProducts, "id_product", "ASC"); se (! $ productsData) restituisce "error"; $ products = array (); $ link = new Link (null, "http: //"); foreach ($ productsData come $ product) $ tmp = Product :: getCover ($ product ['id_product']); array_push ($ products, array ('name' => $ product ['name'], 'author' => $ product ['manufacturer_name'], 'desc' => $ product ['description_short'], 'price' = > $ product ['price'], 'link' => $ link-> getProductLink (nuovo prodotto ($ product ['id_product'])), 'image' => $ link-> getImageLink ($ product ['link_rewrite' ], $ tmp ['id_image'])));  $ this-> smarty-> assign (array ('products' => $ products)); restituisce $ this-> display (__ FILE__, 'blockdisplayproducts.tpl'); 

Inizia visualizzando il numero di prodotti da visualizzare e l'ID della lingua dell'utente. Effettuiamo quindi una chiamata per ottenere il numero assegnato di prodotti a partire dal primo prodotto registrato. Dopodiché, ci assicuriamo che non ci siano stati problemi nel far uscire i prodotti se ce n'erano. Il prossimo blocco è la parte che ho menzionato in precedenza, che crea un array con tutte le proprietà di cui avremo bisogno durante la visualizzazione dell'oggetto. Ciò include l'immagine e il collegamento che non sono stati restituiti con il resto dei dati del prodotto. L'ultima sezione aggiunge l'array di prodotti a Smarty e carica il file modello di tua scelta. Ho chiamato il file modello e i file CSS con lo stesso nome del modulo, ma questo non è un requisito; puoi chiamarlo come preferisci.

Se apri il tuo sito adesso, vedrai solo un messaggio, notando "Nessun modello trovato per il modulo blockdisplayproducts."Quindi creiamo il file modello all'interno della directory del nostro modulo, assegnandogli un nome uguale a quello appena specificato nella funzione di hook.Questa parte dipende molto dal layout dei temi specifico, ma qui è il mio file di modello:

if $ products! == false 
l s = "I NOSTRI LIBRI" mod = "blockdisplayproducts"
 foreach from = $ products item = nome prodotto = productLoop 
 
 
$ Product.author | superiore | strip_tags | fuga: html: 'UTF-8'
 
 
$ Product.name | strip_tags | fuga: html: 'UTF-8'
 
$ Product.desc
 
$ $ Product.price | string_format: "% 2f"
 
l s = "Visualizza" mod = "blockdisplayproducts"
 
 
 / foreach / if

Poiché Prestashop utilizza i modelli Smarty, è possibile utilizzare numerose funzioni di supporto durante la visualizzazione dei dati. Iniziamo con un Se funzione per assicurarsi che l'array di prodotti sia a posto. Se lo è, entriamo in a per loop, generando l'HTML specificato per ognuno. Stiamo utilizzando le funzioni di aiuto integrate di Smarty per rimuovere i tag HTML e coprire il nome degli autori in maiuscolo e stiamo utilizzando un altro metodo per formattare il prezzo al numero desiderato di posizioni decimali. Per vedere un elenco completo di modificatori, vedi qui.

Inoltre, nota che, quando traduci le stringhe qui, devi inserire il nome del tuo modulo. Questo perché la traduzione non è legata a un tema, ma al modulo stesso. D'altra parte, il l la funzione è specifica del modello; quindi, per trovare il tuo file di traduzione, richiede il nome del modulo.

Ora puoi visualizzare il tuo sito nel browser; se hai aggiunto dei prodotti, dovrebbero essere visualizzati sulla home page ora.

Ora, il nostro modulo è perfettamente funzionante, ma non c'è modo di regolare il numero di prodotti restituiti. Per fare ciò, abbiamo bisogno di aggiungere una funzione, chiamata getContents. Se il modulo ha questa funzione, Prestashop aggiungerà automaticamente un pulsante di configurazione nella pagina "Moduli". Qualsiasi cosa restituita da questa funzione verrà visualizzata nella pagina di configurazione. Per iniziare, aggiungi la funzione alla classe del modulo e compilala come segue:

funzione pubblica getContent () $ html = '
'; $ html. = ' 
'. $ this-> displayName. ' Impostazioni
'; $ html. = ' 
'; $ html. = ". $ this-> l ('Numero di prodotti da visualizzare'). ': '; $ html. = ' '; $ html. = ' 
'; $ html. = '
'; return $ html; 

Questa funzione crea semplicemente il codice HTML necessario per visualizzare un modulo con una casella numerica e un pulsante Salva. Di nuovo, sto usando il $ This-> l () metodo in modo da poter tradurre il modulo in altre lingue in futuro, nel caso fosse necessario. Ho usato un campo numerico nel modulo HTML, ma fai attenzione, se stai facendo un modulo commerciale. Non è ancora supportato da tutti i browser. Detto questo, se è per uso personale, sentiti libero!

L'unica altra cosa che potrebbe sembrare criptica è la Strumenti :: safeOutput () funzione che stiamo chiamando sull'URL. Onestamente non sono sicuro al 100% di quanto sia cruciale questa chiamata, ma quello che sta facendo è lo striping di tutti i tag HTML e la conversione dei caratteri necessari in entità html.

Successivamente, vai alla pagina dei moduli e fai clic sul pulsante di configurazione sul modulo. Sarai accolto con il modulo che abbiamo appena creato.

Puoi regolare il numero e premere save, ma non abbiamo ancora scritto nella funzionalità di salvataggio, quindi continuerà a reimpostare su 6 (il valore che è già stato salvato).

Indietro nella funzione, aggiungere il seguente codice all'inizio della funzione:

if (Tools :: isSubmit ('numProds')) Configuration :: updateValue ('DP_Number_of_Products', (int) (Tools :: getValue ('numProds'))); 

Questo controlla se il valore è stato inviato - cioè, se il valore numProds esiste come a $ _GET o $ _POST variabile. Quindi aggiorniamo la proprietà in cui abbiamo memorizzato il valore. Il metodo Strumenti :: getValue accetta il nome di un campo modulo e opzionalmente una seconda stringa di cosa restituire se il campo modulo non è stato trovato; restituisce quindi una stringa formattata con il valore inviato. È importante metterlo prima di generare il modulo HTML; in caso contrario, il modulo conterrà i vecchi valori come apposti a quelli aggiornati.

Con quell'ultimo bit di codice, abbiamo completato il modulo. L'unica altra cosa che dovresti fare è aggiungere un'icona GIF 16x16 alla tua cartella dei moduli.

Siamo ora pronti per passare alla prossima opzione per l'integrazione di moduli con il tema.

Sostituzione dei moduli esistenti

La seconda opzione consiste nell'utilizzare un modulo esistente e riprogrammarlo in base ai propri gusti. Questa opzione è molto più semplice in quanto è sufficiente ricreare i file ".tpl" dal modulo.

Il mio tema di esempio manca ancora un menu di navigazione in alto, quindi personalizziamo il modulo. Per iniziare, abilita / installa il modulo nella pagina 'modules', chiamata 'Top horizontal menu'. Il prossimo passo è creare una cartella nella directory dei temi, chiamata moduli. Al suo interno, crea un'altra cartella con il nome effettivo del modulo - nel nostro caso, questo è blocktopmenu. Quando si caricano i file tpl di un modulo, Prestashop verifica innanzitutto se esiste un file nella directory override del modulo temi attivati ​​con lo stesso nome. In tal caso, caricherà la versione dei temi invece di quella originale. Il file tpl del modulo menu è denominato blocktopmenu.tpl, quindi devi creare un file con lo stesso nome nella nuova cartella che abbiamo appena creato.

Il modo più semplice per capire che tipo di dati offre un modulo è dare un'occhiata al loro file tpl e vedere quali dati usano o caricare il Debug strumento. Per velocizzare le cose, posso dirvi che questo plugin offre solo una singola variabile, denominata MENU, che contiene una stringa con tutte le voci di menu combinate insieme all'interno

 
 assegna var = valore tmpMenu = $ MENU | sostituisci: '
': " assign var = items value ="
"| explode: $ tmpMenu foreach $ items as $ item if! $ item @ last 
$ Item
 if ($ item @ index + 2)! = $ item @ total 
 / if / if / foreach 
 

tag - eccetto, questa volta, abbiamo aggiunto un'immagine icona dopo ogni voce di menu tranne l'ultima voce di menu. Inoltre, potresti aver notato che sto evitando l'ultimo valore nella matrice tutti insieme. Questo perché l'ultimo valore è solo un carattere di nuova riga.

Se hai eseguito tutto correttamente finora, ora puoi associarlo a tuo piacimento e aggiungere alcune pagine al menu dalla pagina "configura" del modulo. Una volta terminato, dovresti essere in grado di andare al tuo sito e vedere il menu funzionare come previsto!

---

Conclusione

Questa è stata una revisione molto breve ma approfondita delle tecniche necessarie per creare temi PrestaShop. Nel corso del tutorial, ho seguito i passaggi necessari per creare un tema multilingue completo e due modi diversi per inserire moduli tematici nel tuo modello.

Andando avanti, ti suggerisco di immergerti un po 'più a fondo in Smarty, in quanto offre una serie di funzioni nascoste che possono davvero aiutarti. Per quanto riguarda un buon posto per saperne di più su Prestashop, beh, non c'è molto; Raccomando di leggere la fonte. Al momento della stesura di questo documento, la documentazione di Prestashop è piuttosto discutibile nella sua trattazione degli argomenti; tuttavia, il loro codice sorgente è molto ben documentato. Un'altra opzione eccellente è esaminare altri moduli e temi per ottenere una comprensione più profonda di ciò che Prestashop è in grado di fare.

Spero ti sia piaciuto leggere questo articolo. Se avete domande riguardanti l'articolo stesso, o Prestashop in generale, sentitevi liberi di lasciare un commento qui sotto!

Hai bisogno di temi prestaShop premium e pronti all'uso? Dai un'occhiata a ThemeForest!

Link utili: plugin PrestaShop di CodeCanyon.