High Teas London

[caruso_g]

Ciao a tutti. Sono finalmente riuscito a pubblicare il sito per il mio cliente inglese, quello per cui ho chiesto una mano e per il quale mi avete gentilmente aiutato, per cui come zii e zie, vi presento il piccolo: High Teas London
Il sito è chiaramente basato sul tema di default di Prestashop. Devo dire di aver trovato non poche difficoltà nella personalizzazione del codice. A partire da del codice css scritto malissimo alla totale mancanza di documentazione sia della struttura che dei singoli moduli, che del codice che dei templates .tpl
A questo proposito, visto che non sono riuscito a trovare nulla al riguardo, avreste delle risorse da indicarmi per cercare di capire come sono stati strutturati i temi di Prestashop? Che ne so, un Wireframe, una guida, o cose del genere?
Aspetto, inoltre, i vostri commenti, suggerimenti o le vostre critiche (siate clementi ).

[disarci]

Ciao,
il tema è bello,
non giudico il lavoro grafico, in quanto non è il mio mestiere, a me piace, anche se dopo più di 9 mesi che lavoro su prestashop sono diventato allergico al tema originale, e ai suoi tasti....

Attento hai un'errore nel modulo visitati (hai perso il percorso)

[Severo64]

Hai ancora qualche problema, nella versione francese nella Home compare ancora Lorem ipsum...
Se sei in un prodotto e cambi lingua da pagina non trovata manca il tld nel percorso.
Il favicon.ico è ancora quello di PS.
Poi una nota da merchant migliora le descrizioni dei prodotti, un conto sono gli appassionati, ma se vuoi accapaati nuovi clienti è fondamentale avere belle descrizioni per ogni categoria e prodotto utili molto anche dal dato SEO/SEM.

Ciao

Sèvero

[paman]

Devo dire di aver trovato non poche difficoltà nella personalizzazione del codice. A partire da del codice css scritto malissimo alla totale mancanza di documentazione sia della struttura che dei singoli moduli, che del codice che dei templates .tpl

Ciao
Carino il sito, rigurdo il codice css, effettivamente non sarà eccezionale, ma addirittura dire che è scritto malissimo - mi sembra una parola grossa -

ciao

[caruso_g]

Ciao,
il tema è bello,
non giudico il lavoro grafico, in quanto non è il mio mestiere, a me piace, anche se dopo più di 9 mesi che lavoro su prestashop sono diventato allergico al tema originale, e ai suoi tasti....
Attento hai un'errore nel modulo visitati (hai perso il percorso)

Ciao disarci,
grazie mille. Per fortuna i tasti si abbinavano allo schema colore del cliente. Inoltre, avendo mantenuto tutto il resto "flat" escono fuori abbastanza bene.
Per quanto riguarda il modulo visitati, come faccio a metterlo a posto?

[Germanoufo]

Per quanto riguarda il tema è sempre basato sull' originale hai solo rimoisso alcune immagini "quelle dei blocchi laterali" sostituite di colore per quanto riguarda il file css non è scritto tanto male ( io per rifare un template per PS ho impiegato circa 1 giorno a tempo perso, per un altro e-commerce 2 settimane classi presenti nel sorgente ma inesistenti nel css e quindi diventava impossibile da gestire la soluzione era quella di rifare completamente la struttura ma ..... alla fine sono passato a PS dopo aver rifatto gran parte del template )

Ti mancano le classi per il CMS che sborda vediamo se riesco e posto una piccola soluzione ma devo finirla vinoalvino aveva postato una piccola infarinatura

non credo che utilizzando strumenti tipo firebug hai molte difficoltà, analizzi la porzione che ti interessa ti rileva la riga di codice interessata apri il file global.css con un editor testuale e lo modifichi -> salvi -> ricarichi la pagina e fdovresti già vedere la tua modifica

Questa è la tecnica che utilizzo io e mi sembra molto rapida e precisa

Il sito mi sembra abbastanza semplice ma ti rende subito l' idea del te %-P

Ciao ;-)

[caruso_g]

Devo dire di aver trovato non poche difficoltà nella personalizzazione del codice. A partire da del codice css scritto malissimo alla totale mancanza di documentazione sia della struttura che dei singoli moduli, che del codice che dei templates .tpl

Ciao
Carino il sito, rigurdo il codice css, effettivamente non sarà eccezionale, ma addirittura dire che è scritto malissimo - mi sembra una parola grossa -
ciao

Mi scuso, è meglio dire che a me non piace come è stato scritto.

[caruso_g]

