Tabella catalogo prodotti responsive con WebSite X5 12

Prendendo spunto dal template November (in questo post il nostro adattamento), abbiamo provato a ricreare la lista dei prodotti presenti nella sezione Pricing utilizzando l'Oggetto Tabella di WebSite X5.

Per cercare di riprodurre fedelmente l'oggetto, abbiamo dovuto scrivere codice personalizzato per rendere la tabella di WebSite X5 responsive, adattare il codice CSS per ottenere l'effetto hover sulle righe della tabella e applicare all'intera cella un link presente nella stessa.
Qui la demo (versione 12.0.4.20) da cui è possibile scaricare il file .iwzip valido sia per la Evolution che per la Professional:

DEMO

Per identificare l'Oggetto Tabella a cui applicare la formattazione si è fatto uso di un'ancora; tutti i selettori sono stati costruiti prendendo come riferimento l'ancora inserita (nella nostra demo catalogo_1). Un esempio:

div[id^='catalogo_'] + div + div table 

Se nella pagina sono presenti più tabelle a cui applicare lo stesso effetto basta assegnare a ciascun oggetto un'ancora con uguale prefisso e suffisso numerico crescente: catalogo_2, catalogo_3, etc.
Se invece nella pagina è presente un unico Oggetto Tabella possiamo ricorrere ad un selettore più semplice, come illustrato in questo post.

All'hover su una riga le celle hanno un comportamento diverso tra loro: per identificarle in modo corretto abbiamo scelto di utilizzare i selettori :nth-child(), :first-child e :last-child
Un esempio:

div[id^='catalogo_'] + div + div tr:hover td:nth-child(n+3):nth-child(-n+6)

Infine abbiamo utilizzato due righe di codice jQuery per attribuire all'intera cella l'evento onclick associato al link presente in essa, nel nostro caso un link ad un prodotto del carrello e-commerce, carrello che nella demo online non è attivo.
Il codice funzionerà per tutti i tipi di link con evento onclick.

Tutti i blocchi di codice sono commentati per permettere una facile lettura ed eventuale modifica.

Per approfondire l'argomento:

• CSS :first-child pseudo-element - w3schools.com
• CSS3 :last-child Selector - w3schools.com
• Mastering the :nth-child - nthmaster.com