Implémentation de la fonctionnalité Flip Card dans Optimizely CMS 12 à l’aide de Perficient SCORE Optimizely Foundation / Blogs / Perficient

Fonctionnalités de la carte Flip dans Optimizely CMS 12

Dans ce blog, nous explorerons les sujets suivants :

• Détails de la carte à rabat
• Exigences relatives aux cartes à rabat
• Implémentation du back-end de la Flip Card
• Livre d’histoires sur la mise en œuvre frontale de Flip Card
• Carte à rabat utilisée sur le site Web.

Détails de la carte à rabat :

SCORE est un accélérateur de performances avec des fonctionnalités prédéfinies. Les Flip Cards offrent aux utilisateurs une méthode agréable pour interagir avec votre site Web, en présentant une délicieuse animation flip qui ajoute un élément d’excitation. De plus, ils servent de hub compact où vous pouvez facilement fournir des informations supplémentaires, le tout dans un seul emplacement concis. Les cartes à rabat ont 2 faces : recto de la carte et verso de la carte.

Exigences relatives à la carte à retourner :

Au recto de la carte, nous aimerions que ces champs soient disponibles :

• Titre
• Description
• Couleur unie
• Image de fond
• CTA (Call to Action) retournez-le d’avant en arrière.
• Inverser les directions de déplacement – ​​Droite, gauche, haut et bas.

Au dos de la carte, nous aimerions que ces champs soient disponibles :

• Couleur unie
• Texte
• Encore un CTA (Call to Action) qui mènera vers une autre page.
• Image de fond

Note: Cliquer n’importe où sauf sur le CTA au dos de la carte la retournera vers l’avant.

Pour les images et les couleurs, il devrait y avoir des options pour en avoir une au recto et au verso de la carte :

1. Image d’arrière-plan remplissant toute la carte – Première préférence
2. Couleur unie remplissant toute la carte – Deuxième préférence

Implémentation du backend de la carte Flip :

Structure du projet SCORE :

1. Bloc FlipCard créé sous le dossier « Web\Features\Blocks\Components\FlipCard\ » et le nom de la classe est « FlipCardBlock.cs » et ajoutez toutes les entités requises. [section – Flip Card details]. Veuillez voir la capture d’écran ci-dessous pour le fichier FlipCardBlock.cs :

2. Implémenter la fonctionnalité de liste déroulante de direction de la carte Flip dans Infrastructure projet.

• Ajoutez le code ci-dessous dans le fichier « \Infrastructure\Settings\Models\Content\StyleSettings.cs » :

• Créer un nouveau FlipCardDirectionSelectionFactory classe dans le dossier « Infrastructure\SelectionFactories ».

• Créez une nouvelle classe « FlipCardDirectionEditorDescriptor » sous le dossier « Infrastructure\EditorDescriptors\Fields ».

• Utilisez cette classe « FlipCardDirectionEditorDescriptor » dans le fichier FlipCardBlock.cs et ajoutez le code ci-dessous dans ce fichier FilpCardBlock.cs :

3. Créez la solution et exécutez le projet.
4. Accédez à l’administrateur du CMS, cliquez sur le menu « Modifier » et sélectionnez la page « Accueil ».
5. Créez un nouveau bloc et affichez le bloc « FlipCard ».

1. Sélectionnez le bloc « FlipCard » et affichez toutes les exigences.

1. Ajoutez des données dans le bloc Flip card et publiez.

8. Modifications publiées et cliquez sur le bouton Aperçu.

• • Cliquez sur Détails et affichez le back-end.

Livre d’histoires sur la mise en œuvre du frontend Flip Card

J’aborderai ce sujet dans la deuxième partie du blog.

Carte à rabat utilisée sur le site Web

J’aborderai ce sujet dans la deuxième partie du blog.

Conclusion:

La première partie du blog « Implémentation de la fonctionnalité Flip Card dans Optimizely CMS 12 à l’aide de la fondation Perficient SCORE Optimizely » présente les Flip Cards, décrit leurs exigences et discute de leur implémentation backend dans le projet Perficient SCORE. Il mentionne également que la mise en œuvre et l’utilisation de l’interface Flip Card sur un site Web seront abordées dans la partie 2.