Skip to main content

Commerce

Implementing the Flip Card Feature in Optimizely CMS 12 using Perficient SCORE Optimizely Foundation

Shot Of An Attractive Young Woman Using A Digital Tablet Outside In The City At Night

Flip Card Features in Optimizely CMS 12

In this blog, we will explore the following topics:

  • Flip Card details
  • Flip Card requirements
  • Flip Card back end implementation
  • Flip Card front end implementation storybook
  • Flip Card used in website.

Flip Card Details:

SCORE is Perficient accelerator with prebuilt features. Flip Cards offer an enjoyable method for users to engage with your website, presenting a delightful flip animation that adds an element of excitement. Moreover, they serve as a compact hub where you can conveniently provide supplementary information, all within a single concise location. Flip Cards have 2 sides- Front of the card and back of the card.

Flip Card Requirements:

On the front of the card, we would like these fields available:

  • Title
  • Description
  • Solid colour
  • Background Image
  • CTA (Call to Action) flip it front to back.
  • Flip Move directions – Right, left, up and down.

On the back of the card, we would like these fields available:

  • Solid colour
  • Text
  • Another CTA (Call to Action) that will go to another page.
  • Background Image

Note: Clicking anywhere except the CTA on the back of the card will flip it back to the front.

For the images and colours, there should be options to have one of these on the front of the card and back of the card:

  1. Background image filling the entire card – First Preference
  2. Solid colour filling the entire card –Second Preference

Flip Card Backend Implementation:

SCORE project structure:

Picture1

  1. Created FlipCard block under “Web\Features\Blocks\Components\FlipCard\” folder and class name is “FlipCardBlock.cs” and add the all-requirement entities [section – Flip Card details]. Please see below screenshot for FlipCardBlock.cs file:

Picture2

  1. Implement Flip card direction dropdown functionality in Infrastructure project.
  • Add below code into “\Infrastructure\Settings\Models\Content\StyleSettings.cs” file:

Picture12

  • Create new FlipCardDirectionSelectionFactory class under “Infrastructure\SelectionFactories” folder.

Picture13

  • Create a new “FlipCardDirectionEditorDescriptor” class under “Infrastructure\EditorDescriptors\Fields” folder.

Picture14

  • Use this class “FlipCardDirectionEditorDescriptor” in FlipCardBlock.cs file and add the below code in this FilpCardBlock.cs file:

Picture15

  1. Build the solution and run the project.
  2. Go to CMS admin and click on the “Edit” menu and select “Home” page.
  3. Create a new block and showing “FlipCard” block.

Picture16

  1. Select “FlipCard” block and showing all requirements.

Picture17

  1. Add data into the Flip card block and publish.
  • Front end

Picture18

  • Back end

Picture19

  1. Published changes and click on the Preview button.
    • Front end

Picture20

    • Click on Details and show the back end.

Picture21

Flip Card Frontend Implementation Storybook

I’ll address this topic in the second part of the blog.

Flip Card used in Website

I’ll address this topic in the second part of the blog.

Conclusion:

Part 1 of the blog “Implementing the Flip Card Feature in Optimizely CMS 12 using Perficient SCORE Optimizely foundation” introduces Flip Cards, outlines their requirements, and discusses their backend implementation in the Perficient SCORE project. It also mentions that the Flip Card frontend implementation and usage on a website will be covered in Part 2.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shashikant Bhoyar, Technical Architect

I am a seasoned technical expert who offers guidance in the conceptualization, creation, and implementation of technology-driven applications and services, specializing in the Optimizely Configured (Insite) Commerce, CMS and zNode eCommerce frameworks in .NET technology.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram