Store SDK structure

Le Store SDK tous les composants, widgets, formulaires d'interface utilisateur, etc., nécessaires pour commencer à développer votre magasin React personnalisé.

Le Store SDK fournit un environnement de développement avec des Reference Store application pour un magasin basé sur B2C appelé Emerald et un magasin basé sur B2B appelé Sapphire. Les Reference Store application elles-mêmes partagent un code commun et diffèrent seulement dans le style, les messages et les flux de page. Les applications utilisent des bibliothèques React communes disponibles pour les développeurs frontaux pour diverses fonctionnalités, y compris pour le routage et l'affichage. La conception visuelle de l'application React donne le contrôle des pages et des présentations au développeur frontal React en interagissant avec le contenu marketing, les produits et les données de catégorie, ainsi que les métadonnées de page de référencement gérées par les utilisateurs professionnels à partir d'outils HCL Commerce Management Center.

Note: A partir de la version 9.1.7.0, storybook est supprimé du projet SDK de magasin React et il est ajouté au package SDK du composant d'interface utilisateur. Par conséquent, vous ne pouvez pas exécuter npm run storybook à partir du projet SDK du magasin React.

Note: A partir de HCL Commerce version 9.1.10.0, les packages tar-gzip ne sont pas fournis avec le groupement git. Le code source de ces packages est disponible dans des dossiers individuels du sous-dossier packages.

La table ci-dessous décrit les fichiers et les dossiers dans le Store SDK.

