HCL Commerce Infrastructure AJAX

Quatre scénarios courants sont impliqués avec l'infrastructure AJAX HCL Commerce :

1. Un appel AJAX est exécuté sur le Transaction server pour mettre à jour un objet métier. Des sections de la page sont actualisées avec un nouveau contenu si la mise à jour réussit. Le nouveau contenu est extrait en utilisant les appels AJAX suivants sur le Transaction server.
2. Un appel AJAX est émis pour actualiser une section de la page du fait de certaines interactions avec le client.
3. Un appel AJAX est exécuté sur le Transaction server pour mettre à jour un objet métier. Des sections de la page doivent être actualisées avec le nouveau contenu si la mise à jour réussit. Le nouveau contenu est extrait en utilisant les appels AJAX suivants sur le Transaction server. La procédure est identique à celle du premier scénario, mais au lieu que le code soit modulaire, une approche pesant moins sur le trafic sur le serveur est nécessaire.

   Dans ce scénario, un appel AJAX est exécuté sur le serveur HCL Commerce pour mettre à jour un objet métier. Des sections de la page sont actualisées avec un nouveau contenu si la mise à jour réussit. Toutes les informations nécessaires à l'actualisation du contenu de la page sont renvoyées sous forme d'objet JSON. Le client dispose alors du contenu de l'objet JSON et utilise l'API de manipulation DOM pour modifier toutes les zones de la page qui doivent être modifiées du fait de la mise à jour réussie.

4. Un appel AJAX est exécuté sur le Transaction server et les données JSON sont demandées. Des sections de la page sont ensuite mises à jour à l'aide de JavaScript et de l'API de manipulation DOM.

L'infrastructure AJAX HCL Commerce n'est pas nécessaire pour le troisième et le quatrième scénario, car ces scénarios peuvent être exécutés directement en utilisant l'API jQuery AJAX.

Scénario 1 : Mise à jour d'un objet métier dans HCL Commerce à l'aide d'AJAX, puis actualisation de différentes zones en utilisant les demandes AJAX suivantes pour obtenir les contenus actualisés

Schéma des interactions lorsque vous appelez des commandes du contrôleur HCL Commerce :

Schéma des interactions lorsque vous appelez des services HCL Commerce :

1. Exécution d'un appel AJAX dans une commande ou un service de contrôleur HCL Commerce

