14 dicembre 2015

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 tabella catalogo prodotti website x5 12
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:



5 commenti:

  1. Ragazzi siete strepitosi....complimenti davvero!!!

    RispondiElimina
    Risposte
    1. Ciao Mirko,
      ti ringraziamo per questo tuo commento ma non esagerare... sono solo poche righe di codice messe al posto giusto :)

      Elimina
  2. parlo anche di tutto il resto che state facendo...non solo di questa pagina...

    RispondiElimina
    Risposte
    1. Ah OK, allora sono solo tante righe di codice messe al posto giusto :)

      Elimina
  3. Ciao, io l'ho inserito nello stesso script per le tabelle canoniche e quelle del Db Viewer: http://quellidelcucuzzolo.blogspot.it/2015/12/tabella-responsive-website-x5-12.html?showComment=1455489001973#c7680919684507873391
    Ciao magico tandem e Mirko ;)

    RispondiElimina