Arquitectura de widgets de Commerce Composer

Los widgets son los componentes básicos intercambiables que un usuario del Management Center puede utilizar para componer diseños para las páginas de tienda. Los widgets son módulos independientes de la interfaz de usuario que recuperan y visualizan un tipo de datos específicos en una página de tienda.

Página de ejemplo con widgets — Figura 1. Diseño que contiene varios widgets. La siguiente imagen ilustra un diseño de página que se crea utilizando una selección de widgets.

Un widget tiene dos componentes:

Los componentes del escaparate, que incluyen una unidad JSP compilable que recupera y visualiza datos en una página de tienda. Los archivos JSP pueden personalizarse para que se visualicen de forma diferente y para que visualicen diferente contenido, en base a las propiedades configurables que hayan seleccionado los usuarios de empresa. Si los archivos JSP del widget siguen patrones de diseño web sensibles, el widget, también puede utilizarse en las páginas de tienda que se visualizan para cualquier clase de dispositivo (móvil, tableta, escritorio). La colocación en memoria caché y el rendimiento del widget del escaparate también debe tenerse en consideración al personalizar los componentes del escaparate para un widget.
Los componentes del Management Center, que proporcionan una vista de propiedades a los usuarios de empresa. Los usuarios pueden seleccionar cualquier propiedad configurable en esta vista, para especificar cómo se visualiza el widget, y qué muestra el widget. La herramienta Commerce Composer, que se utiliza para gestionar los widgets, permite salvar y recuperación fácilmente la información de propiedad del widget. Las propiedades y los controles de widget que los usuarios de empresa configuran los recuperan los componentes del escaparate del widget, para determinar la visualización del escaparate del widget.

Para obtener información general sobre widgets, consulte

Widgets a nivel de tienda y nivel de sitio

Para que un widget pueda utilizarse con la herramienta Commerce Composer, los widgets deben registrarse en la base de datos de la infraestructura de Commerce Composer. Los widgets pueden registrarse para su uso a nivel de sitio o a nivel de tienda.

Widgets a nivel de sitio: Los widgets a nivel de sitio pueden compartirse entre tiendas. Un widget puede registrarse a nivel de sitio, para su uso por parte de todas las tiendas. De forma predeterminada, todos los widgets de Commerce Composer están registrados a nivel de sitio. Una tienda debe suscribirse a un widget a nivel de sitio para que éste pueda incluirse en una página esas tiendas.
Widgets a nivel de tienda: Los widgets a nivel de tienda están registrados para que los utilice una tienda individual. La tienda debe suscribirse a un widget a nivel de tienda para poder utilizar el widget.
Los widgets a nivel de tienda pueden registrarse para su uso por parte de un grupo de tiendas cuando el widget se ha registrado para una tienda de elementos. Al registrar un widget para una tienda de elementos, el widget se registra para todos los sitios ampliados que utilicen dicha tienda de elementos. Además, si la tienda con elementos se suscribe al widget, éste lo pueden utilizar todas las tiendas de sitio ampliado. El widget no está disponible para las tiendas que pertenezcan a una tienda con elementos diferente.

Desarrollo de widgets personalizados

Los widgets están compuestos de varios componentes, incluidos los componentes del escaparate y del Management Center. Su empresa puede crear widgets personalizados para añadirlos a la biblioteca de widgets, definiendo el escaparate, el Management Center y la información de los datos del widget. También debe usar el programa de utilidad de carga de datos para cargar los datos de registro y de suscripción de un widget. Para obtener más información sobre la creación de widgets, consulte Creación de widgets de Commerce Composer.

Su empresa puede utilizar los widgets que creen proveedores de terceros, si los widgets se crean para que funcionen con la herramienta Commerce Composer. Para poder utilizar un widget de terceros, éste debe registrarse dentro de la infraestructura de Commerce Composer, y la tienda debe suscribirlo.

Componentes del escaparate

Los componentes del escaparate de un widget consta del archivo JSP de nivel superior para el widget, los proveedores de interfaz de usuario y un proveedor de datos. Al definir los proveedores de la interfaz de usuario y el proveedor de datos en archivos distintos, existe una clara separación de datos y componentes de presentación para el widget. Como resultado, la personalización o actualización de un widget es más fácil, y el código se vuelve a utilizar.

Marcador de diagrama — Figura 2. Componentes del escaparate de widgets. El siguiente diagrama ilustra cómo interactúan los principales componentes del escaparate de un widget.

