Impaginazione della lista degli articoli

 Obiettivo

-In entrambi i componenti Carrello acquisti e Catalogo , la soluzione offre due modalità di presentazione dei vostri articoli.
  • Una modalità Dettaglio o Scheda Articolo , che permette di offrire una descrizione completa dell'articolo. Questa pagina permette di visualizzare le immagini aggiuntive o le opzioni dell'articolo.
  • Una modalità Lista , che presenta generalmente una descrizione sommaria dei prodotti, ma offre una rapida visione d'insieme di tutti gli articoli che proponete all'interno di una categoria .
I menu [ e-Commerce \ Carrello Acquisti (e-Shop) ] e [ e-Commerce \ Catalogo (Vetrina) ] permettono di accedere alla modifica della modalità "Lista”, cliccando sulla scheda " Elementi Impaginazione ”.

Clicca sull'immagine per ingrandire

Potete disporre di due diverese impaginazioni per ognuno dei due componenti.

 
 Principi generali per l'editor di modifica

L'editor è diviso in 3 sezioni distinte :

Clicca sull'immagine per ingrandire
  • Le proprietà generali
    Nella colonna di sinistra definirete la struttura generale della visualizzazione : numero di colonne, di linee, comportamento delle immagini, ecc.

  • Una zona di anteprima
    Questa zona permette di avere una prima ideaa di quella che sarà la presentazione del catalogo. Questa zona tuttavia, utilizza dei modelli di fac-simile per gli articoli. Sarà quindi necessario salvare per poter avere un'idea più precisa e realistica del risultato sul sito.

  • Un blocco di modifica
    Il primo blocco della zona di anteprima è dinamico . È possibile sistemarvi gli elementi che concorrono alla presentazione dei vostri prodotti. Il modello creato in questo primo blocco sarà automaticamente ripetuto sul resto della zona di anteprima.
 
 Il blocco di modifica

Il blocco di modifica permette di organizzare gli elementi che contribuiscono alla presentazione dei vostri prodotti : nome, prezzo, descrizione, tasti...

La struttura interna del blocco è visibile attraverso le linee arancioni tratteggiate :



Scegliete all'interno della lista di informazioni presentata nel blocco delle proprietà generali , lo spazio specifico in cui ognuna di queste dovrà essere visualizzata. Il principio è di utilizzare un semplice drag & drop (trascina/rilascia) di uno dei titoli presenti nella zona delle proprietà generali verso una cella del blocco.

Gli elementi devono essere "catturati" dalla zona tratteggiata. In seguito bisognerà trascinarli fino alla cella desiderata. La zona di destinazione finale è visualizzata in arancione. Possono essere posizionati diversi elementi all'interno della stessa cella.
Clicca sull'immagine per ingrandire
Clicca sull'immagine per ingrandire
Clicca sull'immagine per ingrandire


È allo stesso modo possibile spostare un elemento all'interno del blocco di modifica tramite la stessa procedura.

Notate come non sia obbligatorio visualizzare tutte le ifnormazioni a vostra disposizione nella lista delle proprietà generali.

La X che viene visualizzata al passaggio del cursore del mouse su un elmento, al margine della linea, permette di eliminare l'elemento dal blocco, per rinviarlo automaticamente nella lista delle proprietà generali:

Clicca sull'immagine per ingrandire


Le icone adiacenti alla " X " permettono di definire l'allineamento dell'elemento sull'asse orizzontale. Ogni elemento può essere allineato liberamente, anche se vari elementi sono, tra loro, posizionati insieme in una stessa cella.

Clicca sull'immagine per ingrandire


Un menu contestuale , accessibile tramite un clic destro sul mouse , permette di accedere all'impaginazione delle celle , o di creare delle nuove sezioni all'interno di quest'ultime ( aggiunta di linee e colonne ).

Clicca sull'immagine per ingrandire

 
 Il menu contestuale del bocco di modifica

Questo menu è chiamato "contestuale”, poiché il suo contenuto può cambiare in funzione dell'evoluzione del blocco che siete in procinto di realizzare, quindi del contesto di ogni cella.



