Comment configurer Optimizely Spire dans un environnement de développement

Optimizely B2B Commerce a récemment introduitSpire CMS pour obtenir une expérience utilisateur (UX) et des avantages en termes de performances pour son système de gestion de contenu (CMS). Spire utiliseTechnologies React/Reduxce qui se traduit par un temps de chargement de page plus rapide queCMS classique . Le CMS existant, basé sur une ancienne version deAngularJSsera désormais connu sous le nom de "CMS classique".

Spire est une nouvelle fonctionnalité d'Optimizely B2B Commerce Version 5. Spire est un CMS et une plate-forme de commerce électronique basés sur React.

Le contrôle facile des feuilles de style en cascade (CSS) à l'aide du guide de style et des widgets est l'un des avantages de l'utilisation de Spire. Au lieu d'apporter des modifications localement pour chaque page, les utilisateurs peuvent mettre à jour le CSS de base à partir du CMS, comme la couleur, l'en-tête et autres, et ces modifications seront répercutées sur l'ensemble du site.

Le front-end d'un site Web Optimizely B2B Commerce peut être étendu à l'aide du Spire Blueprint. Lorsqu'une nouvelle version de B2B Commerce est publiée, le code fondamental de Spire est immédiatement mis à jour. Spire utilise une chaîne de gestionnaires pour gérer des choses comme le chargement de données et l'ajout d'articles au panier.

Comprendre les différents rôles dans Spire

Pour gérer et publier efficacement du contenu dans Spire CMS, nous avons quatre rôles avec différents niveaux de privilèges.

CMS_Editeur de contenu

Dans la page de contenu, l'éditeur de contenu peut ajouter des widgets, supprimer des widgets, réorganiser des widgets et mettre à jour des widgets de contenu existants.

Créer de nouvelles pages de contenu, supprimer des pages de contenu et des variantes de page, créer des variantes de page, copier des pages et réorganiser les pages dans l'arborescence des pages sont toutes des options disponibles pour l'éditeur de contenu.

CMS_SiteEditor

Toutes les actions du rôle "CMS ContentEditor" sont également disponibles pour l'éditeur du site. L'éditeur du site peut également apporter des modifications au contenu et aux paramètres du widget de commerce.

L'éditeur du site peut créer une page de commerce, y ajouter des widgets, les supprimer et réorganiser les widgets sur la page de contenu.

CMS_Éditeur

Le contenu peut être approuvé et publié par les éditeurs.

CMS_SystemAdmin

Toutes les activités de "CMS ContentEditor", "CMS Publisher" et "CMS Publisher" peuvent être effectuées par l'administrateur système.

Présentation de la configuration de l'environnement de développement

Vous allez effectuer les étapes suivantes pour configurer l'environnement de développement :

1. Configurez le projet B2B Commerce Cloud sur le système du développeur.
2. Vérifiez le dossier "FrontEnd" dans le dossier "src".

1. Ouvrez "Invite de commandes" et accédez au"L'extrémité avant"
2. Exécutez la commande"npm installer."
3. Dans le "Code Visual Studio", ouvrez le "/L'extrémité avant"
4. Installez Microsoft "ESLint» pour vérifier les erreurs de lien « ESLint » dans l'éditeur.
5. Dans « Visual Studio Code », modifiez l'URL de l'interface de programmation d'application (API) dans le"/FrontEnd/config/settings.js"Si le dossier"paramètres.js"n'existe pas, mettez à jour l'URL de l'API dans"paramètres-base.js"et tester.

1. Accédez à l'administrateur du site Optimizely B2B Commerce et modifiez le type de CMS en "Spire".

1. Attribuez les rôles ci-dessous à l'administrateur de contenu.

• CMS_Editeur de contenu
• CMS_SiteEditor
• CMS_Éditeur
• CMS_SystemAdmin

2. Exécutez la commande"npm run start"du"/L'extrémité avant"
3. Utilisez le"http://localhost:3000/"URL pour accéder au site frontal.

1. Ajoutez "/contentadmin" à la fin de l'URL du site pour visiter le site d'administration de Spire CMS.

par exemple,http://localhost:3000/administrateur de contenu

2. Utilisez l'utilisateur administrateur de contenu pour vous connecter à admin.

1. Si les pages du site ne se chargent pas, exécutez le script SQL ci-dessous sur la base de données et réessayez. Puis,SUPPRIMER DU contenu.Noeud
2. Cours"npm exécuter créer-blueprint customBlueprint"du"/L'extrémité avant" répertoire pour générer un plan personnalisé. Dans le "FrontEndmodulesblueprints ", un plan personnalisé sera créé. Par défaut, le plan "exemple" est disponible dans le code source avec un gestionnaire personnalisé, des exemples de widgets.
3. Cours"npm exécuter démarrer customBlueprint"du"/L'extrémité avant" répertoire pour exécuter le blueprint personnalisé. Ensuite, vous courrez"Exemple de démarrage d'exécution npm"du"/L'extrémité avant"répertoire pour exécuter le blueprint par défaut.

Mes principaux plats à emporter

Spire est un excellent système de gestion de contenu, et il charge les pages plus rapidement que le CMS classique. Pour plus d'informations sur ce CMS,contactez nos experts dès aujourd'hui.

Référence

1. https://webhelp.optimizely.com/latest/en/b2b-commerce/cmsspire/whatisspire.htm
2. https://webhelp.optimizely.com/latest/en/b2b-commerce/cmsspire/blueprints/howtostartaspireproject.htm

A propos de l'auteur

Gopal Mirkute est un consultant technique principal travaillant sur les frameworks de commerce électronique Optimizely et Znode. Il aime partager ses connaissances sur tout ce qui touche au développement.

Plus de cet auteur