Guida per webdesigner Prestashop 1.5

14
www.prestaitalia.it la community italiana Prestashop Pagina | 1 Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati. E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013 Community, blog, shop per tutti gli appassionati Prestashop PRESENTA : Guida Per Webdesigner PrestaShop 1.5 Guida Realizzata Da : Agenzia Specializzata sviluppo soluzioni Ecommerce EV Network s.r.l. - Via Emilio Salgari 14/e 31056 Roncade (TV) Cell. 3664373328 Fax. +39 (0)422 799711 P.IVA: 04417370261 - mail:[email protected]

description

Scopri come realizzare temi personalizzati con la guida per webdesigner completamente in italiano !!!

Transcript of Guida per webdesigner Prestashop 1.5

Page 1: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 1

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Community, blog, shop per tutti gli appassionati Prestashop

PRESENTA :

Guida Per Webdesigner

PrestaShop 1.5

Guida Realizzata Da :

Agenzia Specializzata sviluppo soluzioni Ecommerce EV Network s.r.l. - Via Emilio Salgari 14/e 31056 Roncade (TV) Cell. 3664373328 –

Fax. +39 (0)422 799711 P.IVA: 04417370261 - mail:[email protected]

Page 2: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 2

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Sommario Designer Guide ................................................................................................................................ 6

Allenamento .................................................................................................................................. 6

Concetti .......................................................................................................................................... 6

Architettura tecnica di PrestaShop ........................................................................................ 7

Modello....................................................................................................................................... 7

Vista ............................................................................................................................................ 8

Controllore ................................................................................................................................ 8

Concetti e Informazioni tecniche ............................................................................................ 8

Le cose da fare ........................................................................................................................ 8

Come funziona un Tema ....................................................................................................... 8

Cartelle specifiche del Tema ................................................................................................ 9

Panoramica della cartella del Tema ................................................................................... 9

Collegamenti esistenti: Front office ..................................................................................... 10

Homepage e Pagine Generali del Sito ............................................................................. 10

Pagina del Prodotto .............................................................................................................. 10

Pagina del Carrello ............................................................................................................... 11

Pagina di Ricerca .................................................................................................................. 11

Pagina di scelta del Corriere .............................................................................................. 11

Pagina del Pagamento ......................................................................................................... 12

Pagina dell’Ordine ................................................................................................................ 12

Collegamenti esistenti: Back office ..................................................................................... 12

Collegamenti generali .......................................................................................................... 12

Ordini e Dettagli dell’ordine ............................................................................................... 13

Prodotti .................................................................................................................................... 13

Statistiche ............................................................................................................................... 13

Clienti ....................................................................................................................................... 14

Corrieri ..................................................................................................................................... 14

Locazione visuale dei Collegamenti principali ................................................................. 14

Zone principali di Contenuto ............................................................................................. 14

Intestazione della Pagina .................................................................................................... 15

Colonna di Sinistra ............................................................................................................... 15

Area Centrale .......................................................................................................................... 16

Colonna di Destra ................................................................................................................. 17

Categorie ................................................................................................................................. 18

Caratteristiche di un Tema del Front office ........................................................................... 19

Page 3: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 3

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Le cartelle del Tema ................................................................................................................. 19

Anteprima Immagine ................................................................................................................ 20

File di Traduzione ...................................................................................................................... 21

Gestire le Traduzioni ............................................................................................................ 21

Trasmettere i Dati al Tema di PrestaShop ...................................................................... 21

File Cached ................................................................................................................................. 22

File Immagini .............................................................................................................................. 22

File del Stile del Foglio (CSS) ................................................................................................ 22

File JavaScript (JS) ................................................................................................................... 23

Versione Mobile del Tema ...................................................................................................... 23

Effettuare l’overriding delle E-mail e dei File modello PDF ........................................... 24

Effettuare l’overriding dei file modello del modulo ......................................................... 24

Caratteristiche di un Tema del Back office ............................................................................ 24

Le cartelle del Tema ................................................................................................................. 24

CSS e file immagine ................................................................................................................. 25

