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

Dans ce blog, nous apprendrons les points ci-dessous :

• Modifier les styles de widget Spire existants : règles CSS.
• Implémentation d’extensions de widgets personnalisés

Dans cet article de blog, nous explorerons le processus de modification des styles de widget Spire existants dans Spire, un système de gestion de contenu populaire. Nous fournirons des exemples et des instructions étape par étape pour les extensions de widgets personnalisés, ainsi que des détails sur la mise en œuvre de ces modifications sur une machine locale.

Modifier les styles de widget Spire existants : règles CSS

Cet exemple montre comment modifier le style du composant Product Price. Ce composant est utilisé sur tout le site Web.

• Cela impliquera l’utilisation d’objets d’extension de style dans Spire.
• Cela impliquera l’utilisation de composants stylisés pour spécifier les règles CSS.
• Cette solution est idéale si vous avez besoin de personnaliser le style d’un widget et :
  • Le composant Mobius ne fournit pas d’accessoire pour modifier ce style ou
  • Les règles CSS sont complexes.

Découvrez comment transformer le style du composant Product Price, un élément incontournable du Web. Réaliser cette transformation nécessite l’application des objets d’extension de style de Spire et l’utilisation de composants stylisés pour une définition précise des règles CSS. Cette solution devient indispensable lorsque vous cherchez à personnaliser le style d’un widget, en particulier dans les cas où le composant Mobius ne dispose pas d’une propriété de modification de style ou lorsqu’il s’agit de règles CSS complexes.

Implémentation d’extensions de widgets personnalisés

Veuillez suivre les étapes ci-dessous :

• Créer le Extensions de widgets répertoire dans votre répertoire de plans personnalisés (tel que ~/FrontEnd/modules/blueprints/myCustomBlueprint/src/WidgetExtensions).
• Dans le Extensions de widgets répertoire, créez un nouveau fichier nommé CommonComponentsExtensions.ts. Le nom n’a pas d’importance. Ce fichier sera utilisé pour les composants utilisés dans Storefront.
• Ajoutez le code ci-dessous au fichier CommonComponentsExtensions.ts.

import {productPriceStyles} from "@insite/content-library/Components/ProductPrice";

import {css} from "styled-components";

import mergeToNew from "@insite/client-framework/Common/mergeToNew";

/* Note: Modifying the styles this way will affect all instances of the widget across the Storefront.

Each component and widget in Spire exports a base style exensions object.

You can import this object and modify the properties on it. This will affect

all instances of the component or widget across the Storefront. In this example,

the style extensions object is named "productPriceStyles".

The `mergeToNew` function uses lodash's `_.merge()` behind the scenes

to make deep merging two objects easier. You can also do this manually

using the JavaScript spread (...) operator.

*/

productPriceStyles.wrapper=mergeToNew(productPriceStyles.wrapper,{

/* This is using the `css` utility function provided by styled-components.
You should extend the base widget or component CSS rules when you add new CSS rules.

Note: You should NOT use CSS selectors to apply CSS rules.

Each of the Mobius components used by widgets in Spire makes use of

the style extension objects. This allows you to target a specific element within a widget

to apply styles.

*/

css: css`

text-align: right;`,});

• Pour activer l’inclusion d’extensions de widget personnalisé dans le code JS produit, mettez à jour le fichier start.tsx créé lors de la création du plan. Le code suivant est commenté par défaut. Décommentez le code comme suit :

// Load all the extensions to the base widgets. This includes style extensions.

const widgetExtensions = require.context("./WidgetExtensions", true);

widgetExtensions.keys().forEach(key => widgetExtensions(key));

• Exécutez Spire en utilisant votre plan personnalisé. Vous trouverez ci-dessous un exemple de démarrage de Spire depuis le terminal. npm exécuter démarrer myCustomBlueprint 3000
• Visitez la vitrine en accédant à l’URL suivante : http://localhost:3000.
• Accédez à la page Détails du produit et à la page Liste des produits pour une expérience complète.

Conclusion:

En résumé, cet article de blog a présenté la transformation de Optimizely Configured Commerce et a fourni des informations précieuses sur la personnalisation des sites Web basés sur Spire. Nous avons exploré la modification des styles de widgets et la mise en œuvre d’extensions de widgets personnalisées, vous fournissant ainsi les outils nécessaires pour créer une présence en ligne unique et sur mesure. Grâce à ces techniques, vous pouvez aligner votre site Web sur l’identité de votre marque et améliorer l’expérience utilisateur de vos visiteurs. Votre voyage vers la personnalisation et la personnalisation de sites Web commence ici.