Accueil > L'E-commerce selon Isotools > Outils clients > Guichet de services
 

Guichet de services

Exemple de mise en oeuvre : front office Commandes

Dans ce tutoriel, nous partons du principe que vous avez déjà installé le web service Guichet de services et que vous l'avez configuré dans la vue Configurer du site, ces informations étant propres à votre installation. Vous aurez également configuré votre serveur XRM avec la catégorie Clients.

Cliquez sur les liens pour voir l'illustration de la configuration à appliquer à chaque élément.

Dans cet exemple, nous allons mettre en place deux pages de front office : la première permettant aux clients de visualiser une la liste de leurs commandes à l'aide d'un formulaire de recherche. Ils pourront se faire envoyer un exemplaire pdf de ces commandes par email. la seconde sera accessible par le biais d'un lien sur les numéros de commande et affichera le détail d'une commande.

 

Tutoriel FO - Page Mes commandes

Page de front office listant les commandes d'un client du site B2B

Tutoriel FO - page de détail de commande

Page de détail d'une commande

 

 

Tutoriel FO - Configuration page Mes commandes

Configuration de la page Mes Commandes dans Isotools Studio X8

 

Tutoriel FO - Configuration de la page Détail de commande

Aperçu de la configuration de la page Détail d'une commande

 

La configuration de ces pages se déroulent en plusieurs étapes :

  • Première page : Mes commandes

    1. Configuration du formulaire de recherche,

    2. Configuration du tableau de résultats,

  • Seconde page : Détail de commande

    1. Configuration de la page, son paramètre, son titre et ses boutons,

    2. Configuration de la vue liste orliweb et du formulaire de recherche,

    3. Configuration de l'en tête de commande,

    4. Configuration des lignes de commande,

    5. Configuration du pied de commande,

    6. Configuration du lien dans le tableau de résultats de la première page.

Configuration de la page "Mes commandes"

Formulaire de recherche

Voici, en images, les étapes de configuration du formulaire de cette page (cliquez sur le lien pour afficher l'image en taille réelle) :

  1. Insérez et configurez une page libre dans le site et spécifiez ses filtres de visibilité XRM Server.

  2. Insérez un élément Vue liste orliweb et configurez :

  3. Insérez un élément Critères de recherche.

  4. Insérez un élément Filtre sur texte que vous nommerez Force le client et configurez le pour limiter l'affichage des données strictement au client identifié.

  5. Insérez un élément Filtre sur texte que vous nommerez N° de commande et configurez le.

  6. Insérez un élément Filtre par choix explicite que vous nommerez Division commerciale et configurez le.

  7. Insérez sous cet élément, un élément Option et configurez le.

  8. Insérez un élément Filre par choix que vous nommerez Saison et configurez le.

  9. Insérez un élément Filtre par date que vous nommerez Date et configurez le.

Le formulaire est configuré, un filtre permet de limiter l'affichage au client connecté.

Tableau de résultats

Toujours en images, voici comment configurer le tableau de résultats. Ce tableau sera visible dans la page.

  1. Insérez un élément Colonnes du tableau et configurez le.

  2. Insérez un élément Colonne du tableau pour les champs suivants :

  3. Insérez un élément Colonne de document sans libellé et configurez le.
  4. Insérez un élément Ordre initial et son sous-élément Critère de tri permettant de spécifier le tri initial des résultats dans le tableau. Configurez les.

Le tableau de résultats est configuré dans la page. Il ne vous reste plus qu'à la page de détail d'une commande et d'ajouter un lien dans le tableau vers cette page.

Configuration de la page "Détail de commande"

Cette page présente le détail d'une commande (doù son nom Détail de commande). Nous allons donc la concevoir en nous approchant au maximum de son mode de présentation en version papier. Ainsi :

  • l'élément En tête contiendra toutes les informations normalement présentées en en tête de document,

  • l'élément Colonnes du tableau présentera toutes les lignes de la pièce (ici une commande donc toutes les lignes d'articles commandées),

  • l'élément Pied affichera toutes les informations présentées en pied de document notamment les totaux.

Voici, toujours en images, comment configurer cette page.

Page libre, paramètre, titre et boutons

Cette partie permet de concevoir la page et d'insérer tout particulièrement le paramètre permettant de limiter, via le formulaire de recherche que vous allez insérer ensuite, l'affichage des données à la seule commande passée en paramètre. Il est également requis pour établir le lien entre le tableau et la page détaillée de la commande.

  1. Insérez une page libre non visible dans les menus du site (onglet Affichage), n'ayant pas de titre et filtrée à la catégorie Clients de votre serveur XRM.
  2. Insérez le paramètre permettant d'établir le lien entre le tableau de résultats et la page de détail.
  3. Insérez le titre de données pour spécifier un de la page. Il s'agit d'un titre conçu dynamiquement c'est pourquoi vous utiliserez un élément Titre de données.
  4. Insérez un élément Barre de boutons pour naviguer dans le système et retourner au tableau de résultats mais également imprimer la page courante.Copiez là et vous placerez cette seconde barre en fin de page après la configuration du contenu de la pièce dans la page.