File vista del Controllore ......................................................................................................... 25

I file Vista degli Helper ............................................................................................................. 27

Modelli Tema e Smarty ................................................................................................................ 27

Principi base ............................................................................................................................... 27

I Delimiter ................................................................................................................................ 27

Commenti ................................................................................................................................ 28

Variabili .................................................................................................................................... 28

Condizionali ............................................................................................................................ 28

I Loop ........................................................................................................................................ 28

Inclusione di file .................................................................................................................... 29

Funzione Debug..................................................................................................................... 30

Usi avanzati ................................................................................................................................ 30

Capture..................................................................................................................................... 30

Assegnare le variabili .......................................................................................................... 30

La variabile $smarty ............................................................................................................. 31

Literal ........................................................................................................................................ 31

Funzioni ................................................................................................................................... 31

Plugin ....................................................................................................................................... 32

I divieti di Smarty con PrestaShop ................................................................................... 32

Usare jQuery e Ajax ...................................................................................................................... 32

Riguardo a jQuery ..................................................................................................................... 32

Page 4: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 4

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

$ di jQuery ............................................................................................................................... 33

Funzioni in jQuery ................................................................................................................. 33

Selettori .................................................................................................................................... 33

Metodi e Richiamate ............................................................................................................. 34

Plugin disponibili in PrestaShop ...................................................................................... 34

Altre funzioni .......................................................................................................................... 35

Effettuare chiamate Ajax con jQuery ................................................................................... 35

Riguardo a Ajax ..................................................................................................................... 36

Metodi Ajax di jQuery ........................................................................................................... 37

Cose da fare ..................................................................................................................................... 38

Pensare al futuro ......................................................................................................................... 38

Il Design in Photoshop ................................................................................................................ 39

Spazio dei colori ...................................................................................................................... 40

Unità .......................................................................................................................................... 40

Carattere ................................................................................................................................... 40

Dimensione del Carattere ...................................................................................................... 40

Trasparenza ............................................................................................................................. 40

Miscele ...................................................................................................................................... 41

Fruibilità......................................................................................................................................... 41

L’homepage .............................................................................................................................. 41

La Pagina del Prodotto ........................................................................................................... 42

Il Conversion funnel: "Il mio account" e le pagine collegate ad esso .............................. 42

Ottimizzare le Immagini .............................................................................................................. 43

Consigli sulla Chiave SEO ......................................................................................................... 43

Tutorial dei Designer ....................................................................................................................... 44

Modifiche nella versione 1.5 che hanno influito sullo sviluppo del tema ................................ 44

Introduzione .................................................................................................................................. 44

getPageLink ................................................................................................................................. 44

B2B ................................................................................................................................................ 44

Navigazione a strati .................................................................................................................... 45

Il tag H1 ..................................................................................................................................... 45

Quantità disponibili .................................................................................................................. 45

Attributi del prodotto .................................................................................................................... 46

Cambiamenti da applicare al tema 1.4 per usare gli URL prodotto unico per

combinazione ............................................................................................................................... 48

In product.tpl ............................................................................................................................ 48

Page 5: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 5

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

In js/product.js .......................................................................................................................... 49

Riassunto del nuovo carrello ..................................................................................................... 50

Titoli sociali ................................................................................................................................... 56

Nuovo modello ............................................................................................................................. 56

Modello dinamico ........................................................................................................................ 57

Considerazioni generali URL del tema e azioni form ............................................................ 57

order-address.tpl ..................................................................................................................... 58

order-carrier.tpl ........................................................................................................................ 59

order-detail.tpl .......................................................................................................................... 59

order-opc.tpl ............................................................................................................................. 60

Modificare un tema 1.4 per supportare i prodotti regalo ........................................................... 61

Introduzione .................................................................................................................................. 61

Modificare shopping-cart.tpl ...................................................................................................... 61

Modificare shopping-cart-product-line.tpl ................................................................................ 62

Nascondere il tasto "Elimina" ................................................................................................ 62

Modificare gli attributi di ID .................................................................................................... 63

Aggiungere un logo "Regalo" ................................................................................................ 63