Il menu contestuale permette di intervenire sulla struttra del blocco di modifica e sull’ organizzazione di ognuna della celle. Ecco una panoramica di funzionalità presenti in questo menu :
  • Staccare tutti gli elementi :
    Permette di rinviare tutti gli elementi della cella nella lista originaria della proprietà generali.

  • Allineamento verticale della cella :
    Permette di definire un allineamento della cella, in alto, al centro o in basso. Fare attenzione però:
    • Questo allineamento verrà applicato all' insieme degli elementi della cella
    • L'allineamento non può essere applicato nel blocco di modifica. Questo sarà visibile solo nel resto della zona di anteprima.

  • Opzioni di fusione delle celle :
    Gli elementi di questa zona permettono di unire le celle o di eliminare la fusione delle celle nel caso fossero già state unite precedentemente.

  • Dimenensioni delle linee e delle colonne :
    Per default, il sistema visualizzarà le colonne in modo omogeneo, a condizione che le immagini o il contenuto delle descrizioni non sia troppo grande da allargare una della colonne.
    È tuttavia possibile fissare in pixel i valori di larghezza/altezza di ognuna delle celle. Il sistema vi indicherà, in questo caso, tramite dei tratteggi rossi, le zone relative all'impostazione delle dimensioni.

  • Opzioni di struttura :
    Questa zona permette di aggiungere o di eliminare le linee e le colonne all'interno del blocco.
 
 Proprietà generali

La zona di sinistra dell'editor permette di definire le proprietà generali relative alla visualizzazione dei vostri prodotti.

La prima zona delle proprietà permette di selezionare l'impaginazione globale: Numero di elementi per linea (da 1 a 6) e numero di linee su ogni pagina.

Disponete allo stesso modo di una selezione di modelli pronti per essere applicati.

Clicca sull'immagine per ingrandire


Ecco una lista di funzionalità presenti nelle proprietà generali.
  • Fonte dell'immagine :
    Scegliete qui di visualizzare l'immagine miniatura o dettaglio per gli articoli. Attenzione però, la scelta delle immagini dettaglio probabilmente non sarà compatibile con un'impaginazione superiore a 3 colonne.

    Il sistema propone ugualemtne delle funzionalità "intelligenti”, capaci di assegnare la priorità ad un tipo di immagine in funzione del fatto che questa sia stata inserita o meno nelle proprietà degli articoli.

  • Fissare le dimensioni :
    Ciò permette di fissare una dimensione per le vostre immagini. Attenzione però :
    • Se le immagini originali presentano una dimensione inferiore al valore inserito qui, l'immagine risulterà "sgranata".
    • Se inserite valori sia per la larghezza CHE per l'altezza, rischiate di deformare l'aspetto delle immagini.

  • Alternare l'allineamento delle immagini:
    Se le immagini sono state allineate a destra o a sinistra, potrete invertire l'allineamento per ogni colonna. L'alternanza utilizza come riferimento l'immagine posizionata sul primo articolo.

  • Fissare il margine :
    Molto utile quando la descrizione è raggruppata con l'immagine. Il testo della descrizione andrà, in questo caso, a posizionarsi intorno all'immagine e questo controllo permette di fissare un margine intorno all'immagine, proprio per evitare che il testo si posizioni a ridosso di quest'ultima.

  • Raggruppare le immagini con la descrizione :
    Questa casella modificherà la posizione della descrizione (o delle descrizioni, se entrambe sono visualizzate insieme). Il testo della descrizione andrà, quindi, a posizionarsi intorno all'immagine formando un unico blocco.



  • Azione sull'immagine :
    Determinate qui il comportamento da eseguire quando un immagine viene cliccata o nel momento in cui viene passato il cursore del mouse al di sopra di quest'ultima.

    Per gli esperti che padroneggiano il sistema di codifica javascript, Oxatis dona la possibilità di eseguire funzioni javascript collegate al clic sull'immagine . Questa funzione nominata OxOnImgClick, contiene l'identificativo della cella e l'URL dell'immagine dettaglio inserita nelle impostazioni. la funzione OxOnImgClick potrà essere definita nei punti di inserimento HTML del vostro pannello di amministrazione.
  • Fonte delle descrizioni.
    La scheda articolo offre la possibilità di inserire due descrizioni : una corta e una complementare. Potete scegliere qui la corrispondenza tra le descrizioni 1 e 2 dell’editor.

    Come per le immagini, il sistema propone delle modalità "intelligenti", capaci di assegnare una priorità ad un tipo di descrizione, in funzione di quella che è stata inserita o meno all'interno delle proprietà degli articoli.

    Potete ugualmente limitare il numero di caratteri visualizzati per queste descrizioni a condizione che queste siano state create in un formato di testo semplice (e non in testo arricchito o tramite WebBlock).
 

Aggiungi ai preferiti: http://www.oxatis.it/Help/HelpCenterContent.asp?ActionID=512&TID=55371&MID=9000%7C55321&LangID=4
© 2001-2019 Oxatis. Tutti i diritti riservati.