Mise en page de la liste des articles

 Objectif

Dans chacun des composants Panier d’achat et Catalogue, la solution offre deux modes de présentation de vos articles.
  • Un mode Détail ou Fiche-produit, permettant de donner une description complète de l’article. Cette page permet d’afficher les images additionnelles ou les options de votre article.
  • Un mode Liste, présentant généralement une description sommaire de vos produits, mais permettant de donner un aperçu rapide et global des articles que vous proposez dans une catégorie.
Les menus [Commerce \ Panier d’Achat (Boutique) ] et [Commerce \ Catalogue (Vitrine) ] permettent d'accéder à l’éditeur du mode "Liste” en cliquant sur l’onglet "Éléments mise en page”.

Cliquez sur l'image pour l'agrandir

Vous disposez d’une mise en page distincte pour chacun de ces composants.

 
 Principes généraux de l’éditeur

L’éditeur se découpe en 3 zones distinctes :

Cliquez sur l'image pour l'agrandir
  • Les propriétés générales
    C’est dans la colonne de gauche que vous définirez la structure générale de votre affichage : nombre de colonnes, de lignes, comportement des images, etc.

  • Une zone d’aperçu
    Cette zone permet d’avoir une première idée de ce que sera la présentation du catalogue. Cette zone utilise toutefois des articles fictifs et il sera nécessaire de sauvegarder pour pouvoir se faire une véritable idée du rendu dans le site.

  • Un bloc d’édition
    Le premier bloc de la zone d’aperçu est dynamique. Il est possible d’y agencer les éléments présentant vos produits. Le modèle, créé dans ce premier bloc, sera automatiquement répercuté sur le reste de la zone d’aperçu.
 
 Le bloc d’édition

Le bloc d'édition permet d’agencer les éléments qui présenteront chacun de vos articles : nom, prix, description, boutons...

La structure interne du bloc est visible par le biais des pointillés oranges :



Vous choisissez parmi la liste des informations présentées dans le bloc des propriétés générales l’endroit où chacune d'elles devra s’afficher. Le principe est de faire un simple glisser/déposer d’un intitulé depuis la zone des propriétés générales vers une cellule de ce bloc.

Les éléments doivent être "attrapés” à l’aide de la zone hachurée. Il faut ensuite les faire glisser jusqu’à la cellule souhaitée. La zone destination s’affiche en orange. Plusieurs éléments peuvent être placés dans une même cellule.
Cliquez sur l'image pour l'agrandir
Cliquez sur l'image pour l'agrandir
Cliquez sur l'image pour l'agrandir


Il est également possible de déplacer un élément à l'intérieur même du bloc d’édition avec le même procédé.

Notez qu’il n’est pas obligatoire d’afficher toutes les informations mises à votre disposition dans la liste des propriétés générales.

La croix s’affichant au survol d’un l'élément, en bout de ligne, permet de supprimer l'élément du bloc pour le renvoyer dans la liste des propriétés générales :

Cliquez sur l'image pour l'agrandir


Les icônes attenants à la croix permettent de définir l’alignement de l'élément sur l’axe horizontal. Chaque élément peut être librement aligné, même si plusieurs d’entre eux sont placés conjointement dans une même cellule.

Cliquez sur l'image pour l'agrandir


Un menu contextuel , accessible via le clic droit de la souris, permet d'accéder à la mise en page de la cellule, ou de créer de nouveaux découpages des cellules (ajout de lignes et de colonnes).

Cliquez sur l'image pour l'agrandir

 
 Le menu contextuel du bloc d’édition.

Ce menu est dit "contextuel”, car son contenu pourra changer en fonction de l’évolution de la création de votre bloc et du contexte de chaque cellule.



