Ajout d'une prise en charge de recommandations dynamiques d'entrée de catalogue dans un emplacement e-Marketing

Pour qu'un directeur marketing ou un professionnel puisse tirer parti de l'action Recommandation dynamique d'entrée de catalogue dans une activité Web, la personnalisation de pages JSP de magasin peut être nécessaire. En tant que développeur de pages de magasin, vous pouvez ajouter une prise en charge pour utiliser l'action Recommandation dynamique d'entrée de catalogue dans un emplacement e-Marketing. La prise en charge de l'action doit être ajoutée au fichier JSP dans lequel l'activité va s'exécuter.

Avant de commencer

Avant de commencer, vérifiez que vous avez effectué les tâches prérequises suivantes :
  • Publier un magasin basé sur le modèle de magasin type Aurora.
  • Identifier le fichier JSP à utiliser pour afficher des recommandations dynamiques d'entrée de catalogue.

Pourquoi et quand exécuter cette tâche

Par défaut, deux exemples de pages JSP sont disponibles dans le magasin type Aurora et mis à jour pour prendre en charge l'affichage de recommandations dynamiques d'entrée de catalogue. Pour ajouter cette prise en charge, vous pouvez personnaliser l'un des fichiers JSP et JavaScript ci-après. Le fichier JavaScript fournit la prise en charge par défaut d'un nouveau magasin déployé et basé sur le modèle de magasin type Aurora.
fichier JSP Finalité
CategoryNavigationDisplay.jsp Fichier JSP utilisé lorsqu'un client consulte des catégories dans un catalogue du magasin.
SearchResultsDisplay.jsp Fichier JSP utilisé lors de l'exécution d'une recherche par mot clé avec des termes de recherche.
Ces fichiers JSP se trouvent dans le répertoire suivant :
  • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
  • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
store_dir est le nom de répertoire du magasin.
Vous devez également ajouter la prise en charge du fichier JavaScript suivant :
JavaScript Objectif
ProductRecommendation.js Fichier JavaScript définissant la fonction pour afficher des recommandations d'entrée de catalogue.
Ce fichier JavaScript se trouve dans le répertoire suivant :
  • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\javascript\widgets
  • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\javascript\widgets
store_dir est le nom de répertoire du magasin.

