Ajout d'options de tri personnalisé pour les listes de produits et les résultats de recherche

Dans le widget Liste d'entrées de catalogue, vous pouvez ajouter des options de tri personnalisé à la liste SORT BY pour les listes de produits affichées sur les pages de sous-catégorie et les pages de résultats de recherche. Cette personnalisation implique la définition des nouvelles options de tri dans un fichier de configuration HCL Commerce Search étendu et dans les fichiers JSP widget.

Lorsque vous publiez le magasin type Aurora, les présentations des pages de sous-catégorie et la page des résultats de recherche utilisent le widget Liste d'entrées de catalogue de la bibliothèque de widgets Commerce Composer. Ce widget affiche une liste de produits (voir Options de tri dans le widget Liste d'entrées de catalogue). Dans le widget, la liste SORT BY comporte quatre options de tri qui sont définies, en plus de l'option par défaut, Pertinence. Les options sont Marques, Nom, Prix (du plus bas au plus élevé) et Prix (du plus élevé au plus bas) :

Triez par liste pour les offres de produits et les résultats de recherche — Figure 1. Options de tri dans le widget Liste d'entrées de catalogue

Vous pouvez ajouter une option de tri personnalisé, telle que Numéro de pièce, pour aider les clients à trouver un produit spécifique plus rapidement.

Partie 1. Ajout de l'option de tri personnalisé aux profils de recherche pertinents

Avant de commencer

Pour vous familiariser avec les profils de recherche, lisez HCL Commerce Search fichier de configuration (wc-search.xml). Plus précisément, examinez l'information pour connaître la propriété de tri d'un profil de recherche. Cette partie de la tâche de personnalisation vous oblige à ajouter une zone de tri à la propriété de tri pour plusieurs profils de recherche dans la version étendue du fichier de configuration HCL Commerce Search (wc-search.xml).

Procédure

Accédez au fichier de configuration HCL Commerce Search par défaut (wc-search.xml) au chemin suivant :

Search_eardir/xml/config/com.ibm.commerce.catalog/wc-search.xml
Examinez les profils de recherche existants qui spécifient les quatre options de tri par défaut illustrées dans Options de tri dans le widget Liste d'entrées de catalogue.
Les fragments de code suivants montrent deux des profils de recherche par défaut dans le fichier de configuration de HCL CommerceSearch :
- Le profil étiqueté 1 trouve les produits par catégorie lorsque les clients parcourent le catalogue.
- Le profil étiqueté 2 trouve les produits par terme de recherche lorsque les clients effectuent des recherches dans le catalogue.
Ces profils contiennent les quatre zones de propriétés de tri par défaut proposées dans le widget Liste d'entrées de catalogue. Dans chaque fragment, les zones nommées 1, 2, 3 et 4 définissent les options Marques, Nom, Prix (du plus bas au plus élevé) et Prix (du plus élevé au plus bas) :
```
...
1
<_config:profile name="IBM_findProductsByCategory" indexName="CatalogEntry">
...
  <_config:sort>
   <_config:field name="1" value="mfName_ntk_cs asc"/>
   <_config:field name="2" value="name_ntk asc"/>
   <_config:field name="3" value="price_* asc"/>
   <_config:field name="4" value="price_* desc"/>
  </_config:sort>
...
2
<_config:profile name="IBM_findProductsBySearchTerm" indexName="CatalogEntry">
...
 <_config:sort>
   <_config:field name="1" value="mfName_ntk_cs asc"/>
   <_config:field name="2" value="name_ntk asc"/>
   <_config:field name="3" value="price_* asc"/>
   <_config:field name="4" value="price_* desc"/>
 </_config:sort>
```
Important : Votre magasin peut utiliser différents profils de recherche. Veillez à connaître les profils de recherche utilisés par votre magasin avant de procéder.
Pour ajouter une option de tri personnalisé, ouvrez la version étendue du fichier de configuration HCL Commerce Search (wc-search.xml) au chemin d'accès suivant :

Search_eardir/xml/config/com.ibm.commerce.catalog-ext/wc-search.xml

