Pagine modello PrestaShop

Struttura dei file di un tema

Quando si crea un tema, devi pensare ad una parte anteriore di tutte le varie pagine e pezzi di informazioni che il tema ha di gestire correttamente, al fine di offrire un'esperienza completa al vostro cliente. Qui ancora, il tema predefinito è un buon modo per trarre ispirazione, sia nella varietà di file che presenta e comportamenti per che si approvvigiona, ma anche nel suo codice, che può tuffarsi per capire meglio come funziona un tema.

Innanzitutto, ecco l'elenco dei file dei modelli necessari (avviso spoiler: ci sono 60 di loro. Sì, tutti sono necessari per varie funzioni di PrestaShop):

ordine-indirizzo-prodotto-line.tpl ordine-return.tpl
Nome del file
Perché è necessario
Altri file di modello utilizzati da questo modello nel tema predefinito
mappare tpl Viene visualizzato quando un file non viene trovato.  
Address.tpl Permette al cliente di creare un nuovo indirizzo.
  • Errors.tpl
Addresses.tpl Permette al cliente di Mostra i suoi indirizzi attuali.  
Authentication.tpl Permette al cliente di accedere al suo account.
  • ordine-steps.tpl
  • Errors.tpl
Best-sales.tpl

Visualizza i prodotti più venduti.

  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl
breadcrumb.tpl  Visualizza il percorso di categoria Categoria/prodotto corrente.
  • breadcrumb.tpl
Categoria-cms-albero-branch.tpl Corre attraverso le categorie CMS per visualizzarli.
  • Categoria-cms-albero-branch.tpl
Categoria-count.tpl Visualizza il numero di prodotti in una categoria.  
Categoria-albero-branch.tpl Corre attraverso le categorie di prodotto per visualizzarli.
  • Categoria-albero-branch.tpl
category.tpl Visualizza il contenuto di una categoria: scena, immagine, testo, comparatore di prodotto, ecc.
  • Errors.tpl
  • scenes.tpl
  • Categoria-count.tpl
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl
  • prodotto-compare.tpl
CMS.tpl Visualizza il contenuto di una pagina CMS.  
contatto-tpl Visualizza il modulo di contatto del cliente.
  • Errors.tpl
Discount.tpl Visualizza l'elenco dei voucher del cliente.  
Errors.tpl Visualizza gli errori correnti.  
footer. tpl Visualizza piè di pagina.
  • Global.tpl
Global.tpl Definisce alcune variabili di Smarty, JavaScript più notevoli quelli.  
ospite-tracking.tpl Visualizza la pagina di rilevamento per i clienti dell'ospite (visitatori con nessun account).
  • ordine-detail.tpl
header. tpl Visualizza l'intestazione: doctype HTML, collegamenti a file CSS, ecc.
  • breadcrumb.tpl
History.tpl Visualizza tutti i suoi ordini precedenti al cliente.
  • Errors.tpl
Identity.tpl Visualizza e aggiorna le informazioni personali del cliente.
  • Errors.tpl
layout.tpl Invita i mattoni principali del tema: intestazione, piè di pagina, colonne, modello corrente e Live Edit.
  • header. tpl
  • footer. tpl
Maintenance.tpl Visualizza una pagina speciale per quando il negozio è in manutenzione.  
produttore-list.tpl Visualizza un elenco di tutti i produttori.
  • Errors.tpl
  • NBR-prodotto-page.tpl
  • Pagination.tpl
manufacturer.tpl Visualizzare i prodotti da un singolo fornitore.
  • Errors.tpl
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl
My-account.tpl Visualizza pagina account del cliente.  
NBR-prodotto-page.tpl Visualizza il numero di prodotti nella pagina corrente.  
nuovo-products.tpl Consente di visualizzare un blocco con i nuovi prodotti.
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
ordine-indirizzo-multishipping-products.tpl Visualizza gli indirizzi per consegnare un prodotto in una situazione multishipping.
  • ordine-indirizzo-prodotto-line.tpl
ordine-indirizzo-multishipping.tpl  
  • ordine-steps.tpl
  • Errors.tpl
  • ordine-indirizzo-multishipping-products.tpl
   
ordine-address.tpl  
  • ordine-steps.tpl
  • Errors.tpl
ordine-carrier.tpl  
  • ordine-steps.tpl
  • Errors.tpl
ordine-confirmation.tpl  
  • Errors.tpl
  • ordine-steps.tpl
ordine-detail.tpl    
ordine-follow.tpl    
ordine-opc-nuovo-account.tpl    
ordine-opc.tpl  
  • shopping-cart.tpl
  • ordine-address.tpl
  • ordine-opc-nuovo-account.tpl
  • ordine-carrier.tpl
  • ordine-payment.tpl
  • Errors.tpl
ordine-payment.tpl  
  • Errors.tpl
  • ordine-steps.tpl
  • shopping-cart-prodotto-line.tpl
 
  • Errors.tpl
ordine-slip.tpl    
ordine-steps.tpl    
Pagination.tpl    
password.tpl  
  • Errors.tpl
prezzi-drop.tpl  
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
prodotto-compare.tpl    
prodotto-lista-colors.tpl    
prodotto-list.tpl    
prodotto-sort.tpl    
prodottotpl  
  • Errors.tpl
  • prodotto-list.tpl