Vue liste orliweb et formulaire de recherche pour le filtrage de contenu

Pourquoi un formulaire de recherche dans la page ? La raison est assez simple : l'idée est d'ajouter un filtre permettant de limiter l'affichage aux seules informations issues de la commande passée en paramètre. En effet, lorsque l'internaute affiche cette page, il proviendra normalement du tableau de résultats construit dans la page Mes commandes. Du coup, si un visiteur accède à cette page directement depuis son URL, il verrait toutes les informations de toutes les commandes contenues dans orliweb s'afficher dans la page. Avec ce lien, si l'accès à cette page se fait sans passer par le lien, aucune information ne sera affichée dans la page. Ce formulaire sera évidemment masqué dans la page mais sa présence dans cette dernière est d'une grande importance.

  1. Insérez l'élément Vue liste orliweb et configurez :
  2. Insérez un élément Critères de recherche dont vous masquerez la visibilité.
  3. Insérez un élément Filtre sur texte que vous nommerez Force la commande et configurez le.
    Insérez un élément Ordre initial et son sous-élément Critère de tri pour spécifier l'ordre initial d'affichage des résultats dans le tableau de résultats (lignes de la commande).
En tête de document

Pour construire l'en tête de page, vous allez utiliser l'élément Donnée. Il permet de positionner une donnée dans la page.

En utilisant un élément En tête et des éléments Donnée, l'objectif est de paramétrer l'affichage d'informations génériques à l'ensemble des lignes de commande. En effet, dans la base, chaque ligne de commande contient les informations de livraison, de facturation, la nature de commande, son type, etc. En utilisant l'en tête et la donnée, ces informations ne seront alors affichées qu'une seule fois dans la page.

  1. Insérez un élément En tête.
  2. Insérez un élément Grille de présentation contenant 4 lignes et 3 colonnes.
  3. Supprimez 2 cellules dans les 2ème et 4ème lignes et dans la cellule restante, insérez un élément Texte sans contenu avec ajout d'un saut de ligne. Il permettra d'espacer les lignes et d'aérer la page.
  4. Insérez au niveau des cellules de la première ligne, des éléments Donnée pour configurer les champs suivants :
  5. Insérez, au niveau des cellules de la 3ème ligne, deux éléments Groupes et nommez les Adresse de livraison et Adresse de facturation.
  6. Insérez toujours dans ces cellules, des éléments Donnée pour configurer les champs suivants :
  7. Ajoutez des éléments Texte sans contenu avec ajout d'un saut de ligne pour aérer au besoin les informations.

L'en tête est configuré.

Tableau des lignes de la commande

Ce tableau va présenter les différentes lignes de la commande pointée par le lien. Pour le configurer, voici en images, la procédure à suivre :

  1. Insérez un élément Colonnes du tableau et configurez le.

  2. Insérez des éléments Colonne du tableau pour configurer les champs suivants :
  3. Insérez un élément Grille par tailles et configurez le.
  4. Insérez trois éléments Donnée de la grille pour les données suivantes :

Le tableau présentant les lignes de la commande est configuré.

Pied de document
  1. Insérez un élément Pied.

  2. Insérez un élément Grille de présentation contenant 1 ligne et 3 colonnes.

  3. Insérez un élément Donnée dans les cellules 2 et 3 pour configurer les champs suivants :

  4. Insérez un élément Remarque et saisissez le texte suivant :
    "Les données présentées dans cette page sont fournies à titre indicatif et ne sont pas contractuelles. Contactez le service commercial au 01 02 03 04 05 pour obtenir une information garantie."

Le pied de document est configuré. Il affichera les totaux relatifs aux lignes insérées dans le tableau de commande.

Insérer le lien dans le tableau de résultats de la page Mes commandes

Pour terminer cette configuration, il ne vous reste qu'à insérer le lien sur la colonne de tableau N° de commande dans la page Mes commandes. Pour cela, vous cliquerez sur la propriété Lien et spécifierez le paramètre cell.code (bouton Paramètres dans l'éditeur de liens) après avoir sélectionné la page "Détail de commande" visée que vous venez de concevoir.

 

Pour : Extension B2B, Connecteur Cegid Retail

Publiée le 26/06/2012 | ID : KB_2012GUICH_EX2

>> Evaluez cette documentation

Image Captcha