Hai ancora qualche problema, nella versione francese nella Home compare ancora Lorem ipsum...
Se sei in un prodotto e cambi lingua da pagina non trovata manca il tld nel percorso.
Il favicon.ico è ancora quello di PS.
Poi una nota da merchant migliora le descrizioni dei prodotti, un conto sono gli appassionati, ma se vuoi accapaati nuovi clienti è fondamentale avere belle descrizioni per ogni categoria e prodotto utili molto anche dal dato SEO/SEM.
Ciao
Sèvero

Ciao Sèvero,
favicon cambiata. La versione francese non serviva: disabilitata.
Per quanto riguarda le descrizioni delle categorie e dei singoli prodotti cercherò di spingere per quelle delle categorie almeno. I prodotti sono proprio per amatori, nel senso di appassionati di te di qualità che sanno di cosa si sta parlando, per cui il cliente pensa non sia necessario. Io ho cercato di spiegare che anche il visitatore casuale, se ben istruito, può effettuare un ordine d'impeto. Speriamo.
Grazie mille per i suggerimenti.

[disarci]

Ciao,
Quello che severo cercava di dirti è una questione SEO cioè di ricerca nei motori, non tanto la descrizioni che metti ai clienti quanto tutte quelle chiavi (proprio denominate SEO all'interno di PS) che permettono a google di identificare una pagina, questo è un lavoro che va fatto a mano (normalmente dal cliente) pensando a ciò che gli utenti cercano e visualizzano.
Un esempio:
Se cerchi una pagina in google sotto il titolo (fondamentale), dopo l'url (il più importante) trovi la descrizione, se in PS (come nel tuo caso delle categorie) la (meta) Description è vuota si visualizza la prima scritta che arriva dalla pagina prestashop (la scelta della lingua nella maggior parte dei casi) che non ha nulla a che vedere (ad esempio) con il White Tea.


PS per il modulo visitati basta che ricarichi l'originale

[caruso_g]

Per quanto riguarda il tema è sempre basato sull' originale hai solo rimoisso alcune immagini "quelle dei blocchi laterali" sostituite di colore

Si, ma l'ho dichiarato immediatamente. Non avevo il tempo di crearlo ex novo, inoltre, come ho detto manca un wireframe di riferimento sia dei blocchi che dei template .tpl

Per quanto riguarda il css, come ho detto, a me non piace come è scritto. Ci sono una miriade di dichiarazioni ridondanti, utilizzano i pixel per la tipografia, hack per explorer solo per pigrizia in quanto basterebbe scivere bene il codice o conoscere lo specifico bug e si eviterebbero. Ripeto, a me non piace.

Ti mancano le classi per il CMS che sborda vediamo se riesco e posto una piccola soluzione ma devo finirla vinoalvino aveva postato una piccola infarinatura

Non ho capito cosa intendi.

non credo che utilizzando strumenti tipo firebug hai molte difficoltà, analizzi la porzione che ti interessa ti rileva la riga di codice interessata apri il file global.css con un editor testuale e lo modifichi -> salvi -> ricarichi la pagina e fdovresti già vedere la tua modifica
Questa è la tecnica che utilizzo io e mi sembra molto rapida e precisa
Il sito mi sembra abbastanza semplice ma ti rende subito l' idea del te %-P
Ciao ;-)

Io scarico il global.css con Transmit e utilizzo CssEdit in modalità testuale, imposto l'ovverride del file in modo che ad ogni salvataggio mi sovrascriva il file in remoto, e con l'anteprima per la risoluzione dell'elemento del Dom e relativo link alla linea di codice in abbinamento a FireBug su FireFox per capirne l'ereditarietà. È abbastanza veloce e pratico.

Grazie mille per i commenti.

Un ultima cosa, sapete se esistono i riferimenti di cui parlavo per capire meglio la struttura del tema? (intendo relativamente ai template.tpl, nel senso: "questo bloccho è relativo a quel .tpl" Un wireframe, insomma.)

[caruso_g]

Ciao,
Quello che severo cercava di dirti è una questione SEO cioè di ricerca nei motori, non tanto la descrizioni che metti ai clienti quanto tutte quelle chiavi (proprio denominate SEO all'interno di PS)

Grazie disarci, non avevo capito si riferisse alle description dei meta. Si, ho già istruito il cliente su come fare. Abbiamo deciso di pubblicare comunque per velocità, adesso se le inserirà piano piano.

PS per il modulo visitati basta che ricarichi l'originale

Io non ho toccato nulla ne caricato uno "non originale". Non so proprio che fare… :/

[Germanoufo]

Che sappia io non esiste documentazione

Secondo me è steso in modo ordinato come tutto il sorgente se poi trovi qualche classe che ti sembra duplicata non lo so

Riguardo al CMS mi riferisco se guardi le pagine che hai editato dove inserisci liste vedrai le liste a sovrapporsi alla parte delle categorie, non è stata ancora definita una classe o div che dia le caratteristiche al testo inserito

Io scarico il global.css con Transmit e utilizzo CssEdit in modalità testuale, imposto l’ovverride del file in modo che ad ogni salvataggio mi sovrascriva il file in remoto,

il sistema di scaricamento del css non lo conosco

Ciao ;-)