Table 1. Structure du dossier pour le Store SDK
Dossier	Description
mocks	Fichiers de réponse JSON fictif pour l'exécution du magasin en mode fictif. Le serveur simulé utilise ce dossier comme entrée et fournit les réponses simulées en fonction de l'URL de l'API REST.
src/maquettes	Fichier de données simulé à utiliser dans le test d'unité.
documents	Les actifs numériques, y compris les exemples d'images de catalogue, les contenus marketing, les modèles de fichier .env et ainsi de suite. A partir de la version 9.1.7.0, les chaînes d'internationalisation (i18n) ou de traduction sont déplacées vers ce dossier.
docs	Le dossier de documents contient des maquettes de vitrine annotées, des informations génériques sur le processus de génération, des conseils de test unitaire et des recommandations.
src/_foundation	Contient la logique de base utilisée par l'application React. Par exemple, les composants pour consommer des API REST, le service Axios HTTP et ses configurations, les services de référencement et ainsi de suite. Même lorsque d'autres parties du magasin sont personnalisées, ce dossier doit être conservé. Cependant, les fichiers de ce magasin ne sont pas suffisants pour exécuter eux-mêmes un magasin minimal.
src/_foundation/apis	Fichier de service client d'API REST HTTP généré via le générateur Open API (https://openapi-generator.tech/).
src/_foundation/axios	Nous utilisons la bibliothèque Axios (https://www.npmjs.com/package/axios) pour appeler des services d'API REST. Ce dossier contient les configurations et les paramètres pour Axios.
src/_foundation/constants	Constantes statiques utilisées dans le module de base et qui y sont liées.
/src/_foundation/context	Fournisseur de contexte pour les pages d'e-spot et de produit.
src/_foundation/gtm	Services REST liés au balisage Google Analytics.
src/_foundation/guard	Fichier de composant LoginGuard pour la protection des pages des utilisateurs tels que les utilisateurs invités, les utilisateurs enregistrés, etc.
src/_foundation/crochets	Crochets personnalisés utilisés dans les widgets de Composeur de page, les services de site, etc.
src/_foundation/seo	Composant SEO responsable de l'appel de l'API d'URL, de la redirection vers la présentation correcte de la page, dela définition des métadonnées pour SEO, etc.
src/_foundation/utils	Composant Util responsable des opérations de lecture/écriture sur les stockages locaux et de session du navigateur.
src/components/StyledUI/	Composants d'interface utilisateur mise en forme. Bien que la plupart des composants d'interface utilisateur mise en forme ont été déplacés vers le package react-component SDK local NPM, il s'agit de restes. A l'avenir, les composants restants seront déplacés vers les packages locaux NPM et ce dossier sera supprimé.
src/_tests_	Fichier de test d'unité de composant React. Le fichier de test d'unité se trouve ici : sample/reference file.
src/_dev/api-diagram	Le dossier d'extension de développement showAPIFlow contient la logique d'implémentation pour afficher le diagramme de flux d'API.
src/components/footer	Composant de bas de page de magasin.
src/components/header	Composant d'en-tête de magasin.
src/components/commerce-layouts	Présentations de l'outil Composeur de page.
src/components/layouts	Présentations autres que les présentations de l'outil Composeur de page utilisées pour afficher les comptes, le tableau de bord, les pages de connexion, etc.
src/components/pages	Composants de page d'URL statiques tels que Compte, Carnet d'adresses, Paiement du panier, etc.
src/components/pages-seo	Composants de page de navigation de catalogue comprenant la catégorie, la liste des produits et les pages de détails de produit. Lorsque le composant de référencement gère une URL et s'achemine vers le composant de page approprié afin d'afficher le contenu de la page, il redirige vers les pages présentes dans ce dossier.
src/components/commerce-widgets	Widgets de l'outil Composeur de page.
src/components/widgets	Composants de widget utilisés dans des pages telles que Compte, Carnet d'adresses, Réservation, etc.
src/composants/extensions	Dossier d'extension du mode de développement. Le composant d'extension est responsable de l'appel du diagramme d'API. Ce fichier sera remplacé lors de la génération de production par le modèle sous assets\template\production\src\components\extensions.
src/pages	Pages communes partagées par les Reference Store application Emerald (B2C) et Sapphire (B2B).
src/pages/_emerald/	Pages applicables uniquement pour l'Reference Store application Emerald (B2C).
src/pages/_sapphire	Pages applicables uniquement pour l'Reference Store application Sapphire (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 pour les emplacements e-marketing qui s'affichent dans l'exemple de magasin.
src/configs	Fichiers de configuration. Par exemple, les configurations de routage pour le routeur React, les présentations par défaut pour l'outil Composeur de page, etc.
src/constants	Constantes statiques couramment utilisées dans le kit SDK du magasin React.
src/redux	Composants Redux et Redux Saga, fichiers liés à la logique de gestion d'état.
src/redux/action-types	Tous les types d'action référencés par les actions Redux
src/redux/actions	Toutes les actions Redux.
src/redux/reducers	Tous les réducteurs Redux, y compris la définition de l'interface et les états initiaux.
src/redux/sagas	Logique liée à la bibliothèque Redux Saga pour gérer les effets secondaires asynchrones.
src/redux/sagas/watchers	Observateurs Redux Saga à surveiller pour les actions expédiées.
src/redux/sagas/workers	Agents Redux Saga pour gérer les actions.
src/redux/selectors	Sélecteurs pour les états Redux.
src/redux/store	Création de magasin Redux et configuration du logiciel intermédiaire.
src/testing	Configuration de serveur REST simulée et gestionnaire REST pour le test d'unité. Composant d'utilitaire de test d'unité qui remplace la fonction de rendu par défaut de la bibliothèque de test React.
src/themes	Thèmes pour l'Reference Store application Emerald (B2C) et Sapphire (B2B)
src/utils	Utilitaires courants utilisés dans les deux magasins.
src/App.tsx, App.scss	Le composant d'application principal et le fichier scss de l'application React pour le magasin.
src/animate.css	Bibliothèque de fichiers animate.css à partir de http://daneden.me/animate.
src/i18n.ts	Fichier d'internationalisation pour gérer la prise en charge de plusieurs langues pour l'interface utilisateur et les messages.
src/index.tsx, src/index.scss	Le point d'entrée principal de l'application React pour le magasin.
src/react-app-env.d.ts	react-app-env.d.ts fait référence aux types de scripts React et apporte son aide, notamment en permettant les importations SVG.
src/serviceWorker.ts	Fichier généré automatiquement qui est un script que le client (navigateur) exécute en arrière-plan, distinct de la page Web. Il peut également être utilisé pour les PWA, pour que l'application puisse fonctionner hors ligne et se charger plus rapidement. Pour plus d'informations, voir https://bit.ly/CRA-PWA.
src/setupProxy.js	Proxy et fichiers d'installation fictifs pour l'exécution des Reference Store application en mode développement.
src/setupTests.ts	Implémentions simulées JEST pour SiteInfoService qui est utilisé dans le test d'unité.
outils	Divers scripts d'utilitaire pour exécuter le serveur fictif et générer et lancer les exemples de magasin React.
src/logo.svg	Logo React
.env, .env.test	Tous les fichiers de variables d'environnement référencés par le serveur de nœud lors de l'exécution de l'React Store application dans le mode de développement.
.prettierrc.yaml .prettierignore	Fichier de paramètres liés au plug-in de code Visual Studio du formateur de code embelli.
package-lock.json package.json	Fichier utilisé par npm/nœud pour gérer les dépendances de projet, exécuter et générer des projets, et d'autres configurations liées au projet.
hcl-commerce-store-sdk-react-component-{{version}}.tgz <bundle-root>/packages/react-component	Il s'agit du fichier source de package local NPM pour l'interface utilisateur mise en forme, les présentations de Composeur de page, les widgets, les thèmes, les éléments, d'autres composants, etc. Ici, `{{version}}` représente la version du groupe de correctifs HCL Commerce, c'est-à-dire 9.1.7, 9.1.8 ou 9.1.9. Il s'agit du dossier de l'espace de travail NPM qui contient le fichier source pour l'interface utilisateur mise en forme, les présentations de Composeur de page, les widgets, les thèmes, les éléments, d'autres composants, etc.
hcl-commerce-store-sdk-typescript-axios-es-{{version}}.tgz <bundle-root>/packages/typescript-axios-es	Il s'agit du fichier source de package local NPM pour le fichier de service client REST Elasticsearch généré par le générateur d'API ouvert. Ici, `{{version}}` représente la version du groupe de correctifs HCL Commerce, c'est-à-dire 9.1.7, 9.1.8 ou 9.1.9. Il s'agit du dossier de l'espace de travail NPM qui contient le fichier source pour le fichier de service client REST Elasticsearch généré par le générateur d'API ouvert.
hcl-commerce-store-sdk-typescript-axios-transaction-{{version}}.tgz <bundle-root>/packages/typescript-axios-transaction	Il s'agit du fichier source de package local NPM pour le fichier de service client REST du serveur de transactions généré par le générateur d'API ouvert. Ici, `{{version}}` représente la version du groupe de correctifs HCL Commerce, c'est-à-dire 9.1.7, 9.1.8 ou 9.1.9. Il s'agit du dossier de l'espace de travail NPM qui contient le fichier source pour le fichier de service client REST Elasticsearch du serveur de transactions généré par le générateur d'API ouvert.
hcl-commerce-store-sdk-utils-{{version}}.tgz <bundle-root>/packages/utils	Il s'agit du fichier source de package local NPM pour les composants d'utilitaire. Ici, `{{version}}` représente la version du groupe de correctifs HCL Commerce, c'est-à-dire 9.1.7, 9.1.8 ou 9.1.9. Il s'agit du dossier de l'espace de travail NPM qui contient le fichier source pour les composants d'utilitaire.
tsconfig.json	Le fichier de configuration TypeScript.
.storybook	Dans le kit SDK du magasin React, la configuration de storybook est fournie avec un ou deux exemples de composants et des éléments d'interface utilisateur de base. Il s'agit d'une fonction facultative qui vous permet d'ajouter de nouveaux articles en vous référant au lien de la documentation officielle https://storybook.js.org/.
husky.config.js	Fichier de configuration de la bibliothèque Husky npm. Husky peut empêcher la validation, l'envoi ou autre d'un mauvais GIT. Pour plus d'informations, voir https://www.npmjs.com/package/husk.
.husky	Dossier de configuration de la bibliothèque npm Husky. Pour plus de détails, voir https://www.npmjs.com/package/husky.
Licence	HCL Commerce Fichiers de licence et de contrat.
README.md	Le fichier Readme qui est le point de départ pour la configuration et l'utilisation du React Store Store SDK.
UPDATES.md	L'historique des changements React Store Store SDK et le fichier d'informations des mises à jour de version.
readmeImages	Ce dossier contient des images utilisées dans le fichier Readme.
.gitattributes, .gitignore	Fichiers de configuration associés à Git.
.eslintrc	Fichier de configuration ESlint Pour plus de détails sur ESlint, consultez le site Web https://eslint.org/ officiel.