Si vous ne disposez pas déjà d'une version étendue de ce fichier, vous devez en créer une en utilisant les instructions contenues dans Modification de propriétés dans le fichier de configuration du HCL Commerce Search (wc-search.xml)
Dans l'élément <config:search, ajoutez du code pour étendre les profils de recherche existants afin d'ajouter votre option de tri personnalisé.
Les fragments suivants montrent comment étendre les deux profils de recherche à partir de l'étape 2 pour ajouter une zone 5 en tant qu'option de tri pour Numéro de pièce. La valeur partNumber_ntk est le nom exact de la colonne d'index de recherche, dans ce cas, une colonne non segmentée (ntk). Pour cet exemple, les numéros de pièce sont triés dans l'ordre croissant (asc).
```
1
<_config:profile name="IBM_findProductsByCategory" indexName="CatalogEntry">    	   	        
   <_config:sort>       
      <_config:field name="5" value="partNumber_ntk asc"/>
   </_config:sort>
</_config:profile>


2
<_config:profile name="IBM_findProductsBySearchTerm" indexName="CatalogEntry">    	   	        
   <_config:sort>       
      <_config:field name="5" value="partNumber_ntk asc"/>
   </_config:sort>
</_config:profile>
```
Enregistrez et fermez le fichier wc-search.xml mis à jour.

2e partie : Personnalisation des fichiers JSP pour le widget Liste d'entrées de catalogue pour ajouter l'option de tri personnalisé

Pourquoi et quand exécuter cette tâche

Lisez l'aperçu du Widget Liste des entrées de catalogue qui contient la liste SORT BY.
Familiarisez-vous avec les composants de vitrine d'un widget Commerce Composer dans Architecture de widget Commerce Composer.

Procédure

Créez une version personnalisée du widget Liste d'entrées de catalogue, si vous n'en avez pas déjà une. En créant une version personnalisée, vous évitez d'écraser potentiellement votre personnalisation avec les futures mises à jour HCL Commerce.
Suivez les instructions de la rubrique Copie de widgets de niveau de site HCL Commerce.
Ouvrez votre fragment JSP de fournisseur d'interface utilisateur personnalisé pour le widget Liste d'entrées de catalogue.
Conseil : Pour le widget Liste d'entrées de catalogue par défaut, ce fragment JSP se trouve au chemin d'accès suivant :
- workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryList\CatalogEntryList_UI.jspf

Recherchez les lignes de code qui définissent les options de tri existantes dans la liste SORT BY du widget.

Pour le widget Liste d'entrées de catalogue par défaut, les lignes de code sont affichées ici :


<div class="sorting_view_controls_container">
  <div class="sorting_controls">
    <span class="order_by_label"><label for="orderBy${widgetSuffix}">
        <fmt:message key="SN_SORT_BY" bundle="${widgetText}"/></label>:</span>
    <div id="orderByDropdown${widgetSuffix}" class="orderByDropdown selectWrapper">
        <select data-dojo-type="dijit/form/Select" title="<fmt:message key='SN_SORT_BY_USAGE' bundle='${widgetText}'/>" 
                id="orderBy${widgetSuffix}" baseClass="dijitSelect dijitValidationTextBox orderBySelect" name="orderBy" 
                onChange="javaScript:setCurrentId('orderBy${widgetSuffix}');SearchBasedNavigationDisplayJS.sortResults(this.value)">
          <option <c:if test="${sortBy == ''}">selected="selected"</c:if> value = "0"><fmt:message key="SN_NO_SORT" bundle="${widgetText}"/></option>
          <option <c:if test="${sortBy == '1'}">selected="selected"</c:if> value = "1"><fmt:message key="SN_SORT_BY_BRANDS" bundle="${widgetText}"/></option>
          <option <c:if test="${sortBy == '2'}">selected="selected"</c:if> value = "2"><fmt:message key="SN_SORT_BY_NAME" bundle="${widgetText}"/></option>
          <c:if test="${globalpricemode == 1}">
            <option <c:if test="${sortBy == '3'}">selected="selected"</c:if> value = "3"><fmt:message key="SN_SORT_LOW_TO_HIGH" bundle="${widgetText}"/></option>
            <option <c:if test="${sortBy == '4'}">selected="selected"</c:if> value = "4"><fmt:message key="SN_SORT_HIGH_TO_LOW" bundle="${widgetText}"/></option>
          </c:if>
        </select>
    </div>