[caruso_g]

Germanoufo
puoi postarmi uno screenshot? Su Mac, sia con Safari che con Firefox non lo vedo. Immagino succeda su Explorer? Se si, mi dici versione e sistema operativo?
Grazie mille.

[disarci]

Safari 3.1.2 su macos 10.5.5

;-)

[caruso_g]

Safari 3.1.2 su macos 10.5.5
;-)

Buongustaio! (prova la beta 4, splendida!)

Ok, è solo una questione di list-style-position: inside;

O preferito, però, correggere in questo modo:

#center_column ul.terms, #center_column ol.terms {
   margin: 1em;
}

#center_column ul.terms li, #center_column ol.terms li {
   margin: 1em;
}

Così mantengo i numeri fuori e mi sembra più leggibile.

[vinoalvino]

Concordo con caruso sul css è scritto malissimo! Andatevi a vedere i vati temi per Wordpress che eleganza e che finezza! Per ridefinire alcuni blocchi devi scrivere righe di codice nel css che basterebbero a formattare correttamente "I promessi sposi".

Un piccolo consiglio per velocizzare il debug del css:

1) caricare la pagina che si vuole modificare

2) visualizza sorgente

3) salva con nome (radice di prestashop) x.htm

4) editare il css e ricare x.htm nel browser (es: http://localhost/prestashop/x.htm)

Soprattutto quando ci si trova nella lentezza del localhost questo metodo consente di verificare in modo decisamente più rapido quanto presente nel css.

[caruso_g]

Per ridefinire alcuni blocchi devi scrivere righe di codice nel css che basterebbero a formattare correttamente "I promessi sposi".

Degno del suo nome, Vinoalvino, ha reso perfettamente l'idea.

[Germanoufo]

Uso Mac e firefox 3

Domanda ho analizzato il tuo global.css ha 3361 righe quello priginale ha solo 2321

Come mai hai quasi mille righe in più ? a me con alcuni miei temi è capitato di aggiungere 100 righe ma nulla di più 1000 mi sembrano un po tante , per poi dire che manca documentazione

Ciao ;-)

[caruso_g]

Germanoufo,
a me non piace fare polemiche, soprattutto su queste stupidaggini.
Un buon css non è dato dal numero di righe, ma da come si scrive il codice html e relative dichiarazioni css.
Il motivo per cui il mio css ha mille righe in più è dovuto al fatto che io mantengo il codice ordinato.
Io non scrivo:

selettore1 {dichiarazione:valori;}
selettore2 {dichiarazione:valori;}

io scrivo

selettore1 {
   dichiarazione:valori;
}

selettore2 {
   dichiarazione:valori;
}

Come vedi sono 7 mie righe contro 2 loro (senza contare le righe di commento che aggiungo per "raggruppare" le dichiarazioni, sia in apertura che in chiusura). Secondo te chi le ha scritte meglio?

Il tempo dicaricamento, qualora volessi sollevare l'eccezione, è quasi del tutto indifferente. In ordine, si dovrebbe tener conto prima delle immagini, poi del codice di scripting in cui la pagina dinamica è scritta, poi del javascript, e infine dei css.

Ti dirò di più. Ho eliminato molte delle dichiarazioni del tema originale. A cominciare dalle immagini di sfondo, fino a dichiarazioni ridondanti e solo se mi capitavano sotto mano. Non ho il tempo di correggere tutto il css.

Come ho detto all'inizio, ti prego di non considerare il tono del post come polemico ma so quello che scrivo.

[Germanoufo]

Era solo per capire anche a me piace di più come lo scrivi tu risulta molto più pulito

volevo solo capire il perchè il to aveva tutte quelle righe in più

So che nel css originale faccio un esempio i box laterali hanno sia un colore di sfondo e sia un immagine non so l' utilità alla fine sono cose che potrebbero portare a conflitti ( penso tu intenda questo come ridondante )

Ciao ;-)

[caruso_g]