prodotti-comparison.tpl    
limitato-country.tpl    
scenes.tpl    
search.tpl  
  • Errors.tpl
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl
shopping-cart-prodotto-line.tpl    
shopping-cart.tpl  
  • ordine-steps.tpl
  • Errors.tpl
  • shopping-cart-prodotto-line.tpl
Sitemap.tpl  
  • Categoria-albero-branch.tpl
  • Categoria-cms-albero-branch.tpl
Stores.tpl    
store_infos.tpl    
fornitore-list.tpl    
Supplier.tpl Permette di visualizzare l'elenco dei prodotti al fornitore.
  • Errors.tpl
  • prodotto-sort.tpl
  • NBR-prodotto-page.tpl
  • prodotto-compare.tpl
  • Pagination.tpl
  • prodotto-list.tpl

Facciamo immersioni sul modo in cui un tema è organizzato: cartelle, file, cui appartengono e come gestirli correttamente

Organizzazione di un tema

  • Organizzazione di un tema
    • Cartelle
      • Anteprima file
      • CSS e Sass
        • CSS
        • Essere insolente / Compass
      • Tipo di carattere
      • Immagine
      • JavaScript
      • Lingua
      • Il tema mobile
    • File
      • File di modelli
      • Fogli di stile
      • File di immagine
      • Strumenti

Cartelle

Le cartelle principali di qualsiasi tema PrestaShop sono quelli:

  • Il /cache cartella contiene tutti i file temporanei che sono generati e riutilizzati al fine di alleggerire il carico del server. La cartella è vuota per impostazione predefinita.
  • Il /CSS cartella contiene tutti i file CSS.
    • Il /Sass cartella contiene tutti i Sass .scss file di origine, prima che essi vengono compilati in file CSS.
  • Il / font cartella contiene i file di font necessari.
  • Il /IMG cartella contiene tutte le immagini.
  • Il /js cartella contiene tutti i file JavaScript.
  • Il / lang cartella contiene traduzioni del tema. I suoi diritti di accesso devono essere impostati a CHMOD 666 (per esempio), così che lo strumento di traduzione di back-office in grado di leggere e scrivere in esso.

Le seguenti cartelle non sono direttamente correlati a tema, ma aiuto è assicurarsi che tutta la caratteristica di PrestaShop hanno un design che è coerenza con il tema:

  • Il /mails cartellacontiene i modelli per le email che PrestaShop invia (conferma d'ordine, richiesta password, notifiche di spedizione, ecc.).
  • Il / mobile cartella contiene la versione mobile del tema.
  • Il /modules cartella contiene i file di modello per molti moduli.
  • Il /PDF cartella contiene i file di modello per i file PDF che PrestaShop genera (fatture, bolla di consegna, gli ordini di approvvigionamento, ecc.).

La radice della cartella contiene file TPL solo, così come il Preview.jpg file di anteprima.

Anteprima file

Il Preview.jpg file alla radice della cartella del tema è la miniatura che è utilizzata da PrestaShop in relativo selettore tema di back-office.

Serve come un promemoria visivo di ciò che è il tema, e si dovrebbe pertanto fare uno screenshot piuttosto che il logo della tua società.

Può avere qualsiasi dimensione – il tema di default è 180 * 445 pixel.

Deve essere un file JPEG.

CSS e Sass

CSS

File CSS del tema si trovano nella /CSS cartella.

Si raccomanda di avere un foglio di stile comune per le regole CSS globale: CSS.
Poi, ciascuno del controller dovrebbe avere il proprio file CSS: per esempio, Product.CSS per la pagina del prodotto.

Essere insolente / Compass

Sass e bussolai file sono facoltativi: non è necessario per utilizzare questi strumenti per generare i file CSS per il vostro tema di back-office.

Se si utilizza Sass e bussola, consigliamo di mettere la fonte .scss file nella /Sass tema, così che altri sviluppatori possono avere accesso a tema e rielaborare loro più facilmente.

Da lì, è possibile generare i file CSS nella /CSS cartelle da file Sass nella /Sass cartella!

Tipo di carattere

Il / font cartella è facoltativo: esso contiene i font che si è scelto di utilizzare per il tuo tema.

Per esempio, l'impostazione predefinita PrestaShop tema utilizza il font Font impressionante imposta (http://fortawesome.github.io/font-awesome/) per le sue icone sensible a reagire, e quindi ha i seguenti file sua / font cartella:

  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff

Se non si creano il tema con un tipo di carattere specifico o un'icona nella mente, si può saltare questa cartella.

Immagine

Immagini legate al tema devono essere conservati nella /IMG cartella.

È possibile creare sotto-cartelle per una migliore organizzazione. Per esempio, il tema di default ha le seguenti sottocartelle:

  • / icona per semplici icone (per esempio, quelli non disponibili nel vostro set di font prescelto).
  • /jQuery per immagini jQuery specifiche.

È possibile creare più se necessario.

JavaScript

File JavaScript devono essere conservati nella /js cartella.

A differenza dei file CSS, vi consigliamo di non avere un comune/global file JavaScript, né si dovrebbe avere un singolo file per ogni controller.

Lingua

Tutti i file di traduzione devono essere conservati nella / lang cartella.

File devono essere denominati dopo il loro codice ISO 3166-1 alpha-2 in minuscolo: per esempio, fr.php.

Questi file devono essere generati dallo strumento di traduzione integrata PrestaShop (situato nella localizzazione / menu di traduzioni).


Carrello 0 Carrello della spesa

Nessun prodotto

Spedizione gratuita! spedizione
$0.00 Totale

Check-out