Création d'un magasin personnalisé à l'aide de React

Vous pouvez créer un magasin d'applications React à page unique à l'aide du HCL Commerce Store SDK qui est fourni pour les pages et les composants React. Le Store SDK permet à vos développeurs frontaux de développer et de déployer rapidement un magasin tout en se concentrant sur la création de la meilleure expérience utilisateur possible.

Le Store SDK est créé à partir de deux composants :

Une application React développée et déployée par un développeur frontal à l'aide du Store SDK.
Un modèle de données de magasin (magasin de site étendu - eSite, magasin de ressources de catalogue - CAS - et magasin de ressources de vitrine - SAS) publié par le développeur frontal ou l'administrateur de site avec le contenu associé créé par les utilisateurs professionnels, puis la publication d'un modèle Magasin avec des données à l'aide des outils de publication du Magasin.

Application de magasin React

Le Store SDK est prévu pour que les développeurs génèrent l'React Store application pour afficher la vitrine.

Le Store SDK comprend une structure de base qui assure l'intégration aux services REST HCL Commerce, le maintien des états de session, le déclenchement d'événements marketing et la gestion des ressources du navigateur. Le développeur frontal peut interagir directement avec la structure de base pour récupérer et envoyer des données vers HCL Commerce ou rechercher et se concentrer principalement sur l'interface utilisateur des composants pour assembler des pages sur la vitrine.

Les Store SDK sont également incluses avec Reference Store application pour illustrer les capacités fournies par la structure de base et les exemples d'implémentation de l'interface utilisateur du magasin à l'aide de bibliothèques React communes. Les Reference Store application sont implémentées sous forme d'application à page unique (SPA) dans laquelle les fichiers JavaScript statiques sont chargés dans le navigateur et les appels de service REST et l'affichage de page sont exécutés dans le navigateur. Les Reference Store application partagent une base de code commune, mais sont construites et déployées séparément :

Application de magasin Emerald avec flux de magasin B2C, des éléments d'interface utilisateur verts et un style.
Application de magasin Sapphire avec flux de magasin B2B, des éléments d'interface utilisateur bleus et un style.

Les clients doivent remplacer l'interface utilisateur par leurs propres éléments car elle est fournie à titre d'exemple seulement et n'est pas destinée à une utilisation complète en production. Les clients peuvent coder les flux de magasin personnalisés en fonction des données renvoyées ou envoyées par le biais de services personnalisés, et même personnaliser la structure de base pour leurs propres intégrations d'arrière-plan. Pour plus d'informations sur les Reference Store application, voir Magasins React de référence.

L'Reference Store application est conçue pour mettre en évidence les capacités des services et de la base Commerce, y compris les éléments suivants :

Utilisation d'API REST Elasticsearch V2 améliorées qui suivent les normes du secteur avec le cache et les capacités de filtrage avancées.
Les API d'URL qui activent l'affichage des URL de référencement et les métadonnées gérées par les utilisateurs professionnels sur les pages.
Activation des emplacements e-marketing sur n'importe quelle page permettant aux utilisateurs professionnels d'ajouter du contenu, des produits ou des recommandations de catégorie.
Prise en charge des applications Web progressives (PWA) permettant une infrastructure de code commune pour les plateformes de bureau et mobiles.
Chargement dynamique/chargement différé des composants React.

Note: Les pages React Store sont assemblées à partir de composants par le développeur frontal. L'utilisateur professionnel n'a pas la possibilité de modifier ces pages en utilisant les fonctionnalités fournies par Commerce Composer.

Modèle de données de magasin

La création d'un React Store est complétée par la publication du modèle de données de magasin pour inclure l'eSite (magasin ouvert au public), le CAS et le SAS qui font référence à React Store application, créé par le développeur frontal. Le processus Publication du magasin inclut un nouveau fichier EmeraldDataTemplate.zip que vous pouvez utiliser pour publier un modèle de magasin sans interface dans lequel les utilisateurs professionnels peuvent gérer le contenu et les données dans les outils métier et le faire renvoyer par l'application React qui est couplée au magasin. Pour plus d'informations, voir Publication d'un React Store.

Une fois que le modèle de magasin est disponible, les utilisateurs professionnels peuvent gérer et maintenir le contenu et les données pour le React Store en utilisant les fonctionnalités déjà fournies dans nos outils. Les fonctionnalités suivantes sont toutes sous le contrôle de l'utilisateur professionnel :

Outil de catalogues pour gérer les catalogues de vente, les catégories et les produits.
URL de référencement et métadonnées de page pour toutes les catégories et tous les produits.
Fonctionnalités de chargement/chargement de données du catalogue.
Promotions incluant les promotions basées sur le code promo.
Emplacements e-marketing mappés à des composants spécifiques dans l'React Store application, y compris dans la recommandation de produit, la recommandation de catégorie et la recommandation de contenu.
Filtres de catalogue et tarification.
Outils Gestion de magasin.
Aperçu du magasin.
Règle de recherche.
Gestion des contrats.

Note: L'outil Commerce Composer est désactivé pour les modèles Magasin sans interface tels que le React Store.

Rôles et responsabilités

L'équipe professionnelle et les développeurs frontaux doivent collaborer pour créer et déployer l'application de magasin personnalisée.


Rôle	Responsabilité	Tâches
Développeur frontal	Créez une React Store application avec un Store SDK et un modèle de serveur de déploiement capable d'afficher des pages.	Téléchargez le fichier Store SDK. Créez votre React Store application personnalisée. Générez et déployez l'React Store application.
Equipe professionnelle Administrateur de site Concepteur de site Equipe de catalogue Equipe marketing Autres parties intéressées	Publiez un magasin d'achats. Gérez toutes les données et tout le contenu (catalogues, catégories et produits, promotions et marketing, etc.).	Publication d'un React Store. L'administrateur de site doit connaître le nom de l'React Store application pour publier le modèle de données Magasin. Publiez plusieurs sites étendus (magasins étendus). Plusieurs magasins ou sites étendus peuvent utiliser la même React Store application. Par exemple, vous pouvez disposer de différents magasins selon le pays, la langue, la marque, la région, B2B ou B2C, et les sites des employés. Prévisualiser le magasin pour vous assurer que le contenu et les données corrects sont associés au magasin.

Processus pour créer la personnalisation de React Store application

La création de React Store application personnalisée se compose des étapes principales suivantes :