Jump to content

Sviluppo in prestashop: la cassetta degli attrezzi

vinoalvino

By vinoalvino
in Sviluppatori PrestaShop

 Share

Recommended Posts

vinoalvino Newbie

vinoalvino

Posted
Posted

Vedo con piacere che ci sono un sacco di nuovi utenti nel forum. Per loro voglio raggruppare una serie di suggerimenti fatti in vari post tanto per averli tutti sottomano.

1) MOZILLA + FIREBUG
Non potete farne a meno se volete mettere mani nel css (tuothema/css/global.css); firebug è un addon che consente di analizzare i singoli elementi delle pagine, vedere le definizioni del foglio di stile associate e, incredibile a dirsi, fare delle prove direttamente sul browser vedendo come si trasforma la pagina modificando le singole voci.
vedi: 1

2) EDITOR DI TESTO
Deve poter salvare in utf-8 pena incasinare tutto (esperienza personale). Meglio se ha dispone di una ricerca testuale sui file e della funzione di confronto. Personalmente uso da anni Textpad
vedi: 1 2 3

3) AIUTI PER LO SVILUPPO DEI MODULI
Non c'è molto se non l'esperienza degli utenti del forum, comunque vedi:
1 2 in inglese

Vi prego di aggiungere altri suggerimenti.

Link to comment
Share on other sites
paman Newbie

paman

Posted
Posted

Voglio segnalare un altro programma che reputo molto utile si tratta di Depeche View, ed è un programma in grado di caricare tutti i file Html, Php, js, css, txt e file di log ecc.., appartenenti ad una stessa directory in un unica interfaccia per una rapida e veloce ricerca di informazioni.

In pratica con Depeche View è possibile ricercare una determinata stringa o un determinato termine all’interno di centinaia di file, basta che questi appartengano alla stessa directory.
Il software non necessita di installazione e questa caratteristica lo rende davvero molto versatile.

lo trovate qui

Link to comment
Share on other sites
overclokk Newbie

overclokk

Posted
Posted

Aggiungo anch'io un' utilità per lo sviluppo di PS che non può mancare nella nostra cassetta degli attrezzi:

Xampp un' ottima piattaforma per trasformare il pc in un web server e fare tutte le nostre prove su PS prima di metterle online.

Disponibile per vari SO tra cui Windows e Gnu/Linux, esiste in versione eseguibile (si può mettere su una penna usb) ed in versione installabile

Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Testare il codice Prestashop

Altro suggerimento utile quando si devono testare delle funzionalità da aggiungere ad un modulo; conviene testarle in un file esterno, sia per la velocità, sia perchè così si riescono a vedere gli errori php. Personalmente ho un file sempre pronto per questo uso nella radice di prestashop dall'inequivocabile nome test.php. La sua struttura è alquanto semplice, 3 righe:

<?php
include(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/init.php');
/* variabili globali se servono */
global $smarty, $link, $cookie, $cart;

/* codice da testare */

?>



Un esempio pratico:

<?php
include(dirname(__FILE__).'/config/config.inc.php');
include(dirname(__FILE__).'/init.php');
global $smarty, $link, $cookie, $cart;
$product = new Product(intval(Tools::getValue('id_product')), false, intval($cookie->id_lang));
print_r($product);
?>



chiamando test.php?id_product=21 stampa il contenuto della struttura del prodotto.

Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

/* COMMENTATE LE MODIFICHE */

L'ho scritto in cento post ma lo ripeto.

Nei file PHP scrivete qualcosa tipo /* XX_MODIFICA001 */ con 001 progressivo.

Nei file TPL <!-- XX_MODIFICA001 -->

Nei file CSS conviene appendere in fondo le modifiche COMMENTATE o meglio seguire questa tecnica

Fate un file di testo in cui spiegate le modifiche tipo:

MODIFICA001: aggiunto campo xxx e yyy


Quando dovrete trovare tutti i file modificati basterà fare una ricerca testuale di XX_MODIFICA su tutti i file.

Allinizio sembra palloso, ma quando dovrete aggiornare la versione sarà una passeggiata.

Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

File di log

Altra cosa fondamentale per verificare gli errori php o mysql - sdel resto anche l'unica in quanto gli errori vengono segnalati con una pagina bianca - è la possibilità di consultare i file di log.

In wampserver questi si trovano in c:/Programmi/wamp/logs e sono:

* access.log
* apache_error.log
* mysql.log
* php_error.log

Personalmente nel mio editor multifinestra (textpad) tengo sempre aperto php_error.log e mysql.log; quando si verifica un errore attivo la finestra e l'editor (se c'è stato un errore) mi chiede: "il file è stato modificato vuoi ricaricarlo?". Nelle ultime righe c'è l'indicazione dell'errore, del file che lo ha generato, della riga di codice dove è avvenuto.

