Creación de una tienda personalizada mediante React

Puede crear una tienda de aplicación de página única de React mediante el HCL Commerce Store SDK que se proporciona para páginas y componentes de reAct. La Store SDK permite a los desarrolladores de front-end desarrollar y desplegar rápidamente una tienda mientras se centra en crear la mejor experiencia de usuario posible.

El Store SDK se crea a partir de dos componentes:

Una aplicación de React que desarrolla y despliega un desarrollador front-end mediante el Store SDK.
Un modelo de datos de tienda (tienda de sitio ampliado [eSite], tienda con elementos de catálogo [CAS] y la tienda con elementos de escaparate [SAS]) que publica el desarrollador front-end o el administrador de sitio con el contenido asociado que crean los usuarios de empresa y, a continuación, se publica un modelo de tienda con datos mediantes las herramientas de publicación de tienda.

Aplicación de la tienda React

El Store SDK se proporciona para que los desarrolladores creen React Store application para mostrar el escaparate.

El Store SDK incluye una infraestructura de base que proporciona la integración con los servicios REST HCL Commerce, el mantenimiento de estados de sesión, la activación de sucesos de marketing y la gestión de los recursos del navegador. El desarrollador front-end puede interactuar con la infraestructura de base directamente para recuperar y enviar datos a HCL Commerce o buscar y centrarse principalmente en la interfaz de usuario de los componentes para ensamblar páginas en el escaparate.

También se incluye con Store SDK las Reference Store application para ilustrar las funciones proporcionadas por la infraestructura de base y las implementaciones de ejemplo de la interfaz de usuario de la tienda mediante bibliotecas de React comunes. Los Reference Store application se implementan como una aplicación de página única (SPA) en la que los archivos de JavaScript estáticos se cargan en el navegador y la representación de página y las llamadas de servicio de REST se ejecutan en el navegador. Los Reference Store application comparten una base de código común pero se crean y se despliegan por separado:

Aplicación de tienda Esmeralda con flujo de tienda B2C y elementos y estilos de la interfaz de usuario verdes.
Aplicación de tienda Zafiro con flujo de tienda B2B y elementos y estilos de la interfaz de usuario azules.

Los clientes deben sustituir la interfaz de usuario por sus propios elementos, ya que se proporcionan solo como ejemplos y no están diseñados para un uso completo de producción. Los clientes pueden codificar flujos de tienda personalizados basándose en los datos que se devuelven o envían a través de servicios personalizados e incluso personalizar la infraestructura de base para sus propias integraciones de programa de fondo. Para obtener más información sobre Reference Store application, consulte Tiendas de React de referencia.

Reference Store application se ha creado para resaltar las funciones de los servicios y fundamentos de Commerce, incluido lo siguiente:

Uso de API de REST de Elasticsearch V2 mejoradas que siguen los estándares del sector con funciones de memoria caché y de filtrado avanzado.
API de URL que habilitan los URL y metadatos de SEO que gestionan los usuarios de empresa para que aparezcan en las páginas.
Habilitación de zonas de e-Marketing en cualquier página para que los usuarios de empresa añadan recomendaciones de contenido, producto o categoría.
Soporte para aplicaciones web progresivas (PWA) que habilitan la infraestructura de código común para plataformas de escritorio y móviles.
Carga dinámica o carga lenta de componentes de React.

Note: Las páginas React Store se ensamblan a partir de componentes por parte del desarrollador frontal. El usuario de empresa no tiene la capacidad de modificar estas páginas mediante la funcionalidad proporcionada por Commerce Composer.

Modelo de datos de tienda

La creación de un React Store se completa al publicar el modelo de datos de tienda para incluir el eSite (tienda de cara al cliente), las CA y las SA que hacen referencia al React Store application que ha creado el desarrollador de front-end. El proceso de publicación de tienda incluye un nuevo archivo EmeraldDataTemplate.zip que puede utilizar para publicar un modelo de tienda autónomo en el que los usuarios de empresa pueden gestionar contenido y datos dentro de las herramientas de negocio y hacer que se represente mediante la aplicación de React que está acoplada a la tienda. Para obtener más información, consulte Publicación de unReact Store.

Una vez que el modelo de tienda está disponible, los usuarios de empresa pueden gestionar y mantener contenido y datos para el React Store mediante las funciones que ya se han proporcionado en nuestras herramientas. Las siguientes funcionalidades están bajo el control del usuario de empresa:

Herramienta Catálogos para gestionar catálogos de ventas, categorías y productos.
URL de SEO y metadatos de página para todas las categorías y productos.
Funciones de carga de datos o carga de catálogo.
Promociones que incluyen promociones basadas en PromoCode.
Las zonas de e-Marketing que se correlacionan con componentes específicos en la React Store application, incluida la recomendación de productos, la recomendación de categorías y la recomendación de contenido.
Filtros de catálogo y fijación de precios
Herramientas Gestión de tiendas
Vista previa de la tienda.
Regla de búsqueda.
Gestión de contratos

Note: La herramienta Commerce Composer está inhabilitada para modelos de tienda autónomos como React Store.

Roles y responsabilidades

El equipo de negocio y los desarrolladores front-end deben colaborar para crear y desplegar la aplicación de tienda personalizada.


Rol:	Responsabilidad	Tareas
Desarrollador front-end	Cree un React Store application con un Store SDK y un modelo de despliegue de servidor web que pueda representar páginas.	Descargue el Store SDK. Cree su React Store application personalizado. Cree y despliegue el React Store application.
Equipo de empresa Administrador de sitio Diseñador de sitio Equipo de catálogo Equipo de marketing Otras partes interesadas	Publicar una tienda de compras Gestione todos los datos y contenido (catálogos, categorías y productos, promociones y marketing, etc.).	Publique una React Store. El administrador de sitio debe conocer el nombre del React Store application para publicar el modelo de datos de tienda. Publicar varios sitios ampliados (tiendas ampliadas). Varias tiendas o sitios ampliados pueden utilizar el mismo React Store application. Por ejemplo, puede tener tiendas diferentes en función de los sitios de país, idioma, marca, región, B2B o B2C y empleado. Obtenga una vista previa de la tienda para asegurarse de que el contenido y los datos correctos están asociados a la tienda.

Proceso para crear la personalización React Store application

La creación de React Store application personalizado consta de los siguientes pasos principales: