Jump to content

Come integrare nuovo tema?

GreatSeamus

By GreatSeamus
in Sviluppatori PrestaShop

 Share

Recommended Posts

GreatSeamus Newbie

GreatSeamus

Posted
Posted

Questo è il mio primo post, per cui saluti a tutti.

Sto valutando le piattaforme e-commerce PrestaShop e Magento e ho un semplice quesito.

Se creo un tema assolutamente nuovo, come posso poi integrarlo con PrestaShop?

Ho visto,infatti, numerosi Live Shops con design completamente diversi ma perfettamente integrati con PrestaShop.

Qualcuno può indicarmi come procedere?

Grazie

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

Ciao e benvenuto,
l'azione e' semplicissima:
1) prendi un tema che ti piaccia (www.prestathemes.com ad esempio) o quello di default,
2) lo copi in una cartella con il nome preferito
3) ti diverti a modificare le immagini (tema/img) e il css, se vuoi anche tutte le pg tpl
4) copi la cartella sul server in themes
5) nel BO in Preferences, appearances, vedi i temi che hai nella cartella sul server e scegli quello che vuoi
Tieni presente per semplicita' e completezza di cambiare l'immagine di preview del tema.

A disposizione per qualunque chiarimento tecnico e dai miei colleghi per i css :-)

Link to comment
Share on other sites
GreatSeamus Newbie

GreatSeamus

Posted
  • Author
Posted
Ciao e benvenuto,
l'azione e' semplicissima:
)


Grazie per la risposta, ma la mia domanda era un'altra.

Io intendo creare un tema ex novo, personalizzato secondo le mie preferenze estetiche e necessità funzionali, non voglio usare i temi al momento disponibili (in realtà minime variazioni dello stesso layout).

Una volta creato il mio tema (template), come posso implementarlo con PrestaShop?

Mi sembra di capire che ci sia un motore per la creazione del tema, suddiviso per sezioni.

Non essendo un esperto di php, la mia domanda era per sapere come funziona il meccanismo di implementazione di nuovi temi custom.

Grazie
Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

Ciao,
no non c'e' un motore per la creazione del tema,
ma solo una serie di sezioni che tu puoi creare tranquillamente come vuoi.
Di base lui utilizza un Header, un Top, un footer, una colonna Left, una Right e una parte al centro.
Questo e' (sperando che qualcuno mi smentisca) fisso!
All'interno di queste parti ci sono sezioni (tpl o moduli) che tu puoi creare a tuo piacimento, poi dal pannello di backoffice decidere cosa va in quale sezione.

Un esempio: in modules positions, vedi quali sono i moduli che hai, nella cartella modules hai tutti i tpl per crearti la grafica come vuoi.
tutte le pagine che ci sono nel tema sono personalizzabili,
ma non c'é nulla di automatico, devi fartelo a mano.

Ciao

Link to comment
Share on other sites
Nicodemo Newbie

Nicodemo

Posted
Posted

Come spiegato da disarci, copi la cartella che trovi in theme, "prestashop", e la rinomini con ad emepio "nomechetiparedeltema", all'interno di questa cartella troverai altre cartelle e vari file, queste cartelle contengono i vari script quali css, e php, che ti serviranno per modificare il tema, il css sul quale dovrai lavorare è il global.css che è il principale del sito, li troverai 1000 righe per sbizzarrirti nella creazione del tuo tema, colori grafica etc...

Link to comment
Share on other sites
GreatSeamus Newbie

GreatSeamus

Posted
  • Author
Posted
Ciao,
no non c'e' un motore per la creazione del temi


Sicuro?

Ho letto su altri forum, che i template di diverse piattaforme e-commerce php fanno capo a Smarty.

http://www.smarty.net/


E se guardi i tpl Header e Footer, ad esempio, trovi codice di questo tipo:

<base href="{$protocol}{$smarty.server.HTTP_HOST|escape:'htmlall':'UTF-8'}{$base_dir}" />
Link to comment
Share on other sites
Nicodemo Newbie

Nicodemo

Posted
Posted

Si ok ma l'utilizzo dello smarty, serve all'impaginazione delle pagine, se tu vuoi che pippo stia sopra ad header e non sotto dovrai spostare pippo sopra ed eliminarlo sotto sul file.tpl nel quale vuoi effetturare le modifiche, se invece vuoi solo cambiare i colori vai direttamente sul file global.css....
ovvio che se devi stravolgere il tutto allora devi lavorare sia su i vari file TPL che sul globale che sulle immagini, comunque non sò quando ma stiamo lavorando a qualche quida per la modifica sia dei template che di altri parti del programma!!! poi se hai dubbi chiedi pure vedremo di chiarirci un pò meglio

Link to comment
Share on other sites
GreatSeamus Newbie

GreatSeamus

Posted
  • Author
Posted
Si ok ma l'utilizzo dello smarty, serve all'impaginazione delle pagine, se tu vuoi che pippo stia sopra ad header e non sotto dovrai spostare pippo sopra ed eliminarlo sotto sul file.tpl nel quale vuoi effetturare le modifiche, se invece vuoi solo cambiare i colori vai direttamente sul file global.css....
ovvio che se devi stravolgere il tutto allora devi lavorare sia su i vari file TPL che sul globale che sulle immagini, comunque non sò quando ma stiamo lavorando a qualche quida per la modifica sia dei template che di altri parti del programma!!! poi se hai dubbi chiedi pure vedremo di chiarirci un pò meglio



Grazie Nicodemo!

Sì, la mia intenzione è di stravolgere, come dici tu, il tema originale, o meglio di essere libero di creare temi custom a piacere e di integrarli con PS.

Per cui sto cercando di capire quanto la cosa sia fattibile, complicata e lunga da realizzare.

Certo che se fossero disponibili anche altri temi con diversi layout, allora tutto sarebbe più semplice.

Magari qualcosa come il tema Modern di Magento......
Link to comment
Share on other sites
Germanoufo Newbie

Germanoufo

Posted
Posted

Allora per essere chiari si può creare un template a nuovo ma bisogna vedere cosa si vuole avere logico se si vuole una grafica tutta opposta a quello che già offre diventa molto laborioso

un mio consiglio disegnare un tipo di template a mano su carta o qualche bozza con photoshop
poi bisogna iniziare con il cambio delle immagini nella cartella del template esempio il sopra dei box e il sotto dei box poi lo sfondo del box e via dicendo in questo modo prende forma il tutto

logico creare un bel template ci vuole una certa esperienza per modificare la grafica come si vuole a volte porta via anche diversi mesi a un paio di ore al giorno

Ciao ;-)

se serve una mano a solo delle piccole modifiche siamo a disposizione

Link to comment
Share on other sites
GreatSeamus Newbie

GreatSeamus

Posted
  • Author
Posted
Allora per essere chiari si può creare un template a nuovo ma bisogna vedere cosa si vuole avere logico se si vuole una grafica tutta opposta a quello che già offre diventa molto laborioso

un mio consiglio disegnare un tipo di template a mano su carta o qualche bozza con photoshop
poi bisogna iniziare con il cambio delle immagini nella cartella del template esempio il sopra dei box e il sotto dei box poi lo sfondo del box e via dicendo in questo modo prende forma il tutto

logico creare un bel template ci vuole una certa esperienza per modificare la grafica come si vuole a volte porta via anche diversi mesi a un paio di ore al giorno

Ciao ;-)

se serve una mano a solo delle piccole modifiche siamo a disposizione


Grazie per la disponibilità e gentilezza!!

Di solito sono abituato a creare il template in PS CS3, poi a convertirlo in CSS, quindi a procedere ai necessari adattamenti.

E vorrei avere la possibilità di essere libero nella scelta del template (ove non ce ne sia uno che mi possa andare bene).

Penso che prima o poi, PrestaShop dovra rendere disponibili altri temi che non siano semplici varianti di colori o immagini.
Link to comment
Share on other sites
Germanoufo Newbie

Germanoufo

Posted
Posted

Prestashop offre il motore opensource facendosi pagare per le varie personalizzazioni
poi ci sono delle persone che creano dei temi opzionali sempre sulla stessa base GRATIS

vuoi un qualcosa di personale ?

la scelta è crearselo o pagare qualcuno che lo faccia per te

Ciaoo ;-)

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

ciao,
anch'io ho creato il tema per un cliente con photoshop,
anche se poi l'ho convertito in css piu' a mano che automaticamente...

