Six étapes simples pour ajouter des pages dans la console d'administration Optimizely

Optimizely est une plate-forme de commerce d'expérience numérique de premier plan avec davantage de capacités de commerce B2B prêtes à l'emploi pour fournir une personnalisation en fonction des besoins spécifiques des clients.
Lors de l'intégration d'Optimizely B2B Commerce pour l'un de nos clients, nous avons rencontré un scénario dans lequel il était nécessaire d'étendre la console d'administration Insite B2B Commerce. Optimizely a une restriction sur la console d'administration du commerce B2B concernant la personnalisation de la page d'administration par défaut. Cependant, nous pouvons créer l'extension/la page personnalisée dans la console d'administration du commerce B2B.
Vous trouverez ci-dessous les étapes pour ajouter une nouvelle page dans la console d'administration Insite.
Étape 1 : Créez une page de vue (CSHTML) dans le projet InsiteCommerce.Web.
Remarque : Vous pouvez suivre la structure de dossiers telle que définie dans votre projet. J'ai essayé de suivre la même structure que les autres pages d'administration, "Area/AdminExt/Views".
Étape 2 : Ajoutez la référence "Insite.Admin" à votre projet d'extension (bibliothèque) .
Étape 3. Créez une « classe de contrôleur » dans l'extension projet/bibliothèque et suivez la convention de nommage. Dans mon cas, j'essaie de créer une page d'extension pour la table, "Order History Extension".
Étape 4 : Ajoutez l'attribut de nom de dépendance à une classe de contrôleur.
Remarque : L'ajout d'un attribut de nom de dépendance définira le modèle d'URL pour la page de la console d'administration. Dans mon cas, l'URL de ma page d'historique de commandes sera "https://domainname/admin/OrderHistoryExtension."
Étape 5 : Créez une entrée sur "AdminConsoleMenuExtensions.json". L'ajout de l'entrée dans ce fichier créera un lien vers le menu Admin/panneau de navigation.
Remarque : La valeur dans "Href" doit correspondre à l'attribut de nom de dépendance à l'étape quatre.
Étape 6 : Définissez la méthode « index » et ajoutez l'attribut « ReturnIndexForNonAjaxRequests » et retournez la vue partielle. Le but de cet attribut est de rendre la page personnalisée à l'intérieur de la mise en page principale Insite Admin.
Une fois toutes les étapes ci-dessus terminées, procédez comme suit :
- Connectez-vous à la console d'administration.
- Dans le « menu de navigation de gauche de l'administrateur », vous verrez le menu de l'extension.
- Cliquez sur le lien « Extension de l'historique des commandes », et sur le côté droit, vous verrez la vue de liste OrderHistoryExtension.
Remarque : L'attribut « [ReturnIndexForNonAjaxRequests] » est requis pour la définition de la méthode sur le contrôleur. Si l'attribut [ReturnIndexForNonAjaxRequests] est manquant dans la méthode du contrôleur, la page personnalisée ressemblera à celle illustrée dans la capture d'écran ci-dessous. Reportez-vous à la capture d'écran ci-dessous pour voir la page personnalisée que nous avons ajoutée.
Une fois ce qui précède terminé, vous extrayez les données de votre table personnalisée à l'aide du code du contrôleur de vue de modèle standard (MVC) ou en implémentant l'API REST standard et AngularJS. J'ai utilisé des données de départ/dummy et un affichage en utilisant le code MVC dans cet exemple.
- J'ai créé le « modèle de vue et l'ai nommé « OrderHistoryExtensionView ». . "
- Ensuite, j'ai ajouté les données de départ et les ai renvoyées en tant que modèle d'objet lors du retour de la vue partielle.
- Reportez-vous à l'extrait de code ci-dessous
Ceci est l'extrait de code pour écrire le code :
OrderHistoryController.cs
Vous pouvez afficher la vue "List.cshml" ci-dessous :
Ci-dessous se trouve la vue administrateur :
Toutes les étapes ci-dessus fonctionneront sur le framework Optimizely B2B Commerce SDK sans dépendre de l'équipe d'assistance Optimizely. Contactez nos experts dès aujourd'hui pour en savoir plus sur notre vaste expertise Optimizely et notre solide partenariat.
Source link