Sarebbe carino se postasse, per ogni server, dove si trovano i relativi file di log.

P.S.: ho scoperto che per fare un

  • sul forum basta mettere un asterisco in prima colonna (vedi elenco file) :)
Link to comment
Share on other sites
  • 5 weeks later...
Germanoufo Newbie

Germanoufo

Posted
Posted
Si, è un editor visuale (e non solo), lo segnalo per chi non ha dimestichezza con il codice puro, può considerarsi l’alternativa free a Dreamweaver :grin:


Il fatto è che in questa cassetta ci servono editor testuali tool per semplificarci alcune azioni ma di un editor visuale che ce ne facciamo ? :bug:

se dobbiamo editare del php o mettere le mani su del puro html di sicuro con qesto facciamo solo danni

Ciao ;-)
Link to comment
Share on other sites
Germanoufo Newbie

Germanoufo

Posted
Posted

è utile se devi farti qualche paginetta ma per lacorare sui sorgenti di prestashop no almeno questo lo dico per esperienza visto che uso un editor testuale ( smultron per MAC ) altrimenti non risolverei nulla

come dici sarà per la prossima

Ciao ;-)

Link to comment
Share on other sites
  • 9 months later...
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Dopo una serie di drammatici cambi di versione ho finalmente trovato un sistema definitivo per ridurre a zero l'intervento sul foglio di stile principale (global.css) e voglio condividere questo semplice trucchetto che, credo, vi farà risparmiare molto lavoro:

1) editate il file cartella_dove_avete_installato_prestashop_magari_con_un_nome_piu_corto/header.php
2) intorno alla riga 8 SOTTO a:

/* CSS */
$css_files[_THEME_CSS_DIR_.'global.css'] = 'all';



aggiungete la riga

$css_files[_THEME_CSS_DIR_.'my.css'] = 'all'; /* VV011 riga aggiunta per gestire variazioni di stile in my.css 22/03/10 */



(è importante che il nuovo css SEGUA quello vecchio)

3) create, nella stessa cartella dove si trova il global.css, il nuovo foglio di stile my.css
4) modificate lo stile di quello che vi pare, es:

body {background:#000000; font-size: 12px;}



Le vostre modifiche saranno tutte belle raggruppate in un css separato e non dovrete più toccare il css del tema. Sai che pacchia cambiare tema e portarsi dietro solo il my.css ?!?

NOTA: nel caso non vi prendesse qualche modifica provate ad aggiungere !important es:

#footernewsletter input{background:#f4f8f9!important;} /* questo sovrascrive ogni precedente/successiva impostazione */



Nel caso non funzionasse fate attenzione se si tratta di un css di qualche modulo installato, a volte fanno la porcata di includere il css nel bel mezzo dell'html ....

Anche se ridondante tengo a precisare due cose
1) modificate SOLO le cose che non vi piacciono non riscrivete tutto!
2) commentate anche l'evidente ... l'evidente al tramonto all'alba è già meno comprensibile!

Allego un pezzo del mio my.css utilizzato per visualizzare due sole colonne 

/* ===== RIDIMENSIONO PAGINA E COLONNE ====== */
#page {    width: 980px;}                              /* era 820 */
#right_column {display:none;}
#center_column {width: 745px; padding-right: 15px;} /* era 580 */
#center_column .products_block ul {width:745px;}    /* era 580 */
h2 {width:735px;}                                   /* era 570 */
.breadcrumb {width:735px;}                          /* era 570 */
/* ================ END ===================== */

Link to comment
Share on other sites
paman Newbie

paman

Posted
Posted
vi farà risparmiare molto lavoro:


MI TI CO - Non ho parole ( infatti le sto scrivendo) ;-)

Grazie per la perla, eccezionale, visto che prima hai chiesto di toglierti una stella qui te ne dovrebbero dare minimo DUE.

Ciao
Link to comment
Share on other sites
Germanoufo Newbie

Germanoufo

Posted
Posted

Semplicemente che inserendo la sua stringa si può inserire le classi in un file esterno al global

sovrascrivendo il file originale supponiamo volessi il #page bianco e il body nero semplicemente inserendo la modifica puoi sovrascrivere l' originale
spero di averti delucidato

Ciao ;-)

Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Personalmente vi dico che, dopo aver cambiato thema/versione un numero esagerato di volte, questa soluzione mi consente, semplicemente portandomi dietro il my.css, di aggiornare o provare un thema nuovo, mantenendo tutte le mie modifiche. Non mi pare poco ...

Link to comment
Share on other sites
Pr3z1oso Newbie

Pr3z1oso

Posted
Posted
Personalmente vi dico che, dopo aver cambiato thema/versione un numero esagerato di volte, questa soluzione mi consente, semplicemente portandomi dietro il my.css, di aggiornare o provare un thema nuovo, mantenendo tutte le mie modifiche. Non mi pare poco ...

mi mostri un sito dove hai applicato questo css x favore ?
Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Vuoi mettere la chiave inglese nella piaga? Non sono ancora riuscito ad andare online :( Comunque non vedresti nulla se non queste due righe nei sorgenti: 

       <link href="/psita/themes/my/css/global.css" rel="stylesheet" type="text/css" media="all" />
       <link href="/psita/themes/my/css/my.css" rel="stylesheet" type="text/css" media="all" />



... a proposito ... nessuno ha mai pensato di realizzare un css con media="print" per stampare solo la colonna centrale?

Link to comment
Share on other sites
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Per chi lavora in locale vorrei caldamente consigliare il browser Safari mi risulta circa 5 volte più veloce ed ho scoperto oggi che ha dei simulatori di browser incorporati. Leggermente meno potente l'analizzatore di elementi rispetto al grandioso firebug.

Link to comment
Share on other sites
overclokk Newbie

overclokk

Posted
Posted

Se stiamo sviluppando il sito per una detterminata risoluzione e vogliamo vedere come sarà il risultato ecco un piccolo trucchetto per il Browser, digitiamo nella barra degli indirizzi il seguente codice e poi diamo invio: 

j_avascript:resizeTo(1024,768);


Se il nostro sito non è 1024x768 ma è piò stretto o piò largo basta sostituire i valori tra parentesi.

Link to comment
Share on other sites
ciroco05 Newbie

ciroco05

Posted
Posted

Ciao,

per la comparazione dei file e cartella, oltre all'ottimo diffmerge, segnalo winmerge gira sotto win ed è notevolmente più veloce del precedente (particolarmente utile se dovete confrontare cartelle con numerosi file)

Su questo blog trovate una breve comparazione tra i due programmi.

Ciroco05

Link to comment
Share on other sites
Lika Newbie

Lika

Posted
Posted

Visto che siete stati tutti bravi a fornire programmi utili allora vi dico anche il mio programma che utilizzo per modificare il file CSS in un attimo.

Uguale se lavorate in locale o in remoto. esempio se modificate il vostro file CSS in locale lo salva in automatico in quanto tiene tracia da dove e stato chiamato il file, invece se lavorate direttamente in remoto, il programma ha incorporato un ftp per salvare il lavoro cioè il CSS le modifiche sono Visuali in senso che vedi subito quello che stai facendo ed e facile anche ad usarlo funziona come se stiamo lavorando con un programma visuale per creare siti web, l'unica cosa e che e a pagamento secondo me non costa tanto e per che fa template da vendere allora questo e il programma giusto.

Dimenticavo ce anche la versione Per MAC

Link al sito http://www.skybound.ca

Prego :-)

Link to comment
Share on other sites
  • 1 month later...
vinoalvino Newbie

vinoalvino

Posted
  • Author
Posted

Non so se utilizzate il plugin "web developer" per mozilla firefox (http://chrispederick.com/work/web-developer/) se non lo usate - vedi me fino a qualche giorno fa - siete PAZZI! Fa delle cose miracolose come validare il css in locale, mostrare evidenziate elementi del dom della pagina, mostrare un righello che consente di calcolare le dimensioni degli oggetti, e un mare di cose ancora. Allego qualche immagine di quello che fa ...

24465_ADQ1g3hwtVbl4viPH878_t

24466_TI4sgqHbbTejUQFaofnB_t

24467_rUYSzQcK9ZKZfx1TiYRa_t

24468_yLk2NqNWRUJbwNM0gUJA_t

24469_d0HhtX3uBzZQfz8QCKiv_t

Link to comment
Share on other sites
overclokk Newbie

overclokk

Posted
Posted

Avevo letto una recensione su questo plugin, ora lo voglio provare anch'io.

Mi hai convinto Vino :)

Non ricordo se sono già stati detti ma vorrei aggiungere anche:

Colorzilla - per vedere il colore di un determinato punto della pagina web

Pagespeed - serve per vedere la velocita di caricamento di una pagina (viene installato in firebug)

Ciao

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

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...