1 En el escaparate, se llama y se ejecuta el archivo JSP de nivel superior. La definición del widget dentro del archivo JSP de nivel superior identifica el proveedor de datos y los proveedores de interfaz de usuario para el widget.
2 El archivo JSP de nivel superior utiliza el fragmento de JSP del proveedor de datos para recuperar datos de la base de datos utilizando el bean de datos, servicio o llamadas REST.
3 El archivo JSP de nivel superior se utiliza para determinar el fragmento de JSP del proveedor de interfaz de usuario adecuado para representar los datos que se recuperar con el proveedor de datos. La definición de widget puede definir un proveedor de interfaz de usuario o incluir lógica de modo que los usuarios del Management Center puedan seleccionar al proveedor de interfaz de usuario.
4 El widget se representa en la página de tienda utilizando el proveedor de interfaz de usuario seleccionado.

JSP de nivel superior

La infraestructura de Commerce Composer llama a la JSP de nivel superior para recuperar la funcionalidad y el contenido del widget cuando éste se incluye en una página de tienda. El archivo JSP define los siguientes componentes y propiedades para un elemento:

Archivo de configuración de entorno
Proveedor de datos
Los proveedores de interfaz de usuario y la lógica que la infraestructura de Commerce Composer utiliza para seleccionar el proveedor de la interfaz de usuario.
Propiedades predefinidas
Propiedades configurables que puede definir un usuario del Management Center
Valores predeterminados para propiedades

Cuando se está representando una página de tienda, el archivo JSP de nivel superior del widget se recupera y utiliza mediante un código wcpgl:widgetImport que se incluye en la página de tienda. La JSP de nivel superior para un widget está registrada como parte de la definición de widget con la base de datos de HCL Commerce.

Proveedor de datos

Un archivo de proveedor de datos es un fragmento de JSP que define cómo recuperar los datos necesarios para el widget. Cada widget debe tener sólo un único archivo de proveedor de datos. El archivo de proveedor de datos individual para el widget se utiliza con todos los archivos del proveedor de interfaz de usuario que se han definido para el widget. La utilización de un archivo de proveedor de datos individual permite que varias instancias de un widget contengan los mismos datos pero que se representen de forma distinta.

Proveedor de interfaz de usuario

El proveedor de interfaz de usuario es un fragmento de JSP que define cómo representar los datos que se recuperan para un widget. Un widget puede dar soporte a varios archivos de proveedor de interfaz de usuario para que los datos para el widget puedan representarse de varias formas. Cada forma en que el widget puede representarse debe definirse dentro de un archivo de proveedor de interfaz de usuario distinto. Por ejemplo, puede crear un widget de recomendación de productos personalizado que tenga dos proveedores de interfaz de usuario:

Proveedor de interfaz de usuario horizontal para representar el widget horizontalmente
Proveedor de interfaz de usuario vertical para representar el widget verticalmente

Si existen varios proveedores de interfaz de usuario para un widget, la infraestructura de Commerce Composer selecciona el proveedor de interfaz de usuario correcto que se debe utilizar. La infraestructura selecciona el widget basado en las propiedades configurables que un usuario del Management Center define y la lógica dentro del archivo JSP de nivel superior.

Componentes adicionales del escaparate

Puede utilizar CSS, imágenes y JavaScript para personalizar la funcionalidad de un widget personalizado. La hoja de estilo en cascada y las imágenes se especifican con sentencias include en el archivo JSP de nivel superior, mientras que los archivos JavaScript se identifican dentro del XML de definición.

Los archivos JavaScript definen las acciones de usuario que se incluyen en el widget
La hoja de estilo en cascada define botones, recuadros de texto o botones de selección que deben visualizarse

Todos los componentes del escaparate para un widget se incluyen dentro del mismo paquete de código. Si alguna hoja de estilo en cascada, imagen o algún elemento JavaScript es compartido por varios widgets, el elemento se almacena en un directorio común.

Componentes del Management Center

Cuando un usuario del Management Center añade un widget a una ranura de plantilla de diseño, el usuario del Management Center visualiza la vista de propiedades de un widget para su configuración.

Figura 3. Vista de propiedades del widget. Vista de propiedades de ejemplo de un widget

La vista de propiedades visualiza la siguiente información:

El nombre de widget que identifica el widget en el diseño actual y explica cómo se utiliza el widget. Por ejemplo, puede utilizar un widget para visualizar una imagen de banner de página, un área de productos en liquidación, y más.
Las propiedades del widget son propiedades de par nombre-valor adicionales opcionales que la infraestructura de Composer Commerce almacena dentro de la tabla de base de datos PLWIDGETNVP. Cuando un widget se representa dentro de un diseño, el valor de las propiedades se pasa al almacén de archivos JSP, para ayudarle a determinar cómo se visualiza el widget.
El contenido del widget incluye las propiedades opcionales del widget, que se almacenan externamente desde la infraestructura de Commerce Composer. Por ejemplo, algunos widgets proporcionados de forma predeterminada crean una zona de e-Marketing que muestra contenido o una actividad web predeterminados. Estas propiedades no se almacenan en la infraestructura de Commerce Composer, pero la infraestructura proporciona clases de gestor de widget (mediadores) que se utilizan para guardar algunos datos relativos al marketing.

Cuando un usuario guarda los valores de propiedad, los valores de la propiedad junto con la información de plantilla de diseño y ranura se guarda en la tabla de base de datos PLWIDGETNVP. Si un widget tiene propiedades que están definidas que deben guardarse en una tabla distinta a la tabla PLWIDGETNVP, se utiliza la clase de gestor de widgets para determinar cómo guardar el valor de la propiedad. La clase de gestor de widgets también se utiliza para recuperar de la base de datos la información de valores de propiedades guardada.

Para obtener más información sobre las propiedades que están disponibles y se utilizan para los widgets que se proporcionan de forma predeterminada, consulte Propiedades de widget de Commerce Composer.

Para que un widget se puede utilizar en el Centro de gestión, debe definirse una definición de objeto, definición de vista de propiedades y cualquier texto traducible para el widget:

Definición de objeto del widget: La definición de objeto del widget. La definición de objeto del widget se basa en la clase wcfWidgetObjectDefinition, que es una extensión de la clase wcfChildObjectDefinition. wcfWidgetObjectDefinition amplía la clase wcfChildObjectDefinition para que incluya las propiedades WidgetDisplayGroups y helpLink. La clase wcfChildObjectDefinition es una subclase directa de la clase wcfObjectDefinition. La clase wcfWidgetObjectDefinition, como la clase wcfChildObjectDefinition, describe un objeto de negocio. La definición de objeto de widget describe un objeto de negocio de widget y contiene los metadatos sobre el widget que el Management Center necesita.
Definición de la vista de propiedades: Este archivo define las propiedades de widgets que puede definir un usuario del Management Center. Una propiedad puede utilizarse para recuperar datos, determinar el estilo de representación o proporcionar la configuración general del widget.
Archivo de propiedades del diseño de página: El archivo PageLayoutLOB.properties define las series de texto que se muestran en la vista de propiedades. Cualquier texto traducible correspondiente al widget se define en diferentes archivos de propiedades de texto específicos del idioma. Este archivo de propiedades se registra dentro del paquete de recursos PageLayoutResourceBundle.lzx. Este paquete de recursos se incluye la biblioteca de paquetes de recursos PageLayoutExtensionsLibrary.lzx.

Gestor de widgets

Cuando el usuario añade un widget a una ranura, el usuario podrá establecer los valores para las propiedades configurables del widget. Cuando el usuario guarda los valores de propiedades, los valores se guardan con información para asociar el widget y el diseño si el valor de propiedad en la tabla de base de datos PLWIDGETNVP.PLWIDGETNVP Algunas propiedades configurables deben guardarse en tablas de base de datos distintas. Una clase de gestor de widget se utiliza para determinar cómo guardar los valores de propiedades. El gestor de widgets también se utiliza para validar los valores y recuperar los valores los valores cuando el widget se está representando en el escaparate. Cuando un usuario selecciona editar un widget dentro de un diseño, ReadWidgetManager recupera la información de identificador de widget. A continuación, el gestor de widgets recupera los valores de propiedad de widget que son específicos para el diseño. La clase del gestor de widgets se especifica en el XML de definición para un widget.

Si está creando widgets personalizados que utilicen datos relativos al marketing, puede utilizar una clase de gestor de widgets que se proporciona para guardar los datos. Si las clases de gestor de widgets proporcionadas no guardan los datos que su widget requiera, puede crear una clase de gestor de widgets personalizado (mediador) para manejar los datos. Para obtener más información sobre la clase de gestor de widgets, consulte Definir una clase del gestor de widgets de Commerce Composer.

Grupos de widgets

Los grupos de widgets son conjuntos de widgets con los que puede categorizar sus widgets personalizados, con dos finalidades:

Grupos de visualización de widgets

Se utiliza para organizar widgets en la herramienta Commerce Composer para ayudar a los usuarios del Management Center a filtrar la lista de widgets. En el Management Center, los widgets se visualizan dentro de la ventana Añadir widgets a ranuras en la herramienta Commerce Composer. Los usuarios del Management Center pueden seleccionar un widget en la ventana Añadir widgets a ranuras para añadir el widget a una ranura de plantilla de diseño. La ventana Añadir widgets a ranuras incluye todos los widgets a los que se suscribe una tienda y que están registrados en la infraestructura de Commerce Composer. Los widgets incluidos en esta ventana también se agrupan en grupos de visualización de widgets para mejorar el filtrado para localizar un widget. Al crear widgets personalizados, puede incluir los widgets dentro de estos grupos predeterminados, o crear sus propios grupos. Por ejemplo, si añade un tipo de página a la herramienta Commerce Composer, es posible que desee crear un grupo para ese tipo de página. El nuevo grupo puede incluir todos los widgets que un usuario del Centro de gestión puede añadir a ranuras de plantilla de diseño para ese nuevo tipo de página.

