Commerce configuré de manière optimale – Apprenez CMS Spire 5.X Partie 4 / Blogs / Perficient

Insite est maintenant configuré pour Commerce. Dans ce blog, nous apprendrons les points ci-dessous :

• Créer un widget personnalisé dans Spire

Dans cet article de blog, nous explorerons le processus de remplacement de la création d’un widget personnalisé dans Spire, un système de gestion de contenu populaire. Je fournirai des exemples et des instructions étape par étape pour créer un widget personnalisé, ainsi que des détails sur la mise en œuvre de ces modifications sur une machine locale.

Créer un widget personnalisé dans Spire

Un nouveau widget personnalisé est une excellente alternative si vous avez besoin d’offrir des fonctionnalités totalement nouvelles pour couvrir vos cas d’utilisation.

Cette dernière solution demande normalement plus d’efforts, mais l’option que vous choisissez dépend de votre situation particulière.

À quelques exceptions près, les méthodes de création d’un nouveau widget dans Spire sont identiques à celles permettant de remplacer un widget existant.

Dans cet exemple, nous allons créer un widget qui montre comment ajouter des définitions de champs CMS personnalisées.

Ces définitions de champs sont affichées sous forme de composants modifiables dans le CMS.

Exemple de création d’un widget personnalisé sur une machine locale

Le plan de cet exemple peut être trouvé dans /modules/plans/exemple.

Toutes les références aux emplacements de répertoires seront relatives au /modules/plans/exemple/src annuaire.

Veuillez suivre les étapes ci-dessous :

• Créez un répertoire dans le Blueprint. Le répertoire sera situé à /Widgets/Commun.
• Ajoutez un fichier nommé SampleWidget.tsx dans ce répertoire et collez le code ci-joint :

/*

Ceci illustre comment créer un widget qui utilise un certain nombre de types de définition de champ différents.

*/

importer { WidgetDefinition } depuis « @insite/client-framework/Types/ContentItemDefinitions » ;

importer WidgetModule depuis « @insite/client-framework/Types/WidgetModule » ;

importer WidgetProps depuis « @insite/client-framework/Types/WidgetProps » ;

importer * en tant que React depuis « react » ;

// ceci est utilisé pour garantir que les noms correspondent entre props.fields et definition.fieldDefinitions[].nom

champs d’énumération const {

checkboxFieldValue = « checkboxFieldValue »,

texteFieldValue = « texteFieldValue »,

valeur de champ entier = « valeur de champ entier »,

multilineTextFieldValue = « multilineTextFieldValue »,

radioButtonsFieldValue = « radioButtonsFieldValue »,

dropDownFieldValue = « dropDownFieldValue »,

}

interface Props étend WidgetProps {

des champs: {

} ;

}

const ExempleWidget : React.FC = props => {

retour (

);

} ;

définition const : WidgetDefinition = {

groupe : « Tests »,

champDéfinitions : [

{

name: fields.checkboxFieldValue,

displayName: “Checkbox”,

editorTemplate: “CheckboxField”,

defaultValue: false,

fieldType: “General”,

tooltip: “checkbox tip”,

},

{

name: fields.textFieldValue,

displayName: “Text”,

editorTemplate: “TextField”,

defaultValue: “”,

fieldType: “General”,

tooltip: “text tip”,

placeholder: “text placeholder”,

isRequired: true,

},

{

name: fields.integerFieldValue,

displayName: “Integer”,

editorTemplate: “IntegerField”,

defaultValue: 0,

fieldType: “General”,

tooltip: “integer tip”,

placeholder: “integer placeholder”,

isRequired: true,

sortOrder: 0,

},

{

name: fields.multilineTextFieldValue,

displayName: “MultilineText”,

editorTemplate: “MultilineTextField”,

defaultValue: “”,

fieldType: “General”,

tooltip: “multi line tip”,

placeholder: “multi line placeholder”,

isRequired: true,

},

{

name: fields.radioButtonsFieldValue,

displayName: “RadioButtons”,

editorTemplate: “RadioButtonsField”,

options: [

{

displayName: “Yes”,

value: “yes”,

tooltip: “this means yes”,

},

{

displayName: “No”,

value: “no”,

tooltip: “this means no”,

},

],

info-bulle : « astuce des boutons radio »,

isRequired : vrai,

valeur par défaut: «  »,

fieldType : « Général »,

},

{

nom : champs.dropDownFieldValue,

displayName : « DropDown »,

editorTemplate : « DropDownField »,

choix : [

{

displayName: “Option1”,

value: “option1”,

},

{

displayName: “Option2”,

value: “option2”,

},

],

info-bulle : « astuce déroulante »,

isRequired : vrai,

valeur par défaut: «  »,

fieldType : « Général »,

},

],

} ;

const widgetModule : WidgetModule = {

composant : ExempleWidget,

définition,

} ;

exporter le widgetModule par défaut ;

• Ajoutons maintenant cet extrait de code à la fin du fichier. Chaque widget de Spire doit exporter par défaut un WidgetModule. Il décrit à Spire comment le widget est rendu et affiché dans le CMS, entre autres.

const widgetModule :

WidgetModule = { composant : ExempleWidget, définition, } ;

exporter le widgetModule par défaut ;

• Décommentez le code ci-dessous de démarrer.tsx fichier dans un plan personnalisé :

importer { addPagesFromContext, addWidgetsFromContext } depuis « @insite/client-framework/Configuration » ;

// Charge tous les widgets personnalisés afin qu’ils soient inclus dans le bundle et active le rechargement à chaud des modules pour eux. Ne faites pas cela pour le dossier ./Overrides

const widgets = require.context(“./Widgets”, true, /.tsx$/);

const onHotWidgetReplace = addWidgetsFromContext(widgets);

si (module.chaud) {

module.hot.accept(widgets.id, () => onHotWidgetReplace(require.context(“./Widgets”, true, /.tsx$/)));

}

• Démarrez Spire.
• Une fois Spire opérationnel, connectez-vous au CMS à l’adresse http://localhost:3000/contentadmin.
• Une fois connectés, modifiez la page d’accueil.
• Faites défiler vers le bas de la page et ajoutez une nouvelle ligne.

• Ajouter le ExempleWidget widget vers la nouvelle ligne. Nous pouvons le trouver dans le Éléments de testgroupe dans le Ajouter un widgetmodal.

• Après avoir ajouté le widget à la page, nous pouvons personnaliser le widget à l’aide des définitions de champs définies dans le code. Le CMS les affiche dans la barre latérale.

• Maintenant, publiez la modification que vous venez d’apporter.
• Si nous nous déconnectons du CMS et accédons à la page d’accueil, nous pouvons voir notre nouveau widget sur la page.

Conclusion:

La création d’un widget personnalisé dans Spire peut être réalisée en suivant quelques étapes simples. En utilisant les exemples fournis et en implémentant ces modifications sur une machine locale, les administrateurs de sites Web peuvent mettre à jour et personnaliser efficacement leurs sites Web Spire pour répondre à leurs besoins évolutifs.