Comment activer les mises en page pleine largeur dans Optimizely Commerce (Spire) / Blogs / Perficient

Lors de la création de sites Web dans Optimizely Commerce (Spire), vous devrez peut-être créer des sections couvrant toute la largeur de la page. Les sections pleine largeur sont essentielles pour les éléments de conception tels que les bannières, les images de héros et les sections d’arrière-plan. Optimizely Commerce (Spire) fournit un cadre flexible qui facilite la configuration et la mise en œuvre de mises en page pleine largeur, permettant aux développeurs de créer des conceptions visuellement attrayantes avec un minimum d’effort. Ce guide vous guidera dans l’utilisation de cette fonctionnalité pour créer de manière transparente des sections pleine largeur.

Comment créer des sections pleine largeur

Étape 1 : Structure des dossiers

• Tout d’abord, assurez-vous d’avoir déjà créé un plan dans le répertoire src\FrontEnd\modules\blueprints. Par exemple, vous pourriez avoir un plan nommé Plan personnalisé.
• Accédez au CustomBlueprint/src. Assurez-vous qu’un Démarrer.tsx le fichier existe dans ce répertoire. Si ce n’est pas le cas, créez et ajoutez ce fichier.

Étape 2 : Comprendre les options dans Start.tsx

Le Démarrer.tsx Le fichier est le point d’entrée pour configurer les thèmes principaux, les widgets personnalisés et les pages. Il utilise les principes de style de Mobius pour garantir que tout semble cohérent, flexible et accessible. Ces principes fournissent une conception unifiée, permettant une personnalisation facile des thèmes, des couleurs, de la typographie et d’autres éléments de l’interface utilisateur tout en conservant une expérience utilisateur transparente et réactive sur tous les appareils.

Dans le Démarrer.tsx fichier, vous trouverez deux options pour configurer la mise en page pleine largeur via le guide de style :

• setPreStyleGuideTheme : Si vous ajoutez votre code selon cette méthode, vous pouvez mettre à jour les paramètres pleine largeur directement depuis l’interface d’administration de contenu.
• setPostStyleGuideTheme : Si vous utilisez cette fonction, les paramètres de pleine largeur seront corrigés et vous ne pourrez pas les modifier depuis l’interface d’administration de contenu.

Étape 3 : Code de configuration pleine largeur

Optimizely Commerce (Spire) fournit déjà une solution intégrée pour configurer des sections telles que l’en-tête, le contenu et le pied de page afin qu’elles couvrent toute la largeur de la page. Pour activer la pleine largeur pour ces sections, utilisez l’extrait de code suivant :

Explication

• en-tête : { isFullWidth : true } : Garantit que la section d’en-tête s’étend sur toute la largeur de la page.
• contenu : { isFullWidth : true } : La zone de contenu principale s’étend d’un bord à l’autre, parfaite pour afficher des bannières ou des visuels immersifs.
• pied de page : { isFullWidth : true } : Définit le pied de page sur toute la largeur, idéal pour les pieds de page avec des couleurs d’arrière-plan ou des éléments de conception qui doivent atteindre les bords de l’écran.

Étape 4 : Intégrer le code

Ajoutez le code ci-dessus au Démarrer.tsx fichier dans l’une des fonctions de configuration du thème (setPreStyleGuideTheme ou setPostStyleGuideTheme), selon que vous souhaitez ou non autoriser les mises à jour des paramètres pleine largeur à partir de l’interface d’administration de contenu.

Étape 5 : Comment mettre à jour la configuration pleine largeur à partir de l’administrateur de contenu

Après avoir configuré les paramètres pleine largeur dans le fichier Start.tsx, Optimizely Commerce (Spire) fournit un moyen simple de gérer et de mettre à jour ces configurations directement à partir de l’interface Content Admin.

• Allez au Administrateur de contenu et accédez au Guide de style
• Dans le Configurations de sites section, vous trouverez les paramètres Pleine largeur.

• Cliquez sur chaque option (En-tête, Contenu et Pied de page) pour voir une bascule qui vous permet d’afficher la section en pleine largeur.

Remarque : Vous ne pouvez mettre à jour le paramètre de pleine largeur qu’à l’aide de l’option setPreStyleGuideTheme possibilité dans le Démarrer.tsx déposer.

• Après avoir mis à jour la valeur dans le modal Paramètres, assurez-vous d’enregistrer les modifications.

Étape 6 : Comment utiliser l’option Pleine largeur sur les pages réelles

• Pour utiliser l’option pleine largeur sur les pages, ajoutez un Rangée widget. Modifiez le widget Row et vous verrez un Case à cocher pleine largeur option (par défaut, cette option sera décochée).

• Pour rendre la section pleine largeur, cochez la case.

Note: Une fois la case cochée, tout contenu de cette ligne sera affiché en pleine largeur.

Conclusion

Optimizely Commerce (Spire) fournit une solution simple et flexible pour créer des sections pleine largeur, facilitant ainsi la conception de sites Web visuellement attrayants. En suivant les étapes décrites dans ce guide, vous pouvez rapidement activer les mises en page pleine largeur pour votre en-tête, votre contenu et votre pied de page. Que vous préfériez gérer ces configurations via l’interface Content Admin ou directement dans le code, Optimizely Commerce offre la flexibilité nécessaire pour créer des conceptions transparentes et immersives qui améliorent l’expérience utilisateur globale. Avec un contrôle total sur ces paramètres, vous pouvez personnaliser la mise en page de votre site pour l’adapter à vos besoins spécifiques en matière de conception tout en conservant une interface cohérente et réactive sur tous les appareils.