Un widget puede incluirse en varios grupos de visualización de widgets. De forma predeterminada están disponibles los siguientes grupos de widgets:

AnyPage: Conjunto de widgets que pueden utilizarse en cualquier página.
CategoryPage: Conjunto de widgets que pueden utilizarse en las páginas de categoría.
CatalogEntryPage: Conjunto de widgets que pueden utilizarse en las páginas de entradas de catálogo.
SearchPage: Conjunto de widgets que pueden utilizarse en una página de resultados de búsqueda.

Para obtener más información sobre la creación de un grupo de widgets, consulte Crear grupos de widget de Commerce Composer.

Figura 4. Ventana Añadir widgets a ranuras. En la imagen siguiente se proporciona una vista de ejemplo de la ventana Añadir widgets a ranuras con la lista desplegable de los grupos de visualización de widgets predeterminados.

Grupos de restricción de widgets

Se utilizan para restringir las ranuras en plantillas de diseño de modo que sólo incluyan widgets de grupos de widgets definidos. Por ejemplo, en una plantilla de diseño para una página de categorías, puede que desee restringir una ranura en la barra lateral izquierda de modo que sólo incluya los widgets de Navegación de categorías y Navegación por facetas. Los grupos de widgets que pueden incluirse dentro de una ranura se definen en la columna PROPERTIES de la tabla PLWIDGETSLOT. Puede añadir un widget a un grupo de restricción de widgets actualizando el XML de definición del widget. Los administradores pueden usar el programa de utilidad de carga de datos para actualizar el XML de definición, y actualizar los grupos a los que pertenece un widget.

Un widget puede incluirse en varios grupos de restricción de widgets. De forma predeterminada, no obstante, sólo se utiliza el grupo de widgets siguiente como un grupo de restricción:

WidgetForTabTitle: Conjunto de widgets para utilizarlo como título de pestaña en una plantilla de diseño que incluye ranuras con pestañas. Este nombre de grupo no se visualiza en la herramienta Commerce Composer. Este grupo se define como sólo un grupo de restricción de widgets. Este nombre de grupo se utiliza para identificar los widgets que pueden incluirse como un título para una ranura con pestañas de plantilla de diseño. Cuando un usuario selecciona incluir un widget en una ranura que esté restringida a este grupo, sólo los widgets que estén dentro de este grupo se visualizarán como disponibles. De forma predeterminada, en este grupo sólo se incluye el widget de Editor de texto. Todas las plantillas de diseño que incluyan ranuras con pestañas como, por ejemplo, la plantilla de diseño Cualquier página, ocho ranuras, pestañas, restringir los títulos de pestaña para que incluyan únicamente los widgets que pertenezcan a este grupo.

Puede definir un grupo de widgets, incluidos grupos de visualización de widgets proporcionados de forma predeterminada, que se utilizarán como un grupo de visualización de widgets y también como un grupo de restricción de widgets. Para obtener más información sobre la creación de un grupo de widgets, consulte Crear grupos de widget de Commerce Composer.

Widgets adaptativos

De forma predeterminada, todos los widgets que están en la biblioteca de widgets de Commerce Composer son sensibles. Los widgets sensibles se visualizan según los tamaños de pantalla de dispositivo. Por ejemplo, el widget de navegación por facetas se expande automáticamente a medida que los tamaños de visualización se hacen mayores.

Un widget adaptativo no tiene una anchura fija. Cuando coloque un widget sensible en una ranura de una plantilla, la anchura del widget se ajustará automáticamente para albergar el contenido dentro de la ranura. La mayoría de los widgets sensibles no tienen una altura fija. Puede utilizar los widgets sensibles en las plantillas de diseño sensibles, así como en las plantillas móviles y de escritorio que contenga anchos de diseño fijos.

Si ha creado un widget personalizado, puede hacer que el widget sea sensible. Para obtener más información, consulte Crear un widget sensible.

Para obtener más información sobre los widgets sensibles, consulte Widgets adaptativos.

Almacenamiento en memoria caché

Los widgets de su tienda y de su sitio pueden almacenarse en la memoria caché, para mejorar el rendimiento del escaparate. Cada widget que se proporciona de forma predeterminada tiene una entrada del archivo cachespec.xml que establece los parámetros de colocación en memoria caché del widget. No obstante, no todos los widgets se almacenan la memoria caché de forma predeterminada. Que un widget se almacene en la memoria caché, y la forma en que se haga, depende de la funcionalidad del mismo. Para obtener más información sobre cómo almacenar en memoria caché los widgets de Commerce Composer, consulte Almacenamiento en memoria caché e invalidación de widget de Commerce Composer.