Fonction de mise en évidence de l'édition en un clic dans le fichier StoreCommonUtilities.js

Le fichier StoreCommonUtilities.js contient une fonction JavaScript qui contrôle l'affichage des liens d'édition en un clic, et met en évidence les éléments de page qui contiennent des liens. Si vous personnalisez la fonction d'édition en un clic, vous devez comprendre l'objet et l'implémentation de cette fonction.

Objet de la fonction de mise en évidence

La fonction de mise en évidence montre aux utilisateurs professionnels l'emplacement des liens d'édition en un clic dans l'aperçu de magasin et les objets métier auxquels ils s'appliquent. Lorsque vous utilisez l'aperçu de magasin, l'utilisateur professionnel active la fonction de mise en évidence en cliquant sur le bouton Afficher les informations sur la page situé en haut de la fenêtre d'aperçu du magasin. Ce bouton :

Affiche les liens d'édition en un clic qui sont intégrés directement aux pages de magasin.
Affiche les liens Afficher les informations qui ouvrent les fenêtres en incrustation d'aperçu de magasin contenant les liens d'édition en un clic.

La fonction de mise en évidence ajoute également un contour bleu à l'élément de page HTML qui contient le lien. Puis, lorsque l'utilisateur professionnel survole l'élément de page, celui-ci est mis en évidence en gris.

Fragment de code de la fonction de mise en évidence

Le fragment de code suivant provient de la fonction de mise en évidence dans le fichier StoreCommonUtilities.js. Vous pouvez consulter ce fichier dans le chemin suivant :

WCDE_installdir/workspace/Stores/WebContent/Aurora/javascript/StoreCommonUtilities.js

...

/**
* This function highlight all marketing spots and catalog objects in preview mode, 
overwriting the implementation in site level (StorePreviewerHeader.jsp)
*/
function outlineSpots(){
  dojo.addClass(document.body,'editMode');
  dojo.query(".ESpotInfo").style({ display:"block" });
  dojo.query(".searchScore").style({ display:"block" });
1 var all = dojo.query(".genericESpot,.product,.searchResultSpot,.productDetail,.categorySpot");

...

La ligne de code marquée 1 montre le nom des classes CSS référencées dans les liens d'édition en un clic et dans d'autres éléments. Les noms de classe CSS servent à indiquer les éléments de page HTML auxquels la fonction de mise en évidence est appliquée. Les classes CSS sont les suivantes :

product: Indique la zone d'un emplacement e-marketing qui contient le lien Editer d'une entrée de catalogue ou d'une catégorie. Cette classe est utilisée pour un emplacement e-Marketing contenant une grille à quatre colonnes.
productDetail: Indique la zone d'une page de détails de produit qui contient le lien Editer d'une entrée de catalogue.
categorySpot: Indique la zone d'une page de catégorie qui contient le lien Editer de la catégorie.
genericESpot: Indique un emplacement e-Marketing. L'utilisateur professionnel doit cliquer sur le lien Afficher les informations dans l'emplacement e-marketing pour afficher la page Informations sur l'emplacement e-marketing. Cette page contient les liens Créer et Editer.
searchResultSpot: Indique la zone des résultats sur la page des résultats de la recherche. L'utilisateur professionnel doit cliquer sur le lien Afficher les informations pour afficher la page Informations sur la règle de recherche. Cette page contient les liens Créer et Editer.

Référencement des noms de classe CSS à partir des liens d'édition en un clic et d'autres éléments de page HTML

Pour appliquer la fonction de mise en évidence de l'édition en un clic à un élément de page, vous devez référencer l'une des classes CSS listées dans le fichier StoreCommonUtilities.js (voir 1 dans le fragment de code précédent). Par exemple, la page de détail des produits du magasin (fichier ProductDisplay.jsp) contient un lien Editer. Dans ce fichier JSP, l'élément de page HTML spécifique qui contient le lien est le conteneur de l'image du produit :

 <div class="container_product_details_image_information container_margin_5px productDetail">

A la fin de cette ligne de code, remarquez la référence à la classe CSS productDetail. Cette classe CSS est listée dans la fonction de mise en évidence dans le fichier StoreCommonUtilities.js.

C'est pourquoi, lorsque l'utilisateur professionnel clique sur le bouton Afficher les informations sur la page sur la page de détail des produits de l'aperçu de magasin, la fonction de mise en évidence de l'édition en un clic affiche le lien Editer et applique la mise en évidence au conteneur de l'image du produit.