Procédure

  1. Définissez l'URL Ajax pour actualiser les recommandations d'entrée de catalogue. L'actualisation des recommandations entraîne celle des entrées de catalogue qui s'affichent. Celles-ci sont actualisées selon les choix de consultation ou de navigation du client qui visualise le magasin.
    1. Dans le programme de gestion de fichiers, accédez au répertoire qui contient les pages JSP de magasin dans lesquelles vous ajoutez la prise en charge :
      Par exemple,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
      store_dir est le nom de répertoire du magasin.
    2. Localisez le fichier JSP dans lequel vous voulez ajouter la prise en charge et ouvrez-le en édition.
    3. Dans ce fichier, localisez la section de code qui définit l'emplacement dans lequel vous voulez inclure un emplacement e-Marketing affichant des recommandations dynamiques d'entrée de catalogue. Définissez le mode de gestion des recommandations dynamiques.
    4. Ajoutez du code pour définir l'URL Ajax.
      Le code suivant définit l'URL Ajax dans le fichier JSP :
      <wcf:url var="ProdRecommendationRefreshViewURL" value="ProductRecommendationView" type="Ajax">
        <wcf:param name="emsName" value="${emsNameTemp}Row4_CatEntries" />
        <wcf:param name="pageSize" value="4" />
        <wcf:param name="commandName" value="CategoryDisplay" /> 
        <wcf:param name="langId" value="${langId}" />
        <wcf:param name="storeId" value="${storeId}" />
        <wcf:param name="catalogId" value="${catalogId}" />
        <wcf:param name="categoryId" value="${WCParam.categoryId}" />
        <wcf:param name="urlLangId" value="${urlLangId}" />
      </wcf:url>

      Par exemple, dans le fichier SearchResultsDisplay.jsp, le code précédent est inclus après le code qui définit l'affichage des résultats de recherche pour les produits et le contenu.

      L'URL type est Ajax. Tous les paramètres inclus dans le code précédent sont obligatoires :
      Paramètre Description
      pageSize Ce paramètre indique le nombre d'entrées de catalogue à renvoyer pour afficher une page.
      emsName Nom de l'emplacement e-Marketing.
      commandName Nom de la commande.
      langId Identificateur de la langue. Cet identificateur est utilisé pour cibler les résultats des recommandations d'entrée de catalogue sur la langue de consultation.
      storeId Identificateur du magasin. Cet identificateur est utilisé pour cibler les résultats des recommandations d'entrée de catalogue sur le magasin consulté.
      catalogId Identificateur du catalogue. Cet identificateur est utilisé pour cibler les résultats des recommandations d'entrée de catalogue sur le catalogue consulté.
      categoryId Identificateur de la catégorie. Cet identificateur est utilisé pour cibler les résultats des recommandations d'entrée de catalogue sur la catégorie en cours.
      urlLangId Identificateur de langue de l'URL. Cet identificateur est utilisé pour cibler les résultats des recommandations d'entrée de catalogue sur la langue de consultation.
    5. Sauvegardez vos modifications. Gardez le fichier ouvert pour édition.
  2. Incluez le fichier JavaScript des recommandations d'entrée de catalogue dans le fichier JSP pour afficher les recommandations dynamiques. Pour inclure ce fichier JavaScript, ajoutez le code suivant après le code de définition de l'URL Ajax :
    <script type="text/javascript" src="${jsAssetsDir}javascript/Widgets/ESpot/ProductRecommendation.js"></script>
    Sauvegardez vos modifications. Gardez le fichier ouvert pour édition.
  3. Définissez un contrôleur d'actualisation dans le fichier JavaScript qui définit la fonction de recommandation d'entrée de catalogue. Ce nouveau contrôleur d'actualisation doit être utilisé pour actualiser les recommandations d'entrée de catalogue. Accédez au répertoire qui contient la page JSP de magasin dans laquelle vous ajoutez la prise en charge :
    1. Accédez au répertoire qui contient le fichier JavaScript :
      Par exemple,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Layouts
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Layouts
      store_dir est le nom de répertoire du magasin.
    2. Ouvrez le fichier ProductRecommendation.js pour l'éditer.
    3. Après le code de définition de la fonction de recommandation d'entrée de catalogue, ajoutez le code suivant pour définir le contrôleur d'actualisation :
      // Declare refresh controller
      wc.render.declareRefreshController({
        id: "prodRecommendationRefresh_controller",
        renderContext: wc.render.getContextById("searchBasedNavigation_context"),
        url: "",
        formId: ""
        
        ,renderContextChangedHandler: function(message, widget) {
          var controller = this;
          var renderContext = this.renderContext;
          var resultType = renderContext.properties["resultType"];
          if(resultType == "products" || resultType == "both"){
            widget.refresh(renderContext.properties);
            console.log("espot refreshing");
          }
        }
      });

      Ce code appelle la fonction Ajax wc.render.declareRefreshController et définit le contrôleur d'actualisation comme prodRecommendationRefresh_controller.

    4. Sauvegardez et fermez votre fichier.
  4. Dans le fichier JSP, ajoutez le code permettant d'utiliser le nouveau contrôleur d'actualisation pour les recommandations d'entrée de catalogue. Pour utiliser ce contrôleur dans votre fichier JSP, ajoutez le code suivant après le code de définition de l'URL Ajax :
    <script type="text/javascript"> 
      dojo.addOnLoad(function(){
      wc.render.getRefreshControllerById('prodRecommendationRefresh_controller').url = '${ProdRecommendationRefreshViewURL}';
      });
    </script>

    Ce fragment de code appelle la fonction Ajax wc.render.getRefreshControllerById et définit le contrôleur d'actualisation ProdRecommendationRefresh_controller dans le fichier JSP. Ce code définit également l'URL du contrôleur sur une URL définie précédemment (par exemple, ProdRecommendationRefreshViewURL).

  5. Définissez une zone d'actualisation dans le fichier JSP pour afficher les recommandations d'entrée de catalogue. Pour définir cette zone, ajoutez les lignes de code suivantes dans le fichier, après le code d'utilisation du contrôleur d'actualisation :
    <div class="widget_product_listing_position">
      <c:if test="${!env_fetchMarketingDetailsOnLoad}">
        <div dojoType="wc.widget.RefreshArea" id="CategoryProductRecommendationESpot_Widget" controllerId="prodRecommendationRefresh_controller">
        <% out.flush(); %>
        <c:import url="${env_jspStoreDir}Widgets/ESpot/ProductRecommendation/ProductRecommendation.jsp">
          <c:param name="pageSize" value="4" />
          <c:param name="emsName" value="${emsNameTemp}Row4_CatEntries" />
          <c:param name="errorViewName" value="AjaxOrderItemDisplayView" />
          <c:param name="pageView" value="miniGrid"/>
        </c:import>
        <% out.flush(); %>
        </div>
      </c:if>
    </div>

    Ce code définit un widget d'interface utilisateur Zone d'actualisation. Par exemple, dojoType="wc.widget.RefreshArea". Utilisez ce widget pour actualiser les recommandations d'entrée de catalogue. Ce code définit également le contrôleur de la zone d'actualisation sur le contrôleur précédemment créé (controllerId="prodRecommendationRefresh_controller").

  6. Sauvegardez et fermez votre fichier.
  7. Modifiez le fichier JSP pour vérifier que l'emplacement e-Marketing s'affiche correctement :
    1. Dans le programme de gestion de fichiers, accédez au répertoire qui contient le fichier JSP d'affichage :
      Par exemple,
      • HCL Commerce Developerworkspace_dir\Stores\WebContent\store_dir\Widgets\CatalogEntry\CatalogEntryDisplay.jsp
      • LinuxAIXWindowsWC_eardir\Stores.war\store_dir\Widgets\CatalogEntry\CatalogEntryDisplay.jsp
      store_dir est le nom de répertoire du magasin.
    2. Localisez le fichier JSP et ouvrez-le en édition.
    3. Localisez le code qui détermine le mode d'affichage du contenu dans l'emplacement e-Marketing :
      <%@ include file="ext/CatalogEntryDisplay_UI.jsp">  
      Ajoutez le code suivant avant le code que vous avez localisé :
      <div class="product">
      Ajoutez le code suivant après le code qui détermine le mode d'affichage du contenu dans l'emplacement e-Marketing.
      </div>
    4. Sauvegardez vos modifications et fermez le fichier.
      Le code du fichier modifié peut ressembler au code suivant :
      <div class="product">
        <%@ include file="ext/CatalogEntryDisplay_UI.jsp">
        <c:if test = "${param.custom_view ne 'true'}">
          <c:choose>
            <c:when test = "${param.pageView == 'sidebar'}">
              <%@ include file="CatalogEntryDisplay_SideBarView_UI.jsp" %>
            </c:when>
            <c:when test = "${param.pageView == 'grid'}">
              <%@ include file="CatalogEntryDisplay_GridView_UI.jsp" %>
            </c:when>
            <c:when test = "${param.pageView == 'list'}">
              <%@ include file="CatalogEntryDisplay_ListView_UI.jsp" %>
            </c:when>
            <c:when test = "${param.pageView == 'miniList'}">
              <%@ include file="CatalogEntryDisplay_MiniListView_UI.jsp" %>
            </c:when>
            <c:when test = "${param.pageView == 'miniGrid'}">
              <%@ include file="CatalogEntryDisplay_MiniGridView_UI.jsp" %>
            </c:when>
            <c:otherwise>
              <%-- Default to mini grid view... --%>
              <%@ include file="CatalogEntryDisplay_MiniGridView_UI.jsp" %>
            </c:otherwise>
          </choose>
        </c:if>
      </div>

Que faire ensuite

Vérifiez auprès du directeur marketing (ou du professionnel) que celui-ci peut inclure, dans un emplacement e-Marketing sur la page du magasin mise à jour, l'action Recommandation d'entrée de catalogue d'une activité Web. Assurez-vous que le directeur marketing (ou le professionnel) confirme que les recommandations d'entrée de catalogue varient selon les choix de consultation effectués lors du test de l'activité Web.