Alokai Storefront Features
Implemented Features
Alokai Storefront Demo, provides a starting point for developers and acts as an accelerator and a reference in their task of building a storefront.
But, what are those features that come OOTB in Alokai Storefront Demo?
Storefront Demo covers a whole user journey, from Homepage to Checkout, including eCommerce touchpoints detailed below:
- Home Page
- Product Listing Page
- Product Detail Page
- Cart
- Checkout
- My Account & User Authentication
General
Features in this section are available along the entire demo storefront navigation.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Header | Drives navigation across the storefront, includes company logo, access to categories browsing, search input and action buttons for open cart and login/access to my account | NavbarTop |
| Footer | Including set of links supporting storefront navigation: How to buy, Help, Services, About, Social Media Links - Static data, no preconfigured for fetching elements from CMS | Footer Basic Block |
| Search | Uses by default eCommerce search, enabling search by SKU and search by text | Search with custom icon |
| Language & Currency Selector | Enables customer to change language and currency of the storefront |
Homepage
Features in this section are available and used to build up the home page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Hero Banner | Layout in hero section (Image, Primary button, Secondary button). Data fetched from CMS | Banners-hero |
| Category Cards | Category cards view including image and category title - category names fetched from eCommerce backend. Static images not fetched from eCommerce backend. | Category Card |
| Promo Banner | Layout positioned below hero section (Image, Primary button). Data fetched from CMS | Horizontal Display Vertical Display |
| Product Slider | Set of product cards easy to navigate by swiping / using arrows - products fetched from CMS using its eCommerce backend integration. | Basic Product Slider |
Product Listing Page
Features in this section are available and used to build up the Product Listing Page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Breadcrumbs | Breadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are applied | Breadcrumbs |
| Filters Sidepanel | Includes OOTB: Category, Sort by, Filters (Size, Color) and number of results available per each filter's value - each time a new filter is incorporated in the backend, a new section is created automatically. | Filters |
| Product Grid | Includes responsive rows of product cards with the number of results presented above of it and pagination element at the bottom and scroll to top functionality | Product Card, Pagination |
| Product Card | Includes: product image, product price, add to cart button | Product Card Vertical |
Product Details Page
Features in this section are available and used to build up the Product Details Page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Breadcrumbs | Breadcrumb trail consisting on a set of links to parent pages appearing in hierarchical order when category filters are applied | Breadcrumbs |
| Gallery of images | Collection of images of the product that can be viewed and navigated | Gallery |
| Product Information Layout | Product name, Price, Add to Cart (several units) and static shipping information section | |
| Product Stock | Number of items available - stock information | |
| Product Reviews | Product reviews visualization fetched from eCommerce backend product information | Review |
| "Recommended with this product" Slider | Set of product cards easy to navigate by swiping / using arrows - products are hardcoded (8 first products returned from eCommerce are shown) | Basic Product Slider |
| Product Variants | Section for choosing among product variants (size) | |
| Product Details | Product description fetched from eCommerce backend | |
| Customer Reviews | Product reviews visualization fetched from eCommerce backend product information | Review |
Cart
Features in this section are available and used to build up the Cart page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Add / Remove unit from cart | Horizontal product cards enabling the addition or removal product units and even the removal of the entire product from card - clear cart not covered | Product Card Horizontal |
| Order Summary: Add / Remove promo code | Form enabling adding discount / promotion codes to the entire cart |
Checkout
Features in this section are available and used to build up the Checkout flow in the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Checkout form | Including Contact Information, Shipping Address & Shipping Details - Billing Address not included OOTB check your specific eCommerce backend docs to see how to enable it | Checkout Address Form |
| Payment Method Selection | Grid including placeholder for payment methods available | Payment Method |
| Place Order and Payment | Not available OOTB - check your specific eCommerce backend docs to see how to enable it |
User Authentication
Features in this section are available and used to build up the Product Details Page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Log in / Log Out | Log in / Log Out screen | |
| Register | Registration page with form for adding email address and password. Includes strong password validation |
My Account
Features in this section are available and used to build up the Product Details Page of the demo storefront.
| Feature Name | Detail | SFUI 2 Components Used |
|---|---|---|
| Settings: Personal Data, Shipping Details | Customer profile information can be added and edited by using forms | |
| My Orders: Orders List and Details | View of customer latest orders - including modal with order details |