Risultato .................................................................................................................................... 64

Implementare la navigazione a strati in un tema ........................................................................ 64

Cos’è PRESTAITALIA.it ? ..................................................................................................................... 66

HAI BISOGNO DI AIUTO ? ................................................................................................................... 67

CONTATTACI ALLO 0422798184 O [email protected] ..................................................................... 67

Page 6: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 6

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Designer Guide

L’installazione predefinita di PrestaShop offre un tema neutrale nelle sfumature di grigio, consentendo ai venditori di

cominciare velocemente e liberamente la propria attività, qualsiasi essa sia.

Sono disponibili quasi 1000 temi nel marketplace Addons di PrestaShop (http://addons.prestashop.com/fr/). Sono stati

creati dai membri della community di PrestaShop o dal Team di PrestaShop, e vengono venduti a prezzi ragionevoli –

alcuni sono addirittura gratuiti.

In qualità di grafico/sviluppatore del web, è possibile mettere in vendita i tuoi temi nel sito Addons di PrestaShop, e

guadagnare il 70% del prezzo di vendita.

Qualsiasi persona con un minimo di conoscenza di CSS e della manipolazione delle immagini può personalizzare il tema

predefinito di PrestaShop. Conoscendo anche PHP, puoi costruire un intero tema nuovo per il tuo negozio – o per i

venditori che desiderano un tema personalizzato. Grazie ad un sistema di temi, che è stato provato e testato, il quale usa

il template engine Smarty (http://www.smarty.net/), qualsiasi negozio può avere un tema che corrisponda alle proprie

necessità.

Allenamento

PrestaShop offre inoltre un programma di allenamento per designer. Contattaci a questa pagina:

http://www.prestashop.com/en/training

Concetti

Il sistema di temi di PrestaShop è basato su un template engine, chiamato Smarty (http://www.smarty.net/), il quale

consente ai designer del web e agli sviluppatori di costruire facilmente il proprio tema con poche conoscenza tecniche.

Tutti i designer del web e gli sviluppatori dovrebbero utilizzare i seguenti strumenti:

Firefox: installa Firebug (http://getfirebug.com/), un’estensione gratuita per paragonare facilmente ed effettuare il

debug tra il tuo CCS e

l’output.

Firefox/Chrome: installa il Web Developer (http://chrispederick.com/work/web-developer/), un’estensione gratuita

aggiunge molti

strumenti di sviluppo del web al tuo browser.

Safari 5+: usa il Web Inspector (vedi

http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2Saf

ariDeveloperTools/SafariDeveloperTools.html).

Chrome: usa Developer Tools (vedi https://developers.google.com/chrome-developer-tools/docs/overview).

Opera 9.5: usa Dragonfly, un ambiente multifunzione di debug (vedi http://www.opera.com/dragonfly/).

Internet Explorer 8+: usa Developer Tools (vedi http://msdn.microsoft.com/en-

us/library/dd565628%28v=vs.85%29.aspx).

Internet Explorer 6 and 7: installa il IE Developer Toolbar (vedi http://www.microsoft.com/en-

us/download/details.aspx?id=18359),

o usa Firebug Lite (vedi https://getfirebug.com/firebuglite).

Forniscono molti strumenti utili, tra cui DOM explorer, editor CSS , network inspector, ecc., e un grande aiuto

Quando si effettua il debug di HTML, CSS, JavaScript, e anche le richieste Ajax.

Page 7: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 7

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Architettura tecnica di PrestaShop

PrestaShop è basato su un’architettura a tre strati:

Strato Dati (oggetti dati). L’accesso del database è controllato attraverso i file nella cartella "classi".

Strato Applicazione (controllo dati). Il contenuto fornito dall’utente è controllato dai file nella directory

radice.

Strato Presentazione (design). Tutti i file del tema sono nella cartella “temi”.

Per ulteriori informazioni vedi la pagina di Wikipedia: http://en.wikipedia.org/wiki/Multitier_architecture#Three-

tier_architecture

È lo stesso principio dell’architettura Model–View–Controller (MVC) , ma questa solamente più semplice ed

accessibile.

Per saperne di più riguardo a MVC, vai alla pagina di Wikipedia: http://en.wikipedia.org/wiki/Model-view-

controller

Il nostro team di sviluppatori ha scelto di non usare framework PHP, come Zend Framework, Symfony o

CakePHP, in modo tale da garantire una migliore leggibilità e quindi un editing più veloce.

Vale anche per migliori performance, visto che il software è composto solamente dalle linee di codice che

richiede, e non contiene varie librerie generiche.

Un’architettura a tre strati ha molti vantaggi:

È più semplice leggere il codice del software.

Gli sviluppatori possono aggiungere e modificare il codice più facilmente.

I grafici e gli integratori HTML possono lavorare all’interno dei confini della cartella /themes senza dover

capire o leggere una sola riga del codice PHP.

Gli sviluppatori possono lavorare su dati e moduli aggiuntivi che possono essere utilizzati dagli integratori

HTML.

Modello

Un modello rappresenta il comportamento dell’applicazione: processo dei dati, interazione del database,

ecc.

Page 8: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 8

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Descrive o contiene i dati che sono stati processati dall’applicazione. Gestisce questi dati e garantisce la loro

integrità.

Vista

Una Vista è l’interfaccia con cui un utente interagisce.

Il suo primo compito è quello di visualizzare i dati forniti dal modello. Il secondo è quello di gestire tutte le

azioni dell’utente (click del mouse, selezione di un elemento, tasti, ecc.), e inviare questi eventi al controllore.

La Vista non fa alcun processo ma visualizza solamente il risultato del processo effettuato dal modello, e

interagisce con l’utente.

Controllore

Il Controllore gestisce la sincronizzazione degli eventi tra il Modello e la Vista, e li aggiorna entrambi se

necessario. Riceve tutti gli eventi dell’utente e innesca le azioni da effettuare.

Se un’azione necessita che i dati vengano cambiati, il Controllore “chiederà” al Modello di modificare i dati, e

a sua volta il Modello notificherà alla Vista che i dati sono stati modificati, in modo che la Vista possa

aggiornarsi.

Concetti e Informazioni tecniche

Le cose da fare

Ecco una lista non esauriente delle cose che devi fare per creare un tema:

1. Non mischiare HTML e il PHP, usa i tag Smarty per una pagina dinamica.

2. Non mischiare HTML e CSS, inserisci il codice CSS in un file .css separato.

3. Valida sempre HTML e CSS usando i validatori W3C: http://validator.w3.org/ per HTML e

XHML, http://jigsaw.w3.org/css-validator/ per CSS.

4. Non fare query SQL da un controllore PHP (file .php alla radice di PrestaShop). È meglio usare metodi

esistenti dalle classi di PrestaShop, o creare nuovi metodi per queste classi.

5. Controlla sempre se il metodo di cui hai bisogno esiste già nelle classi disponibili.

6. Non modificare mai i file codice di PrestaShop. Costruisci sempre il tuo codice nei moduli in modo da

rendere più semplici gli aggiornamenti.

7. Assicurati sempre di creare un codice chiaro e leggibile, rendendolo facile da mantenere.

8. Commenta il tuo codice, e scrivi in inglese.

9. Quando modifichi il tema in un sito di produzione, per prima cosa metti il negozio in modalità manutenzione,

nella pagina delle preferenze “Manutenzione” del back office.

10. Usa browser moderni, come Firefox, Google Chrome, IE9 o Opera (e assicurati che la tua famiglia e i tuoi

amici facciano la stessa cosa)

11. Quando possibile, usa gli sprite CSS

(leggi http://www.alistapart.com/articles/sprites ehttp://www.alistapart.com/articles/sprites2/).

Come funziona un Tema

Un tema di PrestaShop è una serie di file che puoi modificare per cambiare l’aspetto del tuo negozio online.

Ecco alcune informazioni importanti:

Page 9: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 9

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Tutti i temi hanno i propri file nella directory radice /themes.

Ogni tema ha la propria sotto cartella nella cartella dei temi principali.

Ogni tema è costituito da file modello (.tpl), file immagine (.gif, .jpg, .png), uno o più file CSS (.css),

e qualche volta anche file JavaScript (.js).

Ogni tema possiede un file immagine preview.jpg nella propria cartella, che consente al padrone del

negozio di vedere come appare il tema direttamente dal back office, e selezionare il tema in maniera

adeguata.

Cartelle specifiche del Tema

In qualità di sviluppatore del tema, ci sono cinque cartelle principali a cui devi prestare attenzione:

/modules: qui è dove sono contenuti tutti i tuoi moduli. Un modulo possiede file modello e può ridefinire le

parti del tema.

/themes: qui è dove sono contenuti tutti i temi. Il tema predefinito 1.5 è nella cartella /default (in 1.4 era

in /prestashop).

/mails: qui è dove sono contenuti tutti i modelli e-mail. I modelli e-mail dovrebbero riflettere lo stile e il

design del tema principale. Ogni sotto cartella contiene modelli specifici della lingua.

/img: qui è dove sono contenuti tutte le immagini del negozio. Le immagini specifiche del tema sono

contenute nella cartella immagini del tema stesso.

/pdf: qui è dove sono contenuti tutti i modelli documento.

Panoramica della cartella del Tema

Ecco una panoramica della struttura dei file di un tema di PrestaShop (qui, quello predefinito):

La cartella /css contiene tutti i file CSS.

La cartella /img contiene tutte le immagini.

La cartella /js contiene tutti i file JavaScript.

La cartella /lang contiene le traduzioni del tema. I diritti di accesso dovrebbero essere impostati in

CHMOD 666 (per esempio), in modo tale che lo strumento di traduzione del back office possa leggerla e

scrivere all’interno.

La radice della cartella contiene solo file TPL (file Smarty) come anche il file preview.jpg.

Page 10: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 10

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Integrare contenuto in una pagina usando collegamenti

I collegamenti sono un modo per associare il tuo codice a qualche evento specifico di PrestaShop.

La maggior parte delle volte, sono usati per inserire contenuto in una pagina.

Per esempio, il tema predefinito dell’homepage ha i seguenti collegamenti:

Nome del collegamento Descrizione

displayHeader Mostra il contenuto nell’area dell’intestazione della pagina.

displayTop Mostra il contenuto nell’area superiore della pagina.

displayLeftColumn Mostra il contenuto nella colonna di sinistra della pagina.

displayHome Mostra il contenuto nell’area centrale della pagina.

displayRightColumn Mostra il contenuto nella colonna di destra della pagina.

displayFooter Mostra il contenuto nell’area a piè di pagina della pagina.

I collegamenti possono essere utilizzati anche per effettuare azioni specifiche in determinate circostanze (es.

inviare un’e-mail ad un cliente).

Collegamenti esistenti: Front office

Homepage e Pagine Generali del Sito

Nome del

collegamento

Descrizione

displayHeader Chiamato all’interno del tag HTML <head>. Locazione ideale per aggiungere JavaScript e

file CSS.

displayTop Chiamato nell’intestazione della pagina.

displayLeftColumn Chiamato quando si carica la colonna di sinistra.

displayRightColumn Chiamato quando si carica la colonna di destra.

displayFooter Chiamato nel piè di pagina.

displayHome Chiamato al centro dell’homepage.

Pagina del Prodotto

Nome del collegamento Descrizione

Le cartelle /css, /img e /js sono facoltative, il tema può funzionare perfettamente

senza di loro. La loro creazione dipende da te.

Page 11: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 11

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Nome del collegamento Descrizione

displayLeftColumnProduct Chiamato subito prima il link "Stampa", sotto l’immagine.

displayRightColumnProduct Chiamato subito dopo il blocco per il tasto “Aggiungi al carrello”.

displayProductButtons Chiamato all’interno del blocco per il tasto “Aggiungi al carrello", subito dopo quel tasto.

actionProductOutOfStock Chiamato all’interno del blocco per il tasto "Aggiungi al carrello", subito dopo

l’informazione “Disponibilità”

displayFooterProduct Chiamato subito dopo i tab.

displayProductTab Chiamato nella lista dei tab, come "Ulteriori informazioni", "Foglio dati", "Accessori",

ecc.

displayProductTabContent Chiamato quando viene cliccato su un tab.

Pagina del Carrello

Nome del collegamento Descrizione

actionCartSave Chiamato subito dopo la creazione o l’aggiornamento di un carrello.

displayShoppingCartFooter Chiamato subito dopo la tabella dei prodotti del carrello.

displayShoppingCart Chiamato dopo la tabella dei prodotti del carrello, subito sopra il tasto di

navigazione.

displayCustomerAccountFormTop Chiamato all’interno della scheda di creazione dell’account del cliente, subito sopra

il blocco "Informazioni personali".

displayCustomerAccountForm Chiamato all’interno della scheda di creazione dell’account del cliente, subito prima

del tasto "Registra".

actionCustomerAccountAdd Chiamato subito dopo la creazione dell’account del cliente.

displayCustomerAccount Chiamato sull’homepage dell’account del cliente, dopo la lista dei link disponibili.

Locazione ideale per aggiungere un link a questa lista.

displayMyAccountBlock Chiamato all’interno del blocco "Il mio account", nella colonna di sinistra, sotto la

lista di link disponibili. Locazione ideale per aggiungere un link a questa lista.

displayMyAccountBlockfooter Mostra informazioni extra all’interno del blocco "Il mio account".

actionAuthentication Chiamato subito dopo l’identificazione del cliente, solo se l’autenticazione è valida

(indirizzo e-mail e password sono OK) .

actionBeforeAuthentication Chiamato subito prima dell’autenticazione.

Pagina di Ricerca

Nome del

collegamento

Descrizione

actionSearch Chiamato dopo aver effettuato una ricerca. Locazione ideale per analizzare e/o gestire la query

di ricerca e i risultati.

Pagina di scelta del Corriere

Page 12: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 12

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Nome del

collegamento

Descrizione

displayBeforeCarrier Mostrato prima della lista del corriere sul front office.

displayCarrierList Chiamato dopo la lista di corrieri disponibili, durante il processo dell’ordine. Locazione ideale

per aggiungere un corriere, come aggiunto da un modulo.

Pagina del Pagamento

Nome del collegamento Descrizione

displayPaymentTop Parte superiore della pagina del pagamento.

displayPayment Chiamato quando è necessario costruire una lista delle soluzioni di pagamento disponibili,

durante il processo dell’ordine. Locazione ideale per abilitare la scelta di un modulo del

pagamento che hai sviluppato.

displayPaymentReturn Chiamato quando l’utente è inviato al negozio dopo aver pagato su un sito di terze parti.

Locazione ideale per visualizzare un messaggio di conferma o per fornire ulteriori dettagli

sul pagamento.

displayOrderConfirmation Un duplicato di paymentReturn.

displayBeforePayment Chiamato quando si visualizza la lista di soluzioni di pagamento disponibili. Locazione

ideale per reindirizzare l’utente al posto di visualizzare la lista (es, 1-click sulla procedura di

pagamento PayPal).

Pagina dell’Ordine

Nome del

collegamento

Descrizione

actionOrderReturn Chiamato quando il cliente richiede di far ritornare la propria merce, e se compaiono errori.

displayPDFInvoice Chiamato quando si visualizza la fattura in formato PDF. Locazione ideale per visualizzare il

contenuto all’interno della fattura.

Collegamenti esistenti: Back office

Collegamenti generali

Nome del collegamento Descrizione

displayBackOfficeTop Chiamato all’interno dell’intestazione, sopra i tab.

displayBackOfficeHeader Chiamato tra i tag HEAD. Locazione ideale per aggiungere JavaScript e file CSS.

displayBackOfficeFooter Chiamato all’interno del piè di pagina, sopra la linea "Power By PrestaShop" .

displayBackOfficeHome Chiamato al centro dell’homepage.

Page 13: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 13

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Ordini e Dettagli dell’ordine

Nome del collegamento Descrizione

actionValidateOrder Chiamato durante il processo di creazione del nuovo ordine, subito dopo essere stato

creato.

actionPaymentConfirmation Chiamato quando lo stato dell’ordine diventa “Pagamento accettato”.

actionOrderStatusUpdate Chiamato quando lo stato dell’ordine è cambiato, subito prima essere effettivamente

cambiato.

actionOrderStatusPostUpdate Chiamato quando lo stato dell’ordine è cambiato, subito dopo essere effettivamente

cambiato.

actionProductCancel Chiamato quando un prodotto è cancellato dall’ordine, subito dopo l’eliminazione.

displayInvoice Chiamato quando vengono visualizzati i dettagli dell’ordine, sopra il blocco Informazioni

clienti.

displayAdminOrder Chiamato quando vengono visualizzati i dettagli dell’ordine, sotto il blocco Informazioni

clienti.

actionOrderSlipAdd Chiamato durante la creazione di una nota di credito, subito dopo essere stata creata.

Prodotti

Nome del collegamento Descrizione

actionProductSave Chiamato quando si salvano i prodotti.

actionUpdateQuantity Chiamato durante la validazione di un ordine il cui stato è diverso da “cancellato” o

“errore nel pagamento”, per ogni prodotto dell’ordine.

actionProductAttributeUpdate Chiamato quando una declinazione del prodotto è aggiornata, subito dopo

l’aggiornamento.

actionProductAttributeDelete Chiamato quando la declinazione del prodotto è cancellata.

actionWatermark Chiamato quando viene aggiunta un’immagine ad un prodotto, subito dopo

l’aggiunta.

displayAttributeForm Aggiunge campi alla scheda "valore attributo".

displayAttributeGroupForm Aggiunge campi alla scheda "gruppo attributo".

displayAttributeGroupPostProcess Chiamato quando si effettua post-process nel gruppo attributo admin.

displayFeatureForm Aggiunge campi alla scheda "caratteristica".

displayFeaturePostProcess Chiamato quando si effettua post-process in caratteristica admin.

displayFeatureValueForm Aggiunge campi alla scheda "valore caratteristica".

displayFeatureValuePostProcess Chiamato quando si effettua post-process nel valore caratteristica admin.

Statistiche

Nome del collegamento Descrizione

displayAdminStatsGraphEngine Chiamato quando viene visualizzato un grafico delle statistiche.

Page 14: Guida per webdesigner Prestashop 1.5

w w w . p r e s t a i t a l i a . i t l a c o m m u n i t y i t a l i a n a P r e s t a s h o p P a g i n a | 14

Tutti i marchi utilizzati sono di proprietà dei rispettivi proprietari. Tutti i diritti sono riservati.

E’ vietata la distribuzione dei contenuti di questo manuale in ogni sua forma non autorizzata Rev. 01/aprile 2013

Nome del collegamento Descrizione

displayAdminStatsGridEngine Chiamato quando viene visualizzata una tabella delle statistiche.

displayAdminStatsModules Chiamato quando viene visualizzata la lista di moduli statistiche.

Clienti

Nome del

collegamento

Descrizione

displayAdminCustomers Chiamato quando vengono visualizzati i dettagli del cliente, subito dopo la lista dei gruppi

clienti a cui appartiene il cliente attuale.

Corrieri

Nome del collegamento Descrizione

actionCarrierUpdate Chiamato durante l’aggiornamento del corriere, subito dopo l’aggiornamento.

Locazione visuale dei Collegamenti principali

Uno degli aspetti principali dell’integrazione del contenuto da PrestaShop nel tuo tema consiste nel sapere

dove verrà visualizzato il tuo contenuto, e quindi dove sono posti i collegamenti e i moduli.

Questa sezione mostra una rappresentazione visuale delle loro locazioni sull’homepage. Ti fornisce:

Il nome del blocco.

L’identificatore del blocco, per dirigerlo correttamente usando CSS.

La cartella del blocco o il suo file modello, dovresti volerlo modificare.

Zone principali di Contenuto