L'unica cosa, sono stato costretto a fare blocchettino per blocchettino e non con un'header, un footer che gestisse anche la colonna, come facevo con i vecchi e-commerce...

ma qui comunque ci sono dei notevoli vantaggi di personalizzazione da BO che perderesti negli altri casi.

Fai i tuoi blocchettini con i css, e vedrai che riesci a partire da zero,
il template ti servira' per i nomi dei blocchettini e per le variabili che si passano (gli smarty) e le variabili di testo per il multilingua.

Link to comment
Share on other sites
  • 3 weeks later...
GreatSeamus Newbie

GreatSeamus

Posted
  • Author
Posted

Cercando di concretizzare le vostre risposte provo a fare 2 domande semplici e precise.

Ad esempio:

1) se come layout voglio passare da colonna sinistra + centrale + destra a due sole colonne, quale file (tpl?) devo modificare?

2) se voglio cambiare l'home page, quale file (tpl?) devo modificare per agire sui vari componenti?

Ho visto che esiste un'estensione di Dreamweaver per modificare i temi Smarty in modalità design, qualcuno ne ha esperienza? funziona?

Grazie

Link to comment
Share on other sites
Germanoufo Newbie

Germanoufo

Posted
Posted

Per quanto riguarda le modifiche alle varie colonne da 3 a 2 lo trovi lato admin modules/positions

e modifichi le posizioni dei vari blocchi

per quanto riguarda la home page
è sempre creata dai vari moduli ad esempio il blocco editorial il blocco prodotti in vetrina

per il resto rimaniamo a disposizione

Ciao

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

Come sempre di dw con il plugin smarty non ne so molto,
invece:

per fare due colonne semplicemente non ne riempi una es left - center con il right vuoto non hai nulla.

Per l'home e' fatta dai vari moduli, ad ogni modulo puoi dire di non farsi vedere in determinate pagine, quindi a te di giocarci.
Editorial e' il modulo peggiore che esista, puoi crearti il center della home sostituendo il tpl di quel modulo.

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

Un esempio:

metti un colore di sfondo nel css

body {
   background-color: pink;



e cambia il colore nel centro (e la dimensione)
in questo modo io ho ottenuto due colonne.

/* global layout */
#page {
   background-color:white;
   border:1px solid purple;
   width: 780px;
   margin: 0 auto 2px auto;
   text-align:left;

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

Ciao,
prima di tutto
un punto sull'etica,
ok, imparare guardando il codice degli altri,
questo e' bene,
tieni presente pero' che il lavoro e' da rispettare!

Allora,
cosa faccio io quando sono curioso:
1) apro la home e guardo il nome (e la posizione) del tema e del css

<link href="/themes/nometema/css/style.css" rel="stylesheet" type="text/css" />


2)da questo capisco anche dove solo posizionati i tpl,
es se voglio vedere come e' fatta la scheda del prodotto:

<link href="/themes/final/product.tpl" rel="stylesheet" type="text/css" />


questo vale per tutti i file tpl, logicamente qui, lo carichi nella pagina e guardi il sorgente.

Tieni presente che in alcuni casi possono aver cambiato il php che richieama il tpl, in quel caso non puoi arrivarci, ma al 99% si lavora su quello e sul css.

Link to comment
Share on other sites
disarci Contributor

disarci

Posted
Posted

No!

php e' un linguaggio lato server,
per cui anche se vedi la scritta index.php il server ti fa vedere solo l'html gia' interpretato senza tutte le istruzioni.

se vedi la scritta html ha attivato gli url facili che servono per il ranking con google,
qui andiamo un po' piu' sul complicato, devi vedere sul tuo come e' l'url con l'id scoperto e richiamare la stessa pagina sul suo sito 'scavalcando' l'url rewriting.

Link to comment
Share on other sites
  • 2 years later...
EV Network Newbie

EV Network

Posted
Posted

Ciao, creare un tema ex-novo di prestashop è qualcosa di abbastanza complesso, bisogna smanettare parecchio su tpl e css, io di solito creo la grafica e poi adatto il css partendo da un installazione di prestashop senza nessun modulo aggiuntivo, in questo modo parti da una pagina completamente bianca. Poi cominci a personalizzare la grafica (css) e ad inserire dove vuoi i moduli che decidi di attivare costumizzandoli di volta in volta.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...