Nei capitoli precedenti di questa guida abbiamo visto come poter implementare in Passweb una Griglia responsiva mediante un sistema di Componenti Contenitore annidati ai quali assegnare le classi richieste dal framework uikit.

Questo modo di operare non è però sufficiente per poterci consentire di realizzare, in Passweb, un sito Ecommerce perfettamente responsivo.

Tra i componenti Ecommerce di Passweb possiamo infatti trovarne alcuni che a livello strutturale si presterebbero molto bene per poter essere utilizzati come una Griglia responsiva.

Analizzando ad esempio il markup HTML del Componente “Catalogo Ecommerce” possiamo notare una struttura analoga a quella cui sappiamo di dover far riferimento per poter realizzare, secondo i dettami di uikit, una griglia responsiva

Le celle dei singoli articoli, in particolare, sono tutte racchiuse all’interno di un contenitore più esterno, nello specifico quello che, nello style editor di Passweb, è identificato come “Catalogo – Riquadro celle” (in figura la div con classe ecCatalogComp-cells).

Ogni cella all’interno di questo contenitore è poi identificata da una singola div (in figura quelle con classi ecCatalogComp-cell) all’interno della quale sono inseriti i componenti interni al Catalogo Ecommerce (Immagine Articolo, Prezzo, Descrizione ecc…) che ne definiscono i contenuti veri e propri.

Sulla base di questa semplice analisi viene quindi automatico pensare al “Riquadro Celle” come al Contenitore della Griglia e alle singole Celle come ai blocchi di contenuto, ossia alle colonne, interne alla griglia stessa.

In teoria sarebbe quindi sufficiente assegnare al Riquadro Celle, ad esempio, le classi .uk-grid, .uk-grid-width-large-1-4 e .uk-grid-width-medium-1-2 per far si che:

• per viewport large (maggiori o uguali a 960px) le celle del catalogo assumano tutte la stessa larghezza disponendosi 4 per riga
• per viewport medium (maggiori o uguali a 768px) le celle del catalogo assumano tutte la stessa larghezza disponendosi 2 per riga
• per viewport inferiori a 768px il Riquadro Celle si linearizzarsi e le singole celle si dispongano in un'unica colonna una sotto l’altra.

Il problema nel tentare di fare una cosa di questo tipo è rappresentato dal fatto che il markup del Componente “Catalogo Ecommerce” è generato in automatico dal programma e l’utente non ha la possibilità di definire delle classi aggiuntive per l’elemento “Riquadro Celle” ne tanto meno per le singole Celle.

Eventuali classi aggiuntive possono essere aggiunte, mediante la maschera di configurazione del componente solo all’elemento più esterno, ossia quello che racchiude, oltre al Riquadro celle anche tutti gli altri elementi del componente come la paginazione, i campi di ordinamento ecc…

In considerazione di ciò se vogliamo rendere responsivo il Catalogo Ecommerce di Passweb dobbiamo per forza di cose intervenire manualmente, integrando la libreria uikit.css e scrivendo le media query necessarie per assegnare a questo componente un comportamento responsivo.

Tutto questo può però essere fatto in maniera piuttosto semplice replicando esattamente la stessa logica di gestione adottata da uikit.

Di base si tratta infatti di andare a prendere le media query utilizzate da uikit per gestire una griglia responsiva con colonne tutte della stessa larghezza assegnando apposite classi al solo contenitore esterno della griglia, e riadattarle al nostro caso specifico.

Le media query in questione sono esattamente quelle presenti nella sotto-sezione “Even grid cell widths” della sezione “Component: Grid” presente all’interno del file uikit.css

In questo senso, ad esempio, la regola di uikit

.uk-grid-width-1-2 > * {

width: 50%;

}

riadatta alle nostre esigenze potrebbe diventare

.pw-grid-width-1-2 div[class*="cell_"]{

width: 50%;

}

dove il selettore il selettore di attributo [class*='cell_'] ci consente di applicare la regola a tutte le celle del Catalogo.

In definitiva per poter assegnare al Catalogo Ecommerce un Comportamento responsivo è necessario:

• Integrare il file uikit.css con il contenuto del file gridCatalogo.css scaricabile nella sezione Risorse di questa guida
• Assegnare al Componente Catalogo Ecommerce le seguenti classi:
• uikit: necessaria per gestire il “float: none”
• pw-grid: necessaria per poter applicare al componente le regole definite nel file gridCatalogo.css
• una o più classi tra quelle presenti nella tabella di seguito riportata

CLASSE	DESCRIZIONE
.pw-grid-width-*	Le proprietà di questa classe verranno applicate per una qualsiasi larghezza del viewport. Le colonne della griglia avranno tutte la stessa larghezza e si posizioneranno una a fianco all’altra
.pw-grid-width-small-*	Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 480px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 480px si disporranno una sopra l’altra
.pw-grid-width-medium-*	Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 768px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 768px si disporranno una sopra l’altra
.pw-grid-width-large-*	Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 960px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 960px si disporranno una sopra l’altra
.pw-grid-width-xlarge-*	Le proprietà di questa classe verranno applicate per larghezze del viewport maggiori o uguali a 1220px Le colonne manterranno tutte la stessa larghezza e per viewport inferiori ai 1220px si disporranno una sopra l’altra

ATTENZIONE! il carattere * dovrà essere sostituito dal solito sistema di due numeri. In questo caso però il primo numero dovrà essere sempre 1 mentre il secondo variando tra 1, 2, 3, 4, 5, 6 e 10 indicherà esattamente il numero di celle per riga

Supponendo quindi di assegnare al Catalogo Ecommerce le classi aggiuntive pw-grid-width, pw-grid-width-xlarge-1-4, pw-grid-width-large-1-3, pw-grid-width-medium-1-2 (come avviene nel modello di riferimento)



otterremo un Catalogo in cui:

• per viewport maggiori o uguali a 1220px le celle articolo assumeranno tutte la stessa larghezza disponendosi 4 per riga
• per viewport compresi tra 960px e1219px le celle articolo assumeranno tutte la stessa larghezza disponendosi 3 per riga
• per viewport compresi tra 768px e959px le celle articolo assumeranno tutte la stessa larghezza disponendosi 2 per riga
• per viewport inferiori a 768px il Catalogo si linearizzerà e gli elementi in esso contenuti, tra cui le singole celle, si disporranno in un'unica colonna uno sotto l’altro

Per poter gestire al meglio un Catalogo Ecommerce responsivo è consigliabile inoltre:

• Azzerare eventuali margini e/o padding laterali (destro e sinistro) assegnati a default da Passweb al Riquadro Celle e alla singole Celle de Catalogo
• Azzerare i bordi assegnati a default da Passweb alla singole Celle de Catalogo
• Racchiudere tutti i Componenti interni alla Cella (Immagine Articolo, Prezzo, Titolo ecc…) in un unico Componente Contenitore e assegnare ad esso eventuali margini e/o padding per spaziare sia verticalmente che orizzontalmente le celle del catalogo.

Infine, un’ultima osservazione molto importante da fare, è quella secondo cui il markup di Componenti Ecommerce quali, Offerte / Novità, Popolarità Prodotto, Abbinati Ecommerce, Risultati Ricerca ecc… è del tutto analogo a quello utilizzato per il Catalogo Ecommerce

In conseguenza di ciò è possibile assegnare a questi componenti un comportamento responsivo operando esattamente allo stesso modo di quanto appena visto per il Catalogo Ecommerce.