Crear los archivos JSP, archivos de proveedor de interfaz de usuario y archivos de proveedor de datos para el widget de Commerce Composer. Estos elementos de escaparate definen el aspecto y el contenido del widget.
Procedimiento
Parte A: Traslade los archivos de código fuente generados para los elementos de escaparate del widget a un paquete de código dentro de la estructura de archivos de espacio de trabajo predeterminadas de HCL Commerce Developer.
-
En la vista Explorador de empresa, cree un directorio para que contenga los paquetes de código para widgets personalizados.
Dentro de este directorio, cree el paquete de código que va a contener todos los elementos para el widget personalizado que no se comparten entre varios widgets. Si el sitio tiene varios widgets personalizados, asegúrese de que los elementos de cada widget personalizado están en paquetes de código separados.
Los paquetes de código que definen los widgets a nivel de sitio predeterminados están en el siguiente directorio:
- workspace_dir\crs-web\WebContent\widgetdir
Los archivos y fragmentos JSP que se comparten entre varios widgets están almacenados en el directorio
Common, dentro del directorio
widgetdir.
Si está creando un widget a nivel de sitio personalizado, cree el directorio siguiente, si el directorio no existe:
- workspace_dir\crs-web\WebContent\Widgets-vendor
Si está creando un widget a nivel de tienda personalizado, cree un directorio específico de la tienda que contiene el directorio
Widgets-vendor si el directorio no existe:
- workspace_dir\crs-web\WebContent\store\Widgets-vendor
Donde
store es el nombre del directorio de tienda, por ejemplo
aurora.
Si el widget personalizado tiene elementos que son comunes en varios widgets, pero los elementos todavía no están incluidos en el directorio Widgets\Common predeterminado, incluya estos elementos en el directorio Common en el directorio Widgets-vendor. Si este directorio Common no existe, debe crearlo.
-
Copie los archivos de código fuente generados para los elementos de escaparate del widget de la carpeta de destino en la estructura de archivos de espacio de trabajo predeterminado de HCL Commerce Developer.
-
Vaya al proyecto donde la Transformación JET ha generado los archivos de código fuente en la tarea anterior. Copie la siguiente estructura de archivos y los archivos que están dentro de la carpeta de destino:
- target_folder\crs-web\WebContent\Widgets-vendor\Common
- target_folder\crs-web\WebContent\Widgets-vendor\images
- target_folder\crs-web\WebContent\Widgets-vendor\Properties
- target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\javascript
- target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier.jsp
- target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier_Data.jspf
- target_folder\crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\identifier_UI.jspf
- target_folder\crs-web\WebContent\Widgets-vendor\Properties\MyWidgetText_en_US.properties
- target_folder\crs-web\WebContent\Widgets-vendor\Properties\MyWidgetText.properties
Donde
- vendor
- El valor del parámetro
vendor dentro del archivo XML de entrada de patrón.
- identifier
- El valor del parámetro
identifier dentro del archivo XML de entrada de patrón.
- target_folder
- La carpeta o el proyecto especificado como valor para el parámetro
targetFolder en el archivo XML de entrada de patrón. Si no ha especificado un valor para el parámetro targetFolder, la target_folder es la carpeta o el proyecto donde se encuentra el archivo XML de entrada de patrón.
-
Fusione la estructura de archivos y los archivos copiados en la estructura de archivos de espacio de trabajo predeterminado de HCL Commerce Developer. No sobrescriba archivos ni carpetas.
Si está creando un widget a nivel de tienda, añada el directorio Widgets-vendor y el contenido del directorio en el directorio crs-web\WebContent\store. Donde store es el nombre del directorio de tienda.
Parte B: Modifique los archivos de código fuente generados para completar la definición de los elementos de escaparate para el widget personalizado.
-
Complete el archivo JSP de nivel superior de punto de entrada para el widget personalizado.
Este archivo JSP identifica el archivo de configuración de entrada, el proveedor de datos y el proveedor de interfaz de usuario que se van a importar para representar el widget. Si el widget requiere varios proveedores de interfaz de usuario, el archivo JSP de nivel superior incluye el código que especifica las condiciones en las que cada proveedor de interfaz de usuario se utiliza para representar el widget.
La vía de acceso de archivo a este archivo JSP de nivel superior debe registrarse con el identificador del widget en la infraestructura de Commerce Composer. El archivo JSP de nivel superior se importa en diseños de Commerce Composer cuando un widget se asigna a un diseño. Cuando un diseño que incluye el widget se asigna a una página de tienda, el archivo JSP de nivel superior se utiliza para llamar a los componentes para que proporcionen la función del widget.
-
Vaya al siguiente directorio fusionado:
- Para widgets a nivel de sitio - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
-
Abra el archivo identifier.jsp para editarlo.
De forma predeterminada, el archivo de código fuente generado incluye el código siguiente para ayudarle a definir el archivo JSP de nivel superior para el widget:
<%-- The following code is created as an example. Modify the generated code and add any additional required code. --%>
<%-- BEGIN identifier.jsp --%>
1
<%@include file="/Widgets/Common/EnvironmentSetup.jspf"%>
2
<fmt:setBundle basename="/Widgets-vendor/Properties/mywidgettext" var="mywidgettext" />
<c:set var="widgetPreviewText" value="${mywidgettext}"/>
<c:set var="emptyWidget" value="false"/>
3
<%@include file="identifier_Data.jspf"%>
4
<c:if test="${env_inPreview && !env_storePreviewLink}">
<jsp:useBean id="previewWidgetProperties" class="java.util.LinkedHashMap" scope="page" />
<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
</c:if>
5
<%@ include file="/Widgets/Common/StorePreviewShowInfo_Start.jspf" %>
6
<%@ include file="identifier_UI.jspf"%>
5
<%@ include file="/Widgets/Common/StorePreviewShowInfo_End.jspf" %>
<%-- END identifier.jsp --%>
- 1 El archivo de configuración de entorno. Este archivo de configuración se utiliza durante la ejecución. Este archivo recupera y prepara la vía de acceso de la página JSP, la vía de acceso del archivo y el paquete de recursos para el widget. A este archivo lo llaman muchos archivos JSP de la tienda y lo comparten varios widgets. De forma predeterminada, el archivo /Widgets/Common/EnvironmentSetup.jspf se especifica.
- 2 El paquete de recursos de propiedades para el widget. Un archivo de propiedades es un paquete de recursos que contiene el texto traducible para visualizar en el widget. De forma predeterminada, se especifica el archivo \Widgets-vendor\Properties\MyWidgetText.properties generado.
- 3 Identifica el proveedor de datos que se va a utilizar para recuperar el contenido para utilizarlo en el widget. De forma predeterminada se establece el proveedor de datos identifier_Data.jspf generado.
- 4 La sentencia condicional determina si el widget se visualiza en la vista previa de la tienda. Si el widget se visualiza en la vista previa de la tienda, este código añade la lógica para garantizar que las propiedades del widget se utilicen para representar el widget durante la vista previa de la tienda. El campo name identifica la propiedad configurable.
- 5 Los archivos StorePreviewShowInfo_Start.jspf y StorePreviewShowInfo_End.jspf añaden soporte para mostrar información sobre el widget cuando se visualiza éste en la vista previa de la tienda. Las sentencias de inclusión para estos archivos deben incluir la sentencia de inclusión y la lógica que define la información de visualización para el widget.
- 6 Identifica el proveedor de interfaz de usuario que se utilizará para representar el widget en una página de tienda. De forma predeterminada se establece el proveedor de interfaz de usuario identifier_UI.jspf generado.
Modificar el archivo JSP generado de nivel superior. Cambie cualquiera de los valores predeterminados o especifique más propiedades de modo que satisfaga los requisitos para el widget personalizado.
- Opcional:
Si el widget requiere varios proveedores de interfaz de usuario, incluya sentencias condicionales para definir las condiciones cuando cada proveedor de interfaz de usuario se va a utilizar.
Puede definir propiedades configurables para permitir a los usuarios del
Management Center seleccionar el estilo de representación. Utilice los valores para las propiedades configurables como las condiciones dentro de las sentencias condicionales. Por ejemplo, el siguiente código establece las condiciones que indican cuando se debe utilizar cada proveedor de interfaz de usuario para representar el widget de Recomendación de entradas de catálogo.
1
<c:if test="${!empty catentryIdList}">
<c:choose>
2
<c:when test="${param.widgetOrientation eq 'vertical'}">
<%@include file="CatalogEntryRecommendation_Vertical_UI.jspf"%>
</c:when>
3
<c:otherwise>
<%@include file="CatalogEntryRecommendation_Horizontal_UI.jspf"%>
</c:otherwise>
</c:choose>
</c:if>
El archivo JSP de nivel superior
CatalogEntryRecommendation.jsp especifica que el widget de recomendación de entradas de catálogo puede representarse de forma distinta en función de qué proveedor de interfaz de usuario se utilice para representar el widget.
- 1 Sentencia condicional para comprobar que una vista personalizada no está establecida para el widget y que existen recomendaciones que se deben recuperar para su visualización dentro del widget. Si se cumple la condición, el archivo JSP de nivel superior utiliza las sentencias condicionales que deben comprobarse para seleccionar el proveedor de interfaz de usuario adecuada para representar el widget.
- 2 Sentencia condicional que sirve para probar si el parámetro de orientación del widget se establece en
'vertical'. Si el valor se establece en 'vertical', CatalogEntryRecommendation_Vertical_UI.jspf se utiliza el para representar el widget. Los usuarios de empresa pueden establecer el valor para el parámetro de orientación del widget en el Management Center.
- 3 Si el parámetro de orientación del widget no se establece en
'vertical', se utiliza CatalogEntryRecommendation_Horizontal_UI.jspf para representar el widget.
Si no se especifica ninguna lista de entradas de catálogo, las recomendaciones recuperadas se representan con el proveedor de interfaz de usuario
CatalogEntryRecommendation_Horizontal_UI.jspf. Si se especifica una lista de entradas de catálogo en el widget, las recomendaciones pueden representarse con el proveedor de interfaz de usuario
CatalogEntryRecommendation_Vertical_UI.jspf o
CatalogEntryRecommendation_Horizontal_UI.jspf.
- Opcional:
Si define las propiedades para el widget, defina una correlación
previewWidgetProperties para mostrar las propiedades en la ventana Información de widget para el widget en la vista previa de la tienda.
Utilice el siguiente formato para definir la correlación
previewWidgetProperties:
<c:if test="${env_inPreview && !env_storePreviewLink}">
<jsp:useBean id="previewWidgetProperties" class="java.util.LinkedHashMap" scope="page" />
<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
<c:set target="${previewWidgetProperties}" property="name" value="${param.name}" />
</c:if>
Donde
name- El nombre de la propiedad para el widget personalizado. Por ejemplo,
widgetOrientation. Este nombre de propiedad corresponde a una clave en el paquete de recursos de propiedades. Si la clave no se encuentra, el nombre proporcionado se muestra en la ventana Información de widget.
value- El valor para cada propiedad puede corresponder a una clave en el paquete de recursos de propiedades con el formato
name_value. Si la clave no se encuentra en el paquete de recursos de propiedades, el valor proporcionado se muestra en la ventana Información de widget.
Asegúrese de incluir las propiedades correspondientes dentro del paquete de recursos de propiedades al
añadir soporte del Management Center para el widget.
- Opcional:
Si el widget personalizado debe utilizar datos generados por un widget distinto, puede utilizar un suceso wcTopic para recuperar la información para el widget personalizado.
- Opcional:
Si el widget personalizado debe generar datos para que los utilicen otros widgets, puede utilizar un suceso wcTopic para publicar los datos.
-
Guarde el archivo.
Como ejemplo de un archivo JSP de nivel superior, el siguiente código define el archivo JSP de nivel superior,
Heading.jsp, para el widget de cabecera:
<!-- BEGIN Heading.jsp -->
<%@ include file="/Widgets/Common/EnvironmentSetup.jspf" %>
<c:set var="emptyWidget" value="false"/>
<%@include file="Heading_Data.jspf"%>
<%@ include file="/Widgets/Common/StorePreviewShowInfo_Start.jspf" %>
<%@include file="Heading_UI.jspf"%>
<%@ include file="/Widgets/Common/StorePreviewShowInfo_End.jspf" %>
<wcpgl:pageLayoutWidgetCache/>
<!-- END Heading.jsp -->
Para obtener un ejemplo de un archivo JSP de nivel superior para un widget que utiliza actividades de marketing, consulte el archivo JSP de nivel superior del widget de Recomendación de contenido.
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation.jsp
-
Defina el fragmento de JSP del proveedor de datos para el widget personalizado.
El archivo JSP de nivel superior llama al archivo del proveedor de datos para recuperar los datos que se necesitan para representar el widget. Un widget puede tener únicamente un proveedor de datos, que se modela como una página JSP independiente.
-
Vaya al siguiente directorio fusionado:
- Para widget a nivel de sitio - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
-
Abra el archivo identifier_Data.jspf para editarlo.
De forma predeterminada, el archivo de código fuente generado está vacío. Añada el código para definir los datos que se van a recuperar para el widget personalizado. Si el widget personalizado utiliza los mismos datos que un widget existente, utilice el archivo del proveedor de datos para el widget existente para ayudar a definir el archivo para el widget personalizado.
Para localizar el archivo de proveedor de datos para un widget existente, vaya al directorio crs-web\WebContent\widgetdir. Expanda el directorio y el paquete de código para un widget existente. Abra identifier_Data.jspf para el widget existente.
Si está convirtiendo un archivo JSP de tienda existente para que sea un widget, utilice el contenido del archivo JSP para ayudarle a definir la información del proveedor de datos para el widget. Revise el archivo JSP e identifique el código que está relacionado con los datos. Modifique e incluya este código relacionado con datos en el archivo de proveedor de datos para el widget. Si el archivo JSP que está convirtiendo tiene sentencias de inclusión o importación, mueva los archivos JSP a los que se hace referencia al directorio crs-web\WebContent\Widgets-vendor\Common. Actualice las referencias en el archivo de proveedor de datos de modo que haga referencia a las nuevas vías de acceso de archivo.
-
Guarde el archivo.
Como ejemplo de un fragmento de JSP de proveedor de datos, el siguiente código define el archivo de proveedor de datos,
Heading_Data.jspf, para el widget de cabecera:
<%-- BEGIN Heading_Data.jsp --%>
<%-- Try to get product description --%>
<c:set var="productId" value="${param.productId}" />
<c:if test="${empty productId}">
<c:set var="productId" value="${WCParam.productId}" />
</c:if>
<c:choose>
<c:when test="${!empty productId}">
<%-- Try to get it from our internal hashMap --%>
<c:set var="key1" value="${productId}+getCatalogEntryViewAllByID"/>
<c:set var="catalogEntryDetails" value="${cachedCatalogEntryDetailsMap[key1]}"/>
<c:if test="${empty catalogEntryDetails}">
<wcf:rest var="catalogNavigationView"
url="${searchHostNamePath}${searchContextPath}/store/${WCParam.storeId}/productview/byId/${productId}" >
<wcf:param name="langId" value="${langId}"/>
<wcf:param name="currency" value="${env_currencyCode}"/>
<wcf:param name="responseFormat" value="json"/>
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
</wcf:rest>
<c:set var="catalogEntryDetails" value="${catalogNavigationView.catalogEntryView[0]}"/>
</c:if>
<c:if test="${!empty catalogEntryDetails}">
<c:set var="productName" value="${catalogEntryDetails.name}" />
<c:set var="catalogEntryID" value="${catalogEntryDetails.uniqueID}" />
</c:if>
</c:when>
<c:otherwise>
<%-- Try to get category name --%>
<c:set var="categoryId" value="${param.categoryId}" />
<c:if test="${empty categoryId}">
<c:set var="categoryId" value="${WCParam.categoryId}" />
</c:if>
<c:if test="${!empty categoryId}">
<wcf:rest var="catGroupDetailsView"
url="${searchHostNamePath}${searchContextPath}/store/${WCParam.storeId}/categoryview/byId/${categoryId}" >
<wcf:param name="langId" value="${langId}"/>
<wcf:param name="currency" value="${env_currencyCode}"/>
<wcf:param name="responseFormat" value="json"/>
<wcf:param name="catalogId" value="${WCParam.catalogId}"/>
</wcf:rest>
</c:if>
<c:if test="${!empty catGroupDetailsView}">
<c:set var="categoryName" value="${catGroupDetailsView.catalogGroupView[0].name}"/>
</c:if>
</c:otherwise>
</c:choose>
<c:if test="${empty productId && empty categoryId}">
<c:set var="emptyWidget" value="true" />
</c:if>
<c:set var="widgetSuffix" value="" />
<c:if test="${(!empty param.pgl_widgetSlotId) && (!empty param.pgl_widgetDefId) && (!empty param.pgl_widgetId)}">
<c:set var="widgetSuffix" value="_${param.pgl_widgetSlotId}_${param.pgl_widgetDefId}_${param.pgl_widgetId}" />
</c:if>
<%-- END Heading_Data.jsp --%>
Para obtener un ejemplo de un archivo de proveedor de datos para un widget que utiliza actividades de marketing, consulte el fragmento de JSP de proveedor de datos del widget de Recomendación de contenido:
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Data.jspf
-
Defina el fragmento JSP de proveedor de interfaz de usuario para el widget personalizado.
Cada forma en que el widget personalizado puede representarse debe definirse dentro de un archivo de proveedor de interfaz de usuario. Por ejemplo, si el widget personalizado puede representarse tanto con una orientación horizontal como vertical, debe definir dos archivos de proveedor de interfaz de usuario. Asegúrese de que la lógica que define el proveedor de interfaz de usuario se incluya dentro del archivo JSP de nivel superior.
-
Vaya al siguiente directorio fusionado:
- Para widgets a nivel de sitio - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\com.vendor.commerce.store.widgets.identifier
-
Abra el archivo identifier_UI.jspf para editarlo.
De forma predeterminada, el archivo de código fuente generado incluye el código siguiente para ayudarle a definir el archivo de proveedor de interfaz de usuario para el widget:
<%-- Add your UI code here, see example below --%>
1
<div id="widgetExample" >
<ul style="list-style: none; font-size: 24px">
<li>${param.name}</li>
</ul>
</div>
- 1 Ejemplo para demostrar cómo estructurar el fragmento JSP de proveedor de interfaz de usuario.
-
Modifique el fragmento de JSP de proveedor de interfaz de usuario generado.
Identifique las distintas divisiones,
<div/>, que deben definirse para representar el widget. Añada código para definir cómo puede representarse cada división Asegúrese de que incluye los efectos de representación como parámetros de importación JSP en el código. Al incluir los efectos como parámetros, los usuarios del
Management Center pueden especificar qué efectos de representación se van a utilizar para representar el widget en el escaparate.
Si está convirtiendo un archivo JSP de tienda existente para que sea un widget, utilice el contenido del archivo JSP para definir la información de proveedor de interfaz de usuario para el widget. Revise el archivo JSP e identifique el código relacionado con la representación del archivo JSP. Modifique e incluya el código que está relacionado con la representación del archivo JSP dentro del archivo de proveedor de interfaz de usuario para el widget. Si el archivo JSP que está convirtiendo tiene sentencias de inclusión, mueva los archivos JSP a los que se hace referencia al directorio crs-web\WebContent\Widgets-vendor\Common. Actualice las referencias en el archivo de proveedor de datos de modo que haga referencia a las nuevas vías de acceso de archivo.
-
Guarde el archivo.
Como ejemplo de un fragmento de JSP de proveedor de interfaz de usuario, el siguiente código define el archivo de proveedor de interfaz de usuario
Heading_UI.jspf para el widget de cabecera:
<%-- BEGIN Heading_UI.jsp --%>
<div id="PageHeading<c:out value="${widgetSuffix}"/>" >
<h1>
<c:choose>
<c:when test="${!empty categoryName}">${categoryName}</c:when>
<c:when test="${!empty productName}">${productName}</c:when>
</c:choose>
</h1>
</div>
<%-- END Heading_UI.jsp --%>
Para obtener un ejemplo de un archivo de proveedor de interfaz de usuario para un widget que utiliza actividades de marketing, consulte los fragmentos de JSP de proveedor de interfaz de usuario del widget de Recomendación de contenido. El widget de Recomendación de contenido utiliza cuatro fragmentos de JSP de proveedor de interfaz de usuario para definir todas las formas en que el widget puede representarse.
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_UI.jspf
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Email_UI.jspf
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_URLLink_UI.jspf
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentRecommendation\ContentRecommendation_Vertical_UI.jspf
-
Defina el texto traducible que se va a mostrar en el escaparate para el widget personalizado.
-
Vaya al directorio crs-web\WebContent\Widgets-vendor\Properties.
-
Abra MyWidgetText.properties generado para su edición. De forma predeterminada, el archivo incluye la siguiente propiedad:
WidgetTypeDisplayText_identifier=displayName
-
Añada el texto traducible para el widget en el archivo.
-
Guarde el archivo.
-
Repita los pasos anteriores para editar el archivo MyWidgetText_en_US.properties para añadir texto traducible para el idioma inglés de Estados Unidos.
- Opcional:
Añada el texto que depende del idioma para el widget en otros idiomas a los que da soporte la tienda. Cree los archivos de propiedades para los idiomas adicionales con el convenio de denominación MyWidgetText_language.properties
Incluir todos los elementos que no se comparten entre varios widgets en el paquete de código para el widget. Esto incluye todos los archivos JSP, JavaScript y CSS.
-
Cree o mueva los archivos CSS del widget.
Si el widget utiliza un archivo CSS existente, asegúrese de que el archivo se encuentre en el directorio apropiado para la tienda. Para obtener más información sobre la estructura de archivos de los archivos CSS para los widgets de Commerce Composer, consulte
Estructura de archivos de la tienda de inicio Aurora sensibles.
Si debe crear un archivo CSS para el widget, considere definir la CSS para que siga las prácticas de diseño web sensible. Para obtener más información sobre cómo definir la CSS para hacer que un widget sea sensible, consulte Creación de widgets sensibles.
- Opcional:
Si el widget personalizado necesita una imagen para visualizarla en el escaparate, incluya la imagen dentro del directorio crs-web\WebContent\Widgets-vendor\images.
- Opcional:
Cree todas las funciones JavaScript que sean necesarias para el widget personalizado.
Por ejemplo, la adición de soporte para añadir productos al carro de la compra. Si el widget necesita funciones JavaScript, puede crear un nuevo archivo para incluir todo el JavaScript necesario. Cree el archivo JavaScript dentro del siguiente directorio:
- Para widgets a nivel de sitio - crs-web\WebContent\Widgets-vendor\com.vendor.commerce.store.widgets.identifier\javascript
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\om.vendor.commerce.store.widgets.identifier\javascript
Si el archivo JavaScript es compartido por varios widgets personalizados, añada el archivo en el siguiente directorio:
- Para widgets a nivel de sitio - crs-web\WebContent\Widgets-vendor\Common
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\Common
Si el widget es un widget a nivel de sitio, mueva los elementos al directorio
Common en el nivel de sitio.
Para recuperar y utilizar JavaScript para el widget, asegúrese de que el XML de definición de widget para el widget haga referencia al archivo JavaScript.
Para obtener un ejemplo de un elemento JavaScript para un widget, consulte el archivo JavaScript de widget de recomendación de entradas de catálogo.
- crs-web\WebContent\widgetdir\com.ibm.commerce.store.widgets.CatalogEntryRecommendation\javascript\CatalogEntryRecommendation.js
- Opcional:
Si el widget personalizado utiliza un archivo, fragmento u otro elemento de JSP, mueva el elemento al directorio común. Asegúrese de que el widget haga referencia a la nueva vía de acceso de archivo.
- Para widgets a nivel de sitio - crs-web\WebContent\Widgets-vendor\Common
- Para widgets a nivel de tienda - crs-web\WebContent\store\Widgets-vendor\Common
Si el widget es un widget a nivel de sitio, mueva los elementos al directorio
Common en el nivel de sitio.
- Opcional:
Si está convirtiendo un archivo JSP de tienda existente en un widget, edite el archivo JSP de tienda existente y elimine el código que ha convertido en un widget. Actualice el archivo JSP de modo que llame a la herramienta Commerce Composer para que proporcione contenido para la tienda incluyendo el widget personalizado en la página con el siguiente código:
<c:import url= "${path to the widget top-level JSP file}"/>