Le menu contextuel permet d’intervenir sur la structure du bloc d’édition et sur l’agencement de chacune de ces cellules. Voici un tour d'horizon des fonctionnalités offertes par ce menu :
  • Détacher tous les éléments :
    Permet de renvoyer tous les éléments de la cellule dans la liste des propriétés générales.

  • Alignement vertical de la cellule :
    Permet de définir un alignement en haut, au centre ou en bas de la cellule. Attention toutefois:
    • Cet alignement s’appliquera à l’ensemble des éléments de la cellule
    • L’alignement n’est pas appliqué dans le bloc d’édition. Il n’est visible que dans le reste de la zone de l’aperçu.

  • Options de fusion des cellules :
    Les éléments de cette zone permettent de fusionner les cellules ou de supprimer la fusion si elles l’ont déjà été au préalable.

  • Dimensions des lignes et colonnes :
    Par défaut, le système affichera vos colonnes de manière homogène à condition que les images ou le contenu des descriptions ne viennent pas élargir une des colonnes.
    Il est toutefois possible de fixer en pixels la largeur et/ou la hauteur de chacune des cellules. Le système vous indiquera alors à l’aide de traits rouge les zones dont les dimensions ont été fixées.

  • Options de structure :
    Cette zone permet de rajouter ou de supprimer les lignes et colonnes dans le bloc.
 
 Propriétés générales

La zone de gauche de l’éditeur permet de définir les propriétés globales de l’affichage en liste de vos produits.

La première zone des propriétés permet de sélectionner la mise en page globale : Nombre d'éléments par lignes (1 de à 6) et nombres de lignes sur chaque pages.

Vous disposez également d’une sélection de modèles prêts à l’emploi.

Cliquez sur l'image pour l'agrandir


Voici une liste des fonctionnalités proposées dans les propriétés générales.
  • Source de l'image :
    Choisissez ici d’afficher l’image vignette ou détail pour vos articles. Attention toutefois, le choix des images détails ne sera probablement pas compatible avec une mise en page supérieure à 3 colonnes.

    Le système propose également des modes "intelligents” capables de donner priorité à un type d’image en fonction qu’il soit renseigné ou non dans les propriétés de vos articles.

  • Fixer les dimensions :
    Ceci permet d’imposer une dimension à vos images. Attention toutefois :
    • Si les images d’origine sont de taille inférieure à la valeur renseignée ici, l’image aura un aspect "flou”.
    • Si vous renseignez à la fois des valeurs pour la largeur ET la hauteur, vous risquez de déformez l’aspect de vos images

  • Alterner l'alignement des images:
    Si votre image a été alignée à droite ou à gauche, vous pourrez inverser l’alignement pour chaque colonne. L'alternance utilise comme référence l'image positionnée sur le premier article.

  • Fixer la marge :
    Très utile lorsque la description est groupée à l’image. Le texte de la description vient alors s’enrouler autour de l’image et ce contrôle permet d’imposer une marge autour de l’image pour éviter que le texte ne vienne directement s’accoler à celle-ci.

  • Grouper l'image avec la ou les descriptions :
    Cette case modifiera la position de votre description (ou de vos descriptions, si les deux sont affichées conjointement). Le texte de la description viendra alors s’enrouler autour de l’image pour former un bloc unique.



  • Action sur l’image :
    Déterminez-ici le comportement lors du clic ou du survol sur l’image de l’article.

    Pour les experts maîtrisant le développement javascript, Oxatis laisse la possibilité d'exécuter une fonction javascript au clic sur l'image . Cette fonction nommée OxOnImgClick, contient l’identifiant de la cellule et l'URL de l'image détail passés en paramètres. La fonction OxOnImgClick pourra être définie dans les points d’insertion HTML de votre administration.
  • Source des descriptions.
    La fiche article propose de renseigner deux descriptions : une description courte et une description complémentaire. Choisissez ici les correspondances avec les descriptions 1 et 2 de l’éditeur.

    Comme pour les images, le système propose des modes "intelligents” capables de donner priorité à un type de description en fonction qu’elle ait été renseignée ou non dans les propriétés de vos articles.

    Vous pouvez également limiter le nombre de caractères affichés pour ces descriptions à condition qu’elles aient été crées au format texte simple (et non texte enrichi ou webBlock).
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=512&MID=900055321&TID=55371&LangID=0
© 2001-2014 Oxatis. Tous droits réservés.