La dichiarazione di un colore di sfondo che simuli l'immagine di background è una ottima abitudine, che non solo permette di "leggere" la pagina mentre si caricano le immagini in quanto il testo sarà in contrasto con l'immagine ancora non caricata e quindi con il colore di sfondo immediatamente visibile, ma consente anche l'accessibilità a chi tiene le immagini disattivate.

Io per ridondanza intendo una dichiarazione ripetuta. Nel senso che i css vengono applicati in "cascata" (cascading style sheet) dal selettore parente al selettore figlio.

Per intenderci, gli errori più comuni sono:

selettore_padre {
   dichiarazione_x:valore1;
}

selettore_padre selettore_figlio {
   dichiarazione_x:valore1;
}

/*o anche, errore molto più comune nel loro css*/

selettore_y { /*questo selettore si trova all'interno del selettore_padre per cui ne eredita alcune dichiarazioni*/
   dichiarazione_x:valore1;
}

Questo tipo di spaghetti-code non solo crea difficoltà di debugging ma anche di interpretazione, devi andare a correggere all'indietro un miliardo di dichiarazioni che non servono a niente, moltiplica per dieci nel debugging di IE6.

[Germanoufo]

Adesso ti ho capito

io ho avuto a che fare con zencart una vera matriosca in un div ci sono minimo 5 classi poi nel css magari non vengono neppure richiamate

Speriamo si riesca a migliorare un po con il tempo

Ciao ;-)

[paman]

documentazione sia della struttura che dei singoli moduli, che del codice che dei templates .tpl
A questo proposito, visto che non sono riuscito a trovare nulla al riguardo, avreste delle risorse da indicarmi per cercare di capire come sono stati strutturati i temi di Prestashop? Che ne so, un Wireframe, una guida, o cose del genere?

So che non è propio quello che cercavi, e forse lo conosci già.

Qualora non lo conosci spero possa esserti utile

http://shagshag.net/prestadoc/elementindex.html
http://daveegerton.com/CMS/Prestashop-Designers-Guide/Themes/modifying-the-default-prestashop-theme.html

Ciao

[caruso_g]

Grazie mille paman,
non conoscevo assolutamente le due risorse. Sono davvero utilissime, soprattutto il tutorial del tema. Non ho mai messo mani in Smarty, ma non mi sembra difficilissimo. Comunque il tutorial rende la struttura comprensibilissima.
Grazie infinite.

[paman]

Sono felice che ti sono utili.

A presto rileggerci.

Ciao :-)

[vinoalvino]

Paman sei un mito! Ti meriti due stellette per questo post! Mettine uno dedicato in programmazione e temi. :-)

[paman]

Grazie per il consiglio Vinoalvino

apro subito un nuovo post

Ciao

[Severo64]

So che nel css originale faccio un esempio i box laterali hanno sia un colore di sfondo e sia un immagine non so l' utilità alla fine sono cose che potrebbero portare a conflitti ( penso tu intenda questo come ridondante )

Oltre a quello già detto da Caruso, aggiungo che spesso si usa un immagine di 1x1 pixel nello stessa tipologia dell'immagine + grande (jpg per jpg) perché non è facile ottenere lo stesso colore a seconda dei sistemi per cui con una micro immagine ottieni quello che vuoi ad un costo, nel senso di banda, praticamente nullo.

Ciao

Sèvero

[Severo64]

Per quanto riguarda le descrizioni delle categorie e dei singoli prodotti cercherò di spingere per quelle delle categorie almeno. I prodotti sono proprio per amatori, nel senso di appassionati di te di qualità che sanno di cosa si sta parlando, per cui il cliente pensa non sia necessario. Io ho cercato di spiegare che anche il visitatore casuale, se ben istruito, può effettuare un ordine d'impeto. Speriamo.
Grazie mille per i suggerimenti.

Che fosse per amatori l'avevo capito, ma commercialmente parlando perché tagliarsi fuori tutti quelli che stanno diventando amatori o comunque anche chi beve il te occasionalmente?

Insomma chi apre un ECommerce lo fa per ampliare la propria attività perché precludersi anche in non addetti al settore?

Ciao

Sèvero

[Germanoufo]

Oltre a quello già detto da Caruso, aggiungo che spesso si usa un immagine di 1×1 pixel nello stessa tipologia dell’immagine + grande (jpg per jpg) perché non è facile ottenere lo stesso colore a seconda dei sistemi per cui con una micro immagine ottieni quello che vuoi ad un costo, nel senso di banda, praticamente nullo.

Be questo trucchetto dell' immagine lo conosco già, forse non hai interpretato bene il discorso si stava parlando di metodo di stesura sul css poi il discorso immagini è uscito dopo

Grazie per la dritta servirà ad altri magari

Ciao ;-)