Introduction

The Infosys Equinox Frontend Accelerator is a React based reference storefront that leverages the Infosys Equinox Commerce platform to power commerce capabilities in the storefront. It enables static and dynamic pages for a seamless shopping experience to the end users.

It is built based on the Micro-frontend architecture and MUI framework. It comprises of modules that narrow down to pages and blocks where all the individual blocks are independent and are developed with responsive, centralized theming adhering to ADA compliance.

Business Impact

The Infosys Equinox Frontend Accelerator enables customizable storefronts to be designed by the customer which enhances the shopping experience for the end users.

Multi-channel support: Supports B2B, B2C and B2B2C store types
Easy and dependency free: Enables to learn and test User Interface (UI) components without dependency
Manage sites at scale across multiple markets: Provides multi locale support with pages adhering to ADA compliance
Model and deliver seamless experiences: With data oriented from defined data sources

Features

Easy to use and customizable storefront experience for customers through a comprehensive set of features

Tailored hyper-personalized and omnichannel storefront experiences
Seamless content management experience with effective CMS integration
Structured modules for a wide range of usage Browse, Transaction, Account, Loyalty, Subscription
Speed and ease of integration with Apps for payment, shipment, tax and more
Propagate changes on sites across geographies and languages in real-time

High-Level Architecture

This section provides the high-level architecture of the Frontend Accelerator.

Frontend Accelerator Architecture

Micro frontends: B2B, subscription, authentication, browse, transactional, and loyalty are the high level micro frontends which can be customized and deployed independently without interrupting the rest. For detailed information, see Frontend Accelerator Framework.

Story Book: Storybook is a library where we can see individual components and features. It allows you to evaluate the independent components of each micro frontend. See Storybook.

CMS(Strapi): The micro frontends interact with the content management system. Each micro frontend receives certain input data from Strapi. For detailed information, see Configuring the Strapi.

Tech Stack

The below image depicts the high level tech stacks used for the development of the Frontend Accelerator.

Frontend Accelerator Framework

The micro frontend framework divides the storefront application into smaller and independent parts. Different sets of micro frontends are tailored to business needs which can be installed or uninstalled based on business requirements. Micro frontends can be customized and deployed independently without interrupting the rest.

Frontend Accelerator Framework

Core Concepts / Key Features

The core concepts of the Frontend Accelerator are:

CMS integration: Seamless content management experience with effective CMS integration

Pre-integrated with Strapi content management systems which enables static and dynamic pages for a seamless shopping experience for end users. It is also pre-integrated with payment and shipment apps.
The content management data such as hero banner, footer, header, logo of the site, and copyright information of the site etc. that are manageable by the business are driven via the Strapi-CMS.
Strapi also has the capability of creating a dynamic page. For example, you can create a site for Black Friday, via Strapi-CMS and then the route URL up with the storefront.
Once these dynamic pages are created in the Strapi and published, then those pages will be reflected in the storefront.

For detailed information on Strapi Configuration, refer to the document Configuring Strapi for Frontend Accelerator.

Micro Frontend: accelerated with structured modules (Micro frontends) for a wide range of usage

- Frontend Accelerator is built based on micro frontend architecture and MUI framework. It is splitting a web application into smaller, self-contained units that can be developed, tested, and deployed independently. Hence, based on the customer’s needs, individual micro-frontends can be customized and deployed independently. They are independent of each other and can integrate with each other easily. Hence while the storefront is already live, the customer can still make customizations. Based on business needs, only the required micro frontends can be deployed. The Frontend Accelerator is split into modules:

Micro Frontend	Purpose
Browse (PLP, PDP, and Home)	The Browse module enables comfortable navigation in the storefront with features of choosing favorites, simple search, AI powered search, mini cart, quick view, add to list, compare, share and special products.
Transaction (Cart/Checkout)	Multiple shipping address options, save for later, order confirmation, easy checkout in a single page with all the pre-filled shipping addresses.
My Account	The Account module helps with account profile, address book, payment methods, order, wish list and other settings. Displays the details about all the vouchers/reward points and the transaction history.
Loyalty & Subscription (Cart/Checkout)	Opt in and out from the loyalty program, earn and redeem loyalty if opted in, loyalty dashboard and history table, multiple and preference type of subscription, multi locale support.
B2B	In addition to the B2C features, this module supports 2 types of User accounts – Buyer Admin & Buyer User. Teams, Users & Cost centers are enabled in the B2B perspective.

data oriented from defined data sources: Infosys Equinox Enterprise Admin behaves as a data source for Frontend Accelerator.

- Data sources: All store-related data such as catalog data are maintained on the Infosys Equinox enterprise. It maintains the catalog data, merchandising data, pricing data, and inventory data.

- Templates: Support different PLP templates for each category that are configured via visual merchandising from business tooling.

- App Integration: Pre-integrated with payment and shipment apps. Payment Apps integrated are CyberSource (Card), Klarna (Card) and Stripe Payment (Card, Google Pay, Apple Pay, Amazon Pay & Cash App). Avalara Tax App Integration is also enabled.

For detailed information on the Infosys Equinox Enterprise Admin microservices and app integrations, refer to the Infosys Equinox Developer Portal.

Centralized Content Engine: The centralized content engine is maintained within the Frontend Accelerator itself. The generic data such as the reader messages, validation messages, etc. are managed under the centralized content engine which is maintained within the Frontend Accelerator.

Ready to learn and test through Storybook which provides a frontend industry-standard workshop for building, documenting, and testing UI components in isolation. It helps to develop and test hard-to-reach states and edge cases without needing to run the whole application.

Data Flow

Each micro frontend has a set of pages such as, Page 1 and Page 2
Each page has a set of independent blocks such as Block 1, Block 2, and Block 3.
For example, the Browse micro frontend can have
multiple pages such as the homepage, PLP, PDP, Category Landing page, search results page etc.
each page has individual components organized to complete the entire look.
- home page consists of different components/ blocks such as a top navigation, footer, hero banner, carousel, etc. All these blocks are developed independently.
- PDP consists of separate components/blocks such as an image gallery, product description, ratings and reviews, etc.
Note: The independent components are organized to structure a particular page and sets of pages fall under a specific micro frontend.

For detailed information configuring the pages/components in Strapi, refer to the document Configuring Strapi for Frontend Accelerator

Configuring the Strapi

Strapi is fully integrated with Frontend Accelerator and with Content Stack and Content full CMS.

Appendix

Storybook

Storybook is a library where you can view the individual components and features. It is a documentation tool. Storybook allows you to evaluate the independent components of each micro frontend.

Evaluating the micro frontends

Blocks or components respond to data changes responsiveness and orientation changes. When we change the locale of a component, the nature of the blocks can be independently tested in the Storybook. These micro frontends interact with the content management system. Each micro frontend is integrated it with Strapi. It receives certain input data from Strapi.

To evaluate the micro frontends,
1. Login to the storybook with the valid credentials.
2. In the left navigation, we can see different micro frontends.
Each micro frontend has a set of components developed independently and published. From here, the nature of each component can be viewed or evaluated by changing the data locale orientation, or even verifying responsiveness.