Store SDK estructura

El Store SDK incluye todos los componentes, widgets, formularios de interfaz de usuario, etc., que son necesarios para empezar a desarrollar la tienda de React personalizada.

El Store SDK proporciona un entorno de desarrollo con Reference Store application para una tienda basada en B2C denominada Esmeralda y una tienda basada en B2B denominada Zafiro. Las Reference Store application comparten código común por sí solas y solo difieren en el estilo, los mensajes y los flujos de página. Las aplicaciones utilizan bibliotecas de Reat comunes disponibles para los desarrolladores front-end para diversas funciones, incluido el direccionamiento y la visualización. El diseño visual de la aplicación de React proporciona el control de páginas y diseños al desarrollador front-end de React mientras interactúa con contenido de marketing, productos y datos de categoría, y metadatos de página de SEO gestionados por los usuarios de empresa desde las herramientas de HCL Commerce Management Center.

HCL Commerce Version 9.1.7.0 or later
Note: A partir de la versión 9.1.7.0, storybook se elimina del proyecto SDK de tienda React y se añade al paquete SDK de componente de la interfaz de usuario. Por lo tanto, no se puede ejecutar npm run storybook desde el proyecto SDK de la tienda React.
HCL Commerce Version 9.1.10.0 or laterNote: A partir de HCL Commerce versión 9.1.10.0 y posteriores, los paquetes tar-gzip no se proporcionan con el paquete git. El código fuente de estos paquetes está disponible en carpetas individuales de la subcarpeta packages.
En la tabla siguiente se describen los archivos y las carpetas en Store SDK.
Table 1. Estructura de carpetas para la Store SDK
Nombre de la carpeta: Descripción
simulacros Archivos de respuestas JSON de simulacro para ejecutar la tienda en modalidad de simulacro. El servidor de simulacros utiliza esta carpeta como entrada y proporciona las respuestas simuladas según la URL de la API REST.
src/mocks Archivo de datos simulados para su uso en las pruebas unitarias.
activos Activos digitales que incluyen imágenes de catálogo de muestra, contenidos de marketing, plantillas de archivos .env, etc. HCL Commerce Version 9.1.7.0 or laterA partir de la versión 9.1.7.0, la internacionalización (i18n) o las cadenas de traducción se trasladan a esta carpeta.
docs La carpeta de documentos contiene maquetas anotadas del escaparate, información genérica sobre el proceso de construcción, consejos para las pruebas unitarias y recomendaciones.
src/_foundation Incluye la lógica base que utiliza la aplicación de React. Por ejemplo, los componentes para consumir las API de REST, servicio de HTTP de Axios y sus configuraciones, servicios SEO, etc.

Incluso cuando se personalizan otras partes de la tienda, esta carpeta debe estar retenida. Sin embargo, los archivos de esta tienda no son suficientes para ejecutar una tienda mínima por sí mismos.
src/_foundation/apis El archivo del servicio cliente de la API HTTP REST generado a través del generador de Open API (https://openapi-generator.tech/).
src/_foundation/axios Estamos utilizando la biblioteca Axios (https://www.npmjs.com/package/axios) para llamar a los servicios de la API REST. Esta carpeta contiene las configuraciones y ajustes para Axios.
src/_foundation/constants Constantes estáticas que se utilizan en el módulo de la fundación y están relacionadas con él.

HCL Commerce Version 9.1.7.0 or later/src/_foundation/context

 Proveedor de contexto para las páginas de e-spot y de productos.

HCL Commerce Version 9.1.4.0 or latersrc/_foundation/gtm

 Servicios REST relacionados con Etiqueta de Google Analytics.
src/_foundation/guard Archivo del componente LoginGuard para la protección de la página frente a usuarios como los invitados, los registrados, etc.
src/_foundation/hooks Enganches personalizados que se utilizan en los widgets del Compositor de páginas, los servicios del sitio, etc.
src/_foundation/seo Componente de SEO responsable de llamar a la API de URLs, redirigir al diseño correcto de la página, establecer los metadatos para SEO, etc.
src/_foundation/utils Componente utilitario responsable de las operaciones de lectura/escritura en los almacenamientos locales y de sesión del navegador.
src/components/StyledUI/ Componentes de interfaz de usuario con estilo. Aunque la mayoría de los componentes de la Interfaz de usuario con estilo fueron trasladados al paquete de componentes de react del SDK local de NPM, estos son los restos. En el futuro, los componentes restantes se trasladarán a los paquetes locales de NPM y se eliminará esta carpeta.
src/_tests_ Archivo de pruebas unitarias de componentes React. El archivo de prueba de la unidad está aquí: sample/reference file.

HCL Commerce Version 9.1.4.0 or latersrc/_dev/api-diagram

 La carpeta de extensión de desarrollo showAPIFlow contiene la lógica de implementación para mostrar el diagrama de flujo de la API.
/src/components/footer Componente de pie de página de la tienda.
src/components/header Componente de la cabecera de la tienda.

HCL Commerce Version 9.1.7.0 or latersrc/components/commerce-layouts

 Diseños de Compositor de páginas.
src/components/layouts Diseños distintos a los del Compositor de páginas que se utilizan para mostrar las cuentas, el panel de control, las páginas de inicio de sesión, etc.
src/components/pages Componentes de la página de URL estática como Cuenta, Libreta de direcciones, Cesta de la compra, etc.
src/Components/pages-SEO Los componentes de página de navegación de catálogo incluyen las páginas Categoría, Listado de productos y Detalles del producto.

Cuando el componente SEO maneja un URL y se dirige al componente de página adecuado para visualizar el contenido de la página, redirige a las páginas presentes en esta carpeta.

HCL Commerce Version 9.1.7.0 or latersrc/components/commerce-widgets

 Widgets del Compositor de páginas.
src/Components/widgets Componentes de widgets utilizados en páginas como Cuenta, Libreta de direcciones, Pago, etc.

HCL Commerce Version 9.1.4.0 or latersrc/components/extensions

 La carpeta de extensión del modo de desarrollo. El componente de extensión se encarga de llamar al digrama de la API. Este archivo será sobrescrito durante la construcción de producción por la plantilla bajo assets\template\production\src\components\extensions.
src/pages Páginas comunes que comparten las Reference Store application Esmeralda (B2C) y Zafiro (B2B) .
src/pages/_emerald/ Páginas que aplican solo para la Reference Store application Esmeralda (B2C).
src/pages/_sapphire Páginas que aplican solo para la Reference Store application Zafiro (B2B).

src/components/pages/home/homeConstant.ts

src/components/pages-seo/category/categoryConstant.ts

src/components/header/headerConstant.ts

src/components/footer/footerConstant.ts

 eSpotNames para zonas de e-Marketing que se visualizan en la tienda de ejemplo.
src/configs Archivos de configuración. Por ejemplo, configuraciones de rutas para el enrutador de React, diseños predeterminados para Compositor de páginas, etc.
src/constantes Constantes estáticas que se utilizan habitualmente en el SDK de la tienda React.
src/redux Componentes de Redux y Redux-Saga, archivos relacionados con la lógica de gestión de estado.
src/redux/action-types Todos los tipos de acción a los que hacen referencia las acciones de Redux
src/redux/actions Todas las acciones de Redux.
src/redux/reducers Todos los reductores de Redux, incluida la definición de interfaz y los estados iniciales.
src/redux/sagas Biblioteca Redux-Saga relacionada con la lógica para manejar efectos secundarios asíncronos.
src/redux/sagas/watchers Los vigilantes de Redux-Saga para vigilar las acciones que se han enviado.
src/redux/sagas/workers Los trabajadores de Redux-Saga para manejar acciones.
src/redux/selectors Selectores para los estados de Redux.
src/redux/store Configuración de middleware y creación de la tienda Redux.
src/testing Configuración del servidor REST simulado y gestor REST para las pruebas unitarias. Componente de utilidad de pruebas unitarias que anula la función de renderización por defecto de la biblioteca de pruebas de React.
src/themes Temas para las Reference Store application Esmeralda (B2C) y Zafiro (B2B).
src/utils Programas de utilidad comunes que se utilizan en ambas tiendas.
src/App.tsx, App.scss El componente de aplicación principal y el archivo scss de la aplicación de React para la tienda.
src/animate.css La biblioteca de archivos animate.css de http://daneden.me/animate .
src/i18n.ts Archivo de internacionalización para manejar el soporte de varios idiomas para la interfaz de usuario y los mensajes.
src/index.tsx, src/index.scss El punto de entrada principal para la aplicación de React de la tienda.
src/react-app-env.d.ts react-app-env.d.ts hace referencia a los tipos de react-scripts y ayuda con las tareas como permitir las importaciones SVG.
src/serviceWorker.ts Archivo que se genera automáticamente y que es un script que el cliente (navegador) ejecuta en segundo plano, independientemente de la página web. También se puede utilizar para PWA, para que la aplicación trabaje fuera de línea y se cargue más rápido.

Para obtener más información, consulte https://bit.ly/CRA-PWA.

src/setupProxy.js Archivos de configuración proxy y de simulacro para ejecutar los Reference Store application en modalidad de desarrollo.
src/setupTests.ts Implementaciones simuladas JEST para SiteInfoService que se utilizan en las pruebas unitarias.
herramientas Varios scrips de programa de utilidad para ejecutar el servidor de simulacro y crear e iniciar las tiendas de ejemplo de React.
src/logo.svg Logotipo de React
.env, .env.test Todos los archivos de variables de entorno a los que hace referencia el servidor de nodos mientras se ejecuta React Store application en la modalidad de desarrollo.
.prettierrc.yaml

.prettierignore

 Archivo de configuración relacionado con el plugin del formateador de código Prettier de Visual Studio Code.
package-lock.json

package.json

 Archivo que utiliza NPM/nodo para gestionar dependencias de proyecto, ejecutar y crear proyectos y otras configuraciones relacionadas con el proyecto.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-react-component-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/react-component

HCL Commerce Version 9.1.7.0 or laterEl archivo fuente del paquete local NPM para la interfaz de usuario con estilo, los diseños de Compositor de páginas, los widgets, los temas, los elementos, otros componentes, etc. Aquí {{version}} representa la versión del HCL Commerce fixpack, es decir, 9.1.7, 9.1.8 o 9.1.9

HCL Commerce Version 9.1.10.0 or laterEs la carpeta del área de trabajo NPM que contiene el archivo fuente para la interfaz de usuario con estilo, los diseños de Compositor de páginas, los widgets, los temas, los elementos, otros componentes, etc.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-typescript-axios-es-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/typescript-axios-es

HCL Commerce Version 9.1.7.0 or laterEs el archivo fuente del paquete local de NPM para el archivo del servicio cliente REST de Elasticsearch generado por el generador de API abiertas. Aquí {{version}} representa la versión del HCL Commerce fixpack, es decir, 9.1.7, 9.1.8 o 9.1.9

HCL Commerce Version 9.1.10.0 or laterEs la carpeta del área de trabajo NPM que contiene el archivo fuente para el archivo del servicio cliente REST de búsqueda de Elasticsearch generado por el generador de API abiertas.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-typescript-axios-transaction-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/typescript-axios-transaction

HCL Commerce Version 9.1.7.0 or laterEs el archivo fuente del paquete local de NPM para el archivo de servicio del cliente REST del servidor de transacciones generado por el generador de API abiertas. Aquí {{version}} representa la versión del HCL Commerce fixpack, es decir, 9.1.7, 9.1.8 o 9.1.9

HCL Commerce Version 9.1.10.0 or laterEs la carpeta del área de trabajo NPM que contiene el archivo fuente para el archivo del servicio cliente REST de servidor de transacción generado por el generador de API abiertas.

HCL Commerce Version 9.1.7.0 or laterhcl-commerce-store-sdk-utils-{{version}}.tgz

HCL Commerce Version 9.1.10.0 or later<bundle-root>/packages/utils

HCL Commerce Version 9.1.7.0 or laterEs el archivo fuente del paquete local de NPM para los componentes de utilidades. Aquí {{version}} representa la versión del HCL Commerce fixpack, es decir, 9.1.7, 9.1.8 o 9.1.9

HCL Commerce Version 9.1.10.0 or laterEs la carpeta del área de trabajo NPM que contiene el archivo de origen para los componentes del programa de utilidad.
tsconfig.json Archivo de configuración TypeScript.
.storybook En el SDK de la tienda React, la configuración del storybook se proporciona con uno o dos componentes de muestra y elementos básicos de interfaz de usuario. Se trata de una función opcional que permite añadir nuevas historias consultando el enlace de documentación oficial https://storybook.js.org/.
husky.config.js Archivo de configuración de biblioteca Husky NPM.

Husky puede impedir una confirmación Git errónea, la transmisión de Git, etc. Para obtener más detalles, consulte https://www.npmjs.com/package/husk
.husky Carpeta de configuración de la biblioteca npm de Husky. Para obtener más detalles, consulte https://www.npmjs.com/package/husky.
licencia HCL Commerce Archivos de acuerdos y de licencia.
README.md El archivo Readme que es el punto de inicio sobre cómo configurar y utilizar React Store Store SDK.
UPDATES.md El archivo de información sobre el historial de cambios de React Store Store SDK y las actualizaciones de la versión.
readmeImages Esta carpeta contiene las imágenes utilizadas en el archivo Readme.
.gitattributes, .gitignore Archivos de configuración relacionados con Git.
.eslintrc Archivo de configuración de ESlint. Para más detalles sobre ESlint, consulte el sitio web oficial https://eslint.org/.