Sviluppo tema custom da zero

[maldor]

Ciao

stiamo iniziando a sviluppare un tema custom per Prestashop 1.7, realizzato da zero (quindi non modificando un tema acquistato o preesistente).

Abbiamo visto che esiste lo Starter Theme, segnalato anche sulla documentazione ma è stato miseramente abbandonato e non più mantenuto (come visibile dal repo Github).

Altra soluzione individuata è il tema Classic Rocket, praticamente un fork del Classic ma aggiornato con l'ultimo Bootstrap e altre robettine. Di vantaggio ha anche una miglior configurazione Webpack che resta comunque abbastanza precaria (per dire non c'è BrowserSync).

Quali sono le vostre esperienze in merit? Usate starter theme o no? Se sì quale? Pro/contro.

Ritengo fondamentale avere un build tool webpack che gestisca almeno SCSS e JS ES6.

Qualsiasi consiglio è benvenuto.

Grazie

 

Bonus: vorremmo inoltre implementare il tema come Single Page Application, non con tecnologie come Vue/React ma semplicemente con PJAX, quindi il problema è: Prestashop di default carica file JS diversi per ciascun template pagina (es. home, prodotto, carrello, checkout, ..)

Edited April 23, 2020 by maldor (see edit history)

[marsaldev]

Ciao @maldor,

lo starter theme come già detto da te è stato abbandonato.

Partire dal classic rocket vi permette di avere componenti più aggiornate e sicuramente è un'ottima base per partire.

L'obiettivo del "single page application" è temerario, e allo stato attuale potrebbe essere davvero una bella sfida 😊

2/3 anni l'ho fatto con la 1.6, ma tralasciando la parte di checkout, che era davvero "rognosa" implementarla e il cambio lingua (forse anche qualche altra pagina). E potrebbe sembrarti assurdo, ma senza fare nessun override di front-controllers ma credo solo di un paio di classi, e nemmeno troppo invasivi.. tutto con un modulo 😊

Qui per vedere il funzionamento: https://www.trenta3giri.com/it/

 

Credo sia fattibile anche adesso con la 1.7, i front controllers e le classi sono rimaste bene o male le stesse. Per il discorso dei file js per ciascun template in parte è così quando non è attiva la CCC, adesso viene creato un solo file (theme-xxxxx.js) dove è incluso tutto in tutte le pagine (se i file vengono registrati nel modo corretto con i moduli), quindi in un certo modo è più semplice se ci si basa su questo.

 

Riflessione... Credo che senza moduli la "single page application" non credo sia raggiungibile 🤔

 

PS: Ovviamente non utilizzando altri framework se non jQuery

[maldor]

Ciao @marsaldev

grazie per la risposta.

Riguardo alla SPA, con che tecnologia l'hai sviluppata su trenta3giri? Mi sembra funzionare bene e anche io pensavo di adottarla per tutte le pagine tranne carrello e checkout che immaginavo fossero le più complesse.

Noi sicuramente non useremo tecnologie complesse come Vue o React ma utilizzeremmo una semplice libreria JS basata su PJAX che automaticamente parsa i link nelle pagine, al click recupera il solo contenuto variabile della nuova pagina e lo inietta in un container. Per questo il mio interesse nel capire se il JS è uguale su tutte le pagine, requisito fondamentale.

 

Sul demo di Classic Rocket online vedo che effettivamente in tutte le pagine c'è praticamente solo questo JS:

https://demoprestashop.prestarocket.com/themes/classic-rocket/assets/cache/bottom-e2e02b24.js

Si direbbe quindi che è la concatenazione di tutti i singoli JS ma potrebbe essere che sia diverso per ciascuna pagina, ogni pagina concatena solo i singoli JS che gli servono. ti risulta?

Infatti nel Classic rocket che abbiamo installato in locale invece ogni pagina include i singoli JS che cambiano da pagina a pagina:

 

[marsaldev]

52 minutes ago, maldor said:

Riguardo alla SPA, con che tecnologia l'hai sviluppata su trenta3giri? Mi sembra funzionare bene e anche io pensavo di adottarla per tutte le pagine tranne carrello e checkout che immaginavo fossero le più complesse.

E' un modulo che gestisce le chiamate in AJAX, nessuna tecnologia al di fuori di quella fornita dal tema di base di PS, utilizzando semplicemente jQuery.

 

52 minutes ago, maldor said:

Noi sicuramente non useremo tecnologie complesse come Vue o React

Forse non sono stato chiaro, non credo ci sia la possibilità di utilizzarle allo stato attuale 😄, o di utilizzarle al meglio. Tutti i temi condividono un file "core.js", all'interno di questo è compresa anche la libreria jQuery.

 

52 minutes ago, maldor said:

Si direbbe quindi che è la concatenazione di tutti i singoli JS ma potrebbe essere che sia diverso per ciascuna pagina, ogni pagina concatena solo i singoli JS che gli servono. ti risulta?

Come dicevo, se attivata la compressione, il file fornito è univoco per tutte le pagine, non riesco a verificare al volo ma potrebbe cambiare l'hash se qualche modulo carica qualche file, ma sono abbastanza certo che con il nuovo sistema di registrazione di assets ne generi uno solo per tutti, altrimenti vengono caricati singolarmente (con CCC disattivata), proprio come hai notato tu 😊