Avant que le client puisse appeler une commande ou un service de contrôleur HCL Commerce en utilisant AJAX, le Transaction server doit définir que la commande ou le service du contrôleur peut être appelé en utilisant AJAX (au lieu du modèle de programmation classique lorsque la demande est effectuée et que l'exécution de HCL Commerce implique une nouvelle redirection).

Pour qu'une commande de contrôleur ou un service soient aptes à recevoir des demandes du type AJAX, définissez simplement une nouvelle entrée d'action Struts dans le fichier XML de configuration Struts. Dans cette entrée, identifiez la commande de contrôleur ou le service en tant qu'action du type AJAX. Par exemple, pour créer une action Struts pour la commande de contrôleur InterestItemAdd qui peut être appelé en utilisant AJAX, elle doit être définie dans le fichier XML de configuration Struts :

<action
  parameter="com.ibm.commerce.interestitems.commands.InterestItemAddCmd"
  path="/AjaxInterestItemAdd"
  type="com.ibm.commerce.struts.AjaxAction">
    <set-property property="authenticate" value="0:0"/>
    <set-property property="https" value="0:1"/>
</action>

<action class="com.ibm.commerce.struts.v2.AjaxAction" name="AjaxInterestItemAdd">
<param name="authenticate">0:0</param>
<param name="https">0:1</param>
<param name="parameter">com.ibm.commerce.interestitems.commands.InterestItemAddCmd</param>
</action>

<action 
  parameter="order.addOrderItem" 
  path="/AjaxOrderChangeServiceItemAdd" type="com.ibm.commerce.struts.AjaxComponentServiceAction">
    <set-property property="authenticate" value="0:0"/>
    <set-property property="https" value="0:1"/>
</action>

<action class="com.ibm.commerce.struts.v2.AjaxComponentServiceAction" name="AjaxOrderChangeServiceItemAdd">
<param name="authenticate">0:0</param>
<param name="https">0:1</param>
<param name="parameter">order.addOrderItem</param>
</action>

wcService.declare({
  id: "AjaxInterestItemAdd",
  actionId: " AjaxInterestItemAdd",
  url: " AjaxInterestItemAdd",
  formId: "",
successHandler: function(serviceResponse) {
      alert("success");	
    },
failureHandler: function(serviceResponse) {
    if (serviceResponse.errorMessage) {
      alert(serviceResponse.errorMessage);
    }
  } 
});

  wcService.invoke("AjaxInterestItemAdd");

2. Exécution d'appels AJAX dans les vues HCL Commerce pour obtenir un contenu actualisé

<div wcType="RefreshArea"
   id="WishlistSelect_Widget" 
   declareFunction="declareRefreshArea()"
   refreshurl="<c:out value="${WishListSelectAreaView}"/>">
</div>

function declareRefreshArea () {
   var myWidgetObj = $("#WishlistSelect_Widget")
   var myRCProperties = wcRenderContext.getRenderContextProperties("WishlistSelect_Context");
   
   var renderContextChangedHandler = function() {
   };

   // model change
   wcTopic.subscribe(order_updated, function() {
   myWidgetObj.refreshWidget("refresh", myRCProperties);
   });

   // post refresh handler
   var postRefreshHandler = function() {
   };

   // initialize widget with properties
   $("#"+divId).refreshWidget({
      renderContextChangedHandler: renderContextChangedHandler,
      postRefreshHandler: postRefreshHandler
   });

}

Scénario 2 : Actualisation d'une zone de la page à l'aide d'une demande AJAX pour obtenir le contenu actualisé

Les zones de la page doivent être actualisées avec le nouveau contenu lorsque les utilisateurs interagissent avec l'interface utilisateur. Ce scénario utilise l'API de contexte de rendu, de zone et de contrôleurs d'actualisation à partir de l'infrastructure AJAX de HCL Commerce.

Un objet contexte de rendu assure le suivi des informations de contexte du programme client et peut déclencher des événements renderContextChanged chaque fois que l'une quelconque de ses propriétés est mise à jour. Les contrôleurs d'actualisation sont automatiquement inscrits comme écouteurs de tous les événements renderContextChanged. La logique d'un contrôleur d'actualisation détermine si la modification du contexte doit déclencher une mise à jour d'un widget de zone d'actualisation. Par conséquent, dans l'élément renderContextChangedHandler d'un contrôleur d'actualisation, l'API est utilisée pour comparer les propriétés de contexte testForChangedRC afin de déterminer si la propriété de contexte est modifié, puis de déclencher l'actualisation de la zone d'actualisation.

Scénario 3 : Mise à jour d'un objet métier dans HCL Commerce à l'aide d'AJAX et renvoi de toutes les informations de mise à jour pertinentes à l'aide de JSON

var parameters = {};
  parameters.storeId = storeId;
  parameters.langId=langId;
  parameters.catalogId=catalogId;
  parameters.catentryId=productId;	
  parameters.URL="MiniCartContentsJSON";
parameters.errorViewName="MiniCartContentsJSON";
  $.ajax({
    url: "OrderChangeServiceItemAdd",
    method: "post",				
    dataType: "json",
    data: parameters,
    success: refreshMiniCart,
    error: function(jqXHR,textStatus, err) {
    }
  });

La fonction load utilise l'objet JSON et l'API de manipulation DOM pour remplacer tous les éléments dans la page qui doit être mise à jour avec les nouvelles données qui ont entraîné la mise à jour du serveur. Il n'est pas nécessaire d'enregistrer les URL sous AjaxAction, car ce scénario n'utilise pas les nouvelles infrastructures AJAX de HCL Commerce.

Scénario 4 : Appel du Transaction server en utilisant AJAX pour rassembler de nouvelles données comme objet JSON et actualisation du contenu des pages

Ce scénario peut être obtenu en utilisant directement l'API jQuery. Par conséquent, il n'est pas nécessaire d'utiliser l'infrastructure AJAX de HCL Commerce si ce scénario présente un intérêt pertinent. L'API jQuery est utilisée avec le modèle de programmation d'exécution HCL Commerce classique, dans lequel une demande est exécutée dans une vue mappée à un fichier JSP qui crée un objet JSON. Dans la fonction load de l'API AJAX, l'API de manipulation DOM est utilisée pour insérer le contenu JSON dans les éléments de la page Web.