...

En tant qu'élément enfant de l'élément <select>, ajoutez le code pour définir votre option de tri personnalisé.
Par exemple, cette ligne de code fait référence à une zone de tri personnalisé défini dans le fichier étendu wc-search.xml avec comme nom 5:
```
<option <c:if test="${sortBy == '5'}">selected="selected"</c:if> value = "5"><fmt:message key="SN_SORT_BY_PARTNUMBER" bundle="${widgetText}"/></option>
```
Si vous préférez ne pas utiliser un regroupement de ressources pour votre widget, vous pouvez coder le texte de l'option de tri en dur, comme indiqué ici :
```
<option <c:if test="${sortBy == '5'}">selected="selected"</c:if> value = "5">Part Number</option>
```
Enregistrez et fermez le fragment JSP du fournisseur d'interface utilisateur.
Si vous avez fait référence à un regroupement de ressources dans l'étape 4, ajoutez la clé de message pour le texte de votre option de tri dans la vitrine au regroupement de ressources de votre widget.
Par exemple, si vous souhaitez afficher les mots Numéro de pièce dans la liste SORT BY, vous devez ajouter une ligne similaire à l'exemple suivant au fichier de propriétés :
```
SN_SORT_BY_PART_NUMBER = Part Number
```
Conseil : Pour le widget Liste d'entrées de catalogue par défaut, le fichier de propriétés anglais qui définit le texte du widget se trouve au chemin d'accès suivant :
- workspace_dir\Stores\WebContent\widgetdir\properties\widgettext_en_US.properties
Ouvrez votre fragment JSP de fournisseur de données personnalisé pour le widget Liste d'entrées de catalogue.
Conseil : Pour le widget Liste d'entrées de catalogue par défaut, ce fragment JSP se trouve au chemin d'accès suivant :
- workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryList\CatalogEntryList_Data.jspf

Recherchez les lignes de code suivantes :

<c:choose>
<%-- param.sortBy is from widget property --%>
<c:when test="${not empty param.sortBy}" >
  <c:if test="${(globalpricemode == 1 && param.sortBy != '0') || param.sortBy == '1' || param.sortBy == '2' || param.sortBy == '3' || param.sortBy == '4'}">
    <c:set var="sortBy" value="${param.sortBy}" scope="request"/> 1
  </c:if >
</c:when>
<c:when test="${not empty param.orderBy}" >
  <c:if test="${(globalpricemode == 1 && param.orderBy != '0') || param.orderBy == '1' || param.orderBy == '2' || param.orderBy == '3' || param.orderBy == '4'}">
    <c:set var="sortBy" value="${param.orderBy}" scope="request"/> 2
  </c:if >
</c:when>
</c:choose>

La ligne étiquetée 1 définit l'option de tri sur la page de magasin en fonction de la zone Ordre de tri initial du widget Liste d'entrées de catalogue. Les utilisateurs du Centre de gestion configurent cette zone lorsqu'ils ajoutent le widget à une présentation dans l'outil Commerce Composer.

La ligne étiquetée 2 définit l'option de tri sur la page de magasin lorsque le client sélectionne depuis la liste SORT BY.

Ajoutez le paramètre de votre option de tri personnalisé à la liste des paramètres.

Dans le fragment de code suivant, || param.sortBy == '5' est ajouté aux deux conditions :

<c:choose>
<%-- param.sortBy is from widget property --%>
<c:when test="${not empty param.sortBy}" >
  <c:if test="${(globalpricemode == 1 && param.sortBy != '0') || param.sortBy == '1' || param.sortBy == '2' || param.sortBy == '3' || param.sortBy == '4' || param.sortBy == '5'}">
    <c:set var="sortBy" value="${param.sortBy}" scope="request"/>
  </c:if >
</c:when>
<c:when test="${not empty param.orderBy}" >
  <c:if test="${(globalpricemode == 1 && param.orderBy != '0') || param.orderBy == '1' || param.orderBy == '2' || param.orderBy == '3' || param.orderBy == '4' || param.sortBy == '5'}">
    <c:set var="sortBy" value="${param.orderBy}" scope="request"/>
  </c:if >
</c:when>
</c:choose>

Enregistrez et fermez le fichier.

3ème partie : Ajout de l'option de tri personnalisé à la vue des propriétés du widget dans le Centre de gestion

Lorsque les utilisateurs du Centre de gestion créent une présentation qui utilise le widget Liste d'entrées de catalogue, ils peuvent définir certaines propriétés d'affichage pour le widget. La propriété Ordre de tri initial contrôle la façon dont les produits sont triés dans le widget de la page de magasin avant que le client ne choisisse une option de tri différente. Vous devez ajouter votre option de tri personnalisé à la définition d'objet du widget Liste d'entrées de catalogue si vous souhaitez que les utilisateurs du Centre de gestion puissent sélectionner l'option dans l'outil Commerce Composer.

Procédure

Ouvrez votre fichier de définition d'objet personnalisé pour le widget Liste d'entrées de catalogue.
Conseil : Pour le widget Liste d'entrées de catalogue par défaut, la définition d'objet se trouve au chemin d'accès suivant :
- workspace_dir\LOBTools\WebContent\WEB-INF\src\xml\commerce\pagelayout\widgetDefinitions\ProductListingWidget\WidgetObjectDefinition.xml

Recherchez les lignes de code qui définissent les options existantes pour la propriété Ordre de tri initial.

Pour le widget Liste d'entrées de catalogue par défaut, les lignes de code sont affichées ici :


<PropertyDefinition propertyName="xWidgetProp_sortBy">
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Relevance}" value="0"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Brands}" value="1"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Name}" value="2"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_LowToHigh}" value="3"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_HighToLow}" value="4"/>
</PropertyDefinition>

Ajoutez une valeur de propriété pour votre option de tri personnalisé.

Par exemple, la ligne suivante étiquetée 5 ajoute une valeur de propriété pour définir l'ordre de tri initial sur Numéro de pièce :


<PropertyDefinition propertyName="xWidgetProp_sortBy">
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Relevance}" value="0"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Brands}" value="1"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_Name}" value="2"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_LowToHigh}" value="3"/>
   <PropertyValue displayName="${pageLayoutResources.productListingWidgetOrderBy_HighToLow}" value="4"/>
5 <PropertyValue displayName="${PageLayoutResources.productListingWidgetOrderBy_PartNumber}" value="5" />
</PropertyDefinition>

Si vous avez fait référence à un regroupement de ressources dans l'étape 3, ajoutez la clé de message au regroupement de ressources de votre widget.
Par exemple, si vous souhaitez afficher les mots Numéro de pièce dans la propriété Ordre de tri initial, vous devez ajouter une ligne similaire à l'exemple suivant au fichier de propriétés :
```
# Product Listing Widget
productListingWidgetOrderBy_PartNumber=Part number
```
Conseil : Pour le widget Liste d'entrées de catalogue par défaut, le fichier de propriétés anglais qui définit le texte du widget se trouve au chemin d'accès suivant :
- workspace_dir\LOBTools\src\com\ibm\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB_en_US.properties
Si vous préférez ne pas utiliser un regroupement de ressources pour votre widget, vous pouvez coder le texte de l'option de tri en dur, comme indiqué ici :
```
<PropertyValue displayName="Part number" value="5" />
```
Enregistrez et fermez le fichier.
Redémarrez le serveur.

4e partie : Testez les résultats de la personnalisation dans la vitrine.

Procédure

Dans un navigateur, accédez à l'URL de votre magasin.
Effectuez une recherche en entrant un terme de recherche. Lorsque la page des résultats de recherche s'affiche, dans le widget Liste d'entrées de catalogue, confirmez que la liste SORT BY affiche votre option de tri personnalisé et que le tri fonctionne comme prévu.
Accédez à une sous-catégorie qui contient des produits. Dans le widget Liste d'entrées de catalogue, confirmez que la liste SORT BY affiche votre option de tri personnalisé et que le tri fonctionne comme prévu.