Open

L’azurde Technical Requirements

Approving Authority:

______________________

Purpose

The purpose of a this document is to define the technical requirements and specifications for L’azurde Omni-Channel Project. The document serves as a blueprint for the project, outlining the project objectives, requirements, and constraints. It defines the project requirements in detail, including the functional and non-functional requirements. This document will serve as a reference document throughout the project, ensuring that everyone on the project team is aware of the project objectives, requirements, and constraints. It provides a common language and framework for communicating about the project to make it easier for project team members to communicate with each other and with stakeholders.

Scope of Work

This document outlines the Scope of Work for the development and implementation of an e-commerce system for our organization. The proposed system will leverage Cegid for OmniChannel, NextJS front-end website with BigCommerce as e-commerce back-end, Flow OMS for order management, Stamped.io for product reviews, Tamara, Tabby and VALU as BNPL providers, Checkout.com as card payment provider, Bloomreach Content CMS for content management and Bloomreach Discovery for Engagement and Searchandizing. The system is intended to provide an integrated platform for online sales and marketing to help drive business growth.

The following tasks will be undertaken as part of the implementation of the e-commerce system:

1. System Architecture Design: A detailed architecture design will be developed, outlining the various components of the e-commerce system and how they will integrate with each other.

2. System Implementation: The e-commerce system will be implemented based on the system architecture design. The NextJS front-end website with BigCommerce as e-commerce back-end will be developed, and the Bloomreach Content CMS and Bloomreach Discovery for Engagement and Searchandizing will be set up.

3. Integration with Third-Party Services: The various third-party services, including Cegid for OmniChannel, Flow OMS, Tamara, Tabby and VALU BNPL, and Checkout.com payment gateway, will be integrated with the e-commerce system.

4. Data Migration: All relevant data, including product data, customer data, and order data, will be migrated from the existing system to the new e-commerce system.

5. Testing and Quality Assurance: The e-commerce system will undergo rigorous testing and quality assurance to ensure that it is bug-free and functioning as intended.

6. Training and Support: Once the e-commerce system is fully implemented, training will be provided to L’azurde staff on how to use the system effectively. Ongoing support will also be provided to ensure that any issues are quickly resolved.

Functional Requirements

General Requirements

Multi-Client and Multi-Region Website

The system requires an ability for the user to browse and place orders based on the region/brand they are on, and generate an invoice accordingly. The acceptance criteria include:

• Display of product taxonomy and invoice details based on the client and region selected

• Ability to generate invoices based on the client's legal entities and terms of invoicing

• Display of product pricing based on taxes, such as UAE VAT (5%), Egypt VAT (14%), and KSA VAT (15%)

• Calculation of tax based on a formula provided

• Invoices to be based on the client's subsidiaries and legal terms in KSA, Egypt, and UAE

• Redirection of the user to the appropriate region website based on their Geo and IP location

• Redirection links to have two versions, English and Arabic

• Different invoicing terms for different regions/brands, such as L’azurde KSA and L’azurde Egypt

• Note that cross border deliveries will require HS codes for customs.

Implementation Details

NextJS storefront to follow sub-path (folder-structure based) routing, FE logic to be implemented for redirection. Tax-inclusive pricing to be configured on “Taxes and duties“ section in NextJS store settings.
Invoice generation details to be added by OMS team.[TBD] @Bilal Javed (Unlicensed)

Region Based VAT Tax (Multi-Tax)

The system requires the ability to charge tax to the user on their shopping based on the region selected, and for their invoice to reflect the tax of the region they shopped on. The acceptance criteria include:

• Display of VAT details at the time of checkout, including subtotal, estimated shipping & handling, VAT tax, and total to pay

• Ability to charge VAT on the invoice based on the store country selected

• Display of the total price customers will pay on the product pages without adding a % for tax at checkout/basket

• Display of the price minus the VAT on the basket and beyond, along with a line item showing the tax amount based on the % below:

• UAE VAT (5%), Egypt VAT (14%), and KSA VAT (15%)

• Formula for tax calculation: Assume tax is 15% and selling price is 2450. Cost X = (2450100)/115 = 2130.43 (i.e., Z100/Y)

Tax-inclusive pricing to be configured in “Taxes“ section for each store in BigCommerce store settings.

Implementation Details

Store Tax Setup - Tax overview

In Bigcommerce, tax details will be setup through each stores dashboard. - Manual tax setup

• Under ‘Store tax settings’, select option to have prices inclusive of tax.

• Create a tax zone to apply tax globally or per country. One default global zone will already be created for store. L`azurde will only require one zone per store.

• Create tax classes to apply different amounts taxes within a zone. Four classes are created by default. L`azurde will only require one class per zone.

• Add tax rates within tax zone. Each class within each zone can have its own tax amount. L`azurde will only require one tax amount per store.

• When creating/importing products in Bigcommerce PIM, assign appropriate tax class to product. Price will be adjusted accordingly, dependent on whether tax is set to be inclusive or exclusive of price.

If required Bigcommerce also provides REST APIs to manage taxes. https://developer.bigcommerce.com/docs/rest-management/tax-rates-and-zones/tax-zones#get-tax-zones

QR Code for Electronic invoices

The system requires the ability to get a QR code generated for an order and be able to view electronic invoice for that order by scanning the QR code.

• Ability to receive a QR Code in their email inbox when they place an order or on the invoice receipt generated by the POS

• Ability to view invoice information via QR Code scan

• QR Code Integration needs to done on all the Electronic invoices across all the merchants in KSA

Implementation Details

For KSA, electronic invoices require a QR code.

Implementation overview:

• Create a TLV QR code (Tag-Length-Value)

• Convert TLV to base64

• Convert base64 data string to QR code using third party library - cheprasov/js-qrcode

For details on KSA QR creation with zatca requirements, see https://zatca.gov.sa/ar/E-Invoicing/SystemsDevelopers/Documents/QRCodeCreation.pdf

Multi-Pricing and Multi-Currency

The system requires the ability to see product pricing and currency based on the store region selected

• Ability for the website to show pricing based on the country selected .e.g. KSA store may have different pricing than an Egypt store

• Pricing for the region to be configured on PIM

• Ability to show currency based on the country selected:

  • UAE: AED

  • KSA: SAR

  • EGYPT: EGP

Implementation Details

Currency change will be handled on the frontend. On region change, country based currency will be stored on the frontend and used within relevant flows and APIs. Some Bigcommerce APIs will also return the correct currency e.g. cart APIs.

Multi-Lingual

The system requires the ability to change the language on the website

• Ability to change the website’s language between: English and Arabic

• Each region will have two versions of the website

• Ability to show language selector banner to first time users. On selecting language, cookie will be stored with selected options.

• Ability to have the content in Arabic for the following components

  • Website Content: Branding/Menu/Pages

  • Product Information Management

  • Product Listing Pages

  • Pricing

    • Numbers to be in Western Format

    • Currency to be displayed in Arabic

  • Reviews

  • Checkout

Implementation Details

Language change will be handled on the frontend. On language change, proper language-region based locale will be stored on frontend and used through the site and within relevant APIs e.g. en-sa, ar-sa

This locale will also we updated in the site URL e.g. lazurde.com/en-sa/.

Site layout/designs will shift accordingly. Right-to-left for Arabic, Left-to-right for English.

Multiple Fonts

The system requires the ability to support English and Arabic fonts on the website

• Ability for the website to accommodate both English and Arabic

• Ability to have text alignment for fonts and language

  • English - Left to Right Alignment

  • Arabic - Right to Left Alignment

  • Currency to be aligned as per the language selected.

Implementation Details

Font change will be handled on the frontend. On language change, correct font will used for selected language; Roboto for English, Cairo for Arabic

Site layout/designs will shift accordingly. Right-to-left for Arabic, Left-to-right for English.

Multi-Frontend

The system requires the ability to navigate between different brands on the website and shop according to the selected brand

• Ability to switch between different brands from any website.

• On both desktop and mobile, brands can be switched from ‘Shop By Boutique’ section.

• Websites which may or may not fall under the same domain. Each website will have its own look and feel in terms of UI, however, UX will be the same.

• In case a user enters www.lazurde.com, the user to be redirected to the appropriate region website based on user’s Geo and IP location. Domains will be as following:

  • UAE - www.lazurde.com/en-ae

  • KSA - www.lazurde.com/en-sa

  • EGP - www.lazurde.com/en-eg

Implementation Details

Brand navigation will be handled on the frontend. On changing brand, appropriate and brand relevant information will be fetched from APIs and site will be updated.
Site URL will be updated as follows:

L'azurde - www.lazude.com/en-sa

MissL' - www.lazurde.com/en-sa/missl

Waves - www.lazurde.com/en-sa/waves

Frontend - L`azurde

The system requires the ability to browse or shop all brands products on the L’azurde website without switching any brand website.

• Ability to view all the brands products in the Explore All section of the Website and be able to filter products by other brands as well through the Brands filter

• Ability for the main L’azurde website to have all brands available on their website whether they have their own website or not.

  • L’azurde’s product listing pages(PLPs) will have all the products from brands under their umbrella as in Waves Jewelry and Miss L'.

  • However, L’azurde products will not be available on Waves and on Miss L'.

Implementation Details

Products will be fetched through Bloomreach Discovery. This includes product filtering and sorting. For complete details, refer to Technical Requirements Document - Phase 1 | Bloomreach Searchandizing

Responsive Design

The system requires the ability to browse the website on different device platforms.

• User to be shown the website based on their device. At least 3 breakpoints (desktop, tablet, mobile) supporting Chrome, Safari, Edge, Firefox & Opera are required.

• Ability for the website to have mobile first responsive design approach.

Environments - Dev/QA/Staging/Production

The system requires the following:

• Dev - An environment with a server workspace for developers to make changes without breaking anything in a live environment.

• QA - An environment with a server with master data (or master data regularly updated) for QA testing

• UAT/Staging - An environment for feature testing with sample data that needs to be Prod like

• Production - An environment with a server to go live.

Implementation Details

NextJS storefront to have 4 environments, each env to be connected to respective BigCommerce store. Bloomreach Content and Discovery to have 2 environments, staging and production.

Staging env to be connected to all lower environments. Production env to be connected to production BigCommerce and Production Bloomreach Content and Discovery environments. For Plytix PIM, separate channels to be created for connecting with dev, qa and uat environments on BigCommerce stores.

Uptime

The system requires the following ability for Uptime:

• An Uptime (99.99%)

• Response time SLA Dashboard including Reporting & alerts

Implementation Details

Up time to be ensured by Vercel hosting platform. Website reporting and analytics to be provided by Vercel.

Backend User Management

The system requires the following ability to manage user access and is able to create users and assign roles and permissions

• Ability for Employees/Backend User to register into the system with user authentication process for both.

• Ability to create/read/update/delete users of the system in the Control panel. Key requirements:

  • Ability to create a Role

    • Standard Roles

    • Custom Roles

  • Ability to Create a user

  • Ability to View a user

  • Ability to update user details

  • Ability to delete user

  • Ability to assign role to a user

  • Ability to define access control for a user on different modules

Implementation Details

Back-end user management for BigCommerce to be done from Account Settings > Users section from store dashboard. User management for Bloomreach Content and Discovery to be done from Identity and Access Management (IAM) dashboard by L’azurde team. Only L’azurde team has access to IAM. User management for Plytix is also to be managed by L’azurde themselves as only they have the admin access to Plytix PIM.

Audit Trail & Logging / Change History

The system requires the ability to view Audit Trail log and Change history and to report on them.

• Ability to store change log in the system log based on the following but not limited to:

  • Order changes

  • Product Catalog changes

  • Inventory changes

  • CMS changes

  • Returns changes

  • User management changes

  • Promotion changes

Implementation Details

BigCommerce store logs to be access from Settings > Store Logs. Bloomreach Content CMS logs to be accessed via Activity Stream on Bloomreach Content. Searchandizing logs and analytics to be accessed via Insights app on Bloomreach Discovery dashboard.

Localization & Time zones

The system requires the ability to operate websites based on user location so that, promotions and orders are aligned according to user time zone.

• Promotions to be set and run based on the Country time zone.

• Invoicing to be done based on the time zone of the Country ordered.

Implementation Details

Each store to have timezone of its respective country, promotions will be according to that timezone.

@Bilal Javed (Unlicensed) to add invoicing details. [TBD]

Analytics

The Admin/User requires the ability to Dashboard view for BI analytics based on metrics.

• The user requires the ability to pull all the information from the systems mentioned below and store it in a data lake (Data warehouse).

• The user requires the ability to customize the view through Headers and Filters.

• The user requires the ability to export information based on date ranges

• Reporting metrics to be done with system and Data Warehouse

• Metrics

  • Order Number

  • Invoice Number

  • Sku ID

  • Store ID

  • Employee ID

  • Date

  • Time

  • Brand

  • Collection

  • Listed Price

  • Selling Price

  • Items Cost

  • Main Category

  • Type

  • Metal Type

  • Metal Karal Only

  • Metal Color Only

  • Diamond

  • Diamond Carat

  • Diamond Shape

  • Stone

  • Stone Carat

  • Stone Color

  • Stone Shape

  • Payment Method

  • Delivery Method

  • Repeat Customer

  • Single Channel/Cross Channel

  • Customer Purchases

  • Customer ID

  • Order Status

  • Promo Code Value

  • Date Processed

  • Date Shipped

  • Date Delivered

  • Mobile / PC / Tablet

  • Fulfillment Location

  • Discontinued

  • Returned

  • Returned Reason Code

  • Cancellation

  • Cancellation Reason Code

  • Country

  • Governate

  • City

  • Area within city

Implementation Details

BI team to add details

Supports Report Delivery Format

The Admin/User requires the ability to export/import reports to create custom reports.

Formats

• PDF

• CSV

• XLS

Implementation Details

BI team to add details

Reports By Channel / Site

The system requires an ability to provide reports.

An ability to provide reports for Channel/Site (Reporting By Side).

• Report By Country

• Report By Brand

Implementation Details

BI team to add details

Standard Operational Reports

The system requires an ability to generate operations reports by selecting key operational metrics and KPIs.

• Common Examples:

• Inventory Reports

• Ageing SKUs Reports

• SLA reports

• Inventory Ageing Reports

Implementation Details

BI team to add details

Order Analysis

The system requires an ability to generate order analysis reports by selecting key order and sales metrics.

• Orders by state

• Orders by Site

• Orders by Country

• Sales report by Orders

Implementation Details

BI team to add details

Customer Analysis

The system requires the ability to generate customer analysis reports by selecting key customer metrics or KPIs.

• Recently Joined Customers

• Converted Customers

• Customers by Location

• Customer Lifetime Value

• Customer Detail

• Customer Reports based on RFM

Implementation Details

BI team to add details

Catalog & Product Reports

The system requires an ability to generate reports based on catalog and product metrics.

• Best Selling Products

• Frequently Bought Together

• Least bough product

• Product trend

Implementation Details

BI team to add details

Business Performance Reporting 

The system requires the ability to generate Sales reports by selecting key sales metrics and KPIs.

• Sales report by Orders

• Sales report by Items

• Sales report by time

• Sales reports by area

• Monthly Recurring Revenue

• Bounce Rate

• Churn Rate

Implementation Details

BI team to add details

Tab Navigation

The system requires the ability to provide tab navigation on the website for accessibility.

• Ability to use tab navigation, navigate through site without using mouse for people with disability

Implementation Details

This requires implementing keyboard accessibility features.

For tab navigation, the HTML tag attribute tabindex is used to determine correct order of component selection when using tabs. Elements must have focus styling to highlight selected element.

For further details, refer to Keyboard accessible - Accessibility | MDN

Customer Account Management

The system requires the ability for the user create and manage their account and addresses and log in/log out during various flows. The acceptance criteria include:

• The user to be able to have a Unified Account system on the L’azurde Website Users will have separate account for each region/expansion store.

• Ability to create an account through sidebar, buttons and links.

• Ability to create an account before ordering

• Ability to create an account during ordering on checkout page

• Display error messages on account creation failure

• Ability to verify account creation through OTP (not part of scope)

• Ability to verify account creation through email

• Ability for the Verification code or links to expire (not part of scope)

• Ability to update profile information on the “My Account” section

• Ability to update communication preferences

• Ability to login into an account on the website while browsing

• Ability to login into an account (If browsing as guest user) on the checkout page

• Ability to get error messages if there’s a login failure

• Ability to stay logged in until session expires

• Ability to login through Social Logins (not part of scope)

• Ability to log out of the website

• Ability to reset password

• Ability to update account/user information

• Ability to Add/Update Payment methods (not supported for third party payment methods in BigCommerce)

• Ability to manage addresses

• Ability to opt-in/opt-out of marketing notifications

• Ability to view Order details in account section

• Ability to request for Order Cancellation

• Ability to provide reviews and ratings for orders

• Ability to deactivate user account

• Ability to link social profile to user account (not part of scope)

• Ability to navigate through different sections on “My Account” Dashboard with convenience to go back to a previous page or section

Implementation Details

For details on implementing Customer Account Management APIs, refer to the Identity section.

Website Home Page

Navigation

The system requires an ability for the website to user to be able to to browse the L’azurde Homepage and navigate to different elements.

• User lands on the L’azurde website homepage when entering http://lazurde.com

• User is redirected to region website based on Geo and IP location when entering http://lazurde.com

• Redirection links to regional websites have two versions: English and Arabic

• User can directly access different brand homepages with respective URLs

• User can navigate to other brands through "Shop by Boutique" section on desktop and mobile web (Section Removed By Client)

• Website switches to the selected brand version upon selection

• "Back to L’azurde" option appears when user switches to a brand other than L’azurde

• User can navigate to different sections and pages through the homepage, including key listing pages, categories, website static pages, and different brands under L’azurde.

Implementation Details

Navigation menus for each brand and region to be created on Bloomreach Content CMS. Navigation links to be set up in the navigation menus components created on Bloomreach Content. Storefront to create and display navigation elements by fetch navigation menu content via Bloomreach Content SDK. Following component rendering pattern to be followed for displaying navigation menu components,

For more details about creating Navigation components on Bloomreach Content, refer to the Bloomreach Content - CMS section.

Store Elements on Home Page

The system requirs the ability to configure homepage elements that a user can browse through on a website in order to view different collections and place orders. These elements include:

• Brand title and promotional bar

• Language and region bar

• Top menu bar with options to shop by boutique, store locator, my account, wishlist, cart, and more

• Category bar with options such as jewelry, diamonds, bridal, gifts, and live events

• Search bar

• Hero section with imagery and a call to action (CTA) to a particular listing page

• What's trending section with trending products displayed horizontally and a CTA to shop all

• Live selling section with live selling sessions displayed horizontally and CTAs to book appointments or see live products

• What's new section with the latest products displayed horizontally and a CTA to shop all

• Shop by category section with product categories listed horizontally and a slider to navigate them

• Best sellers section with the best selling products displayed horizontally and a CTA to shop all

• Explore section with options to explore L'azurde exclusive items or L'azurde brands listed horizontally

• Shop our Instagram section with L'azurde or other brands content on Instagram and CTAs to like on Facebook or follow on Instagram

• Website footer with options to sign up or sign in, social platform links, customer service section, L'azurde world section, language and region selection, and payment options references

Note that the website header and footer do not appear in the checkout flow, and the category bar and horizontal sliding of each section are adjusted for the mobile version.

Implementation Details

Brand titles/logos, Promotional Bar, Category Bar, Explore Section, Website Footer, Shop by category and Hero Section to be configured in Bloomreach Content as components and displayed on storefront via Bloomreach Content SDK,

What’s Trending, What’s New and Best Sellers sections to be implemented as part of Engagement Module implementation by Voxwise team. (NOTE: Details to be added after discussion with Voxwise team. [TBD])

Live selling section to be implemented within the NextJS headless storefront using Bambuser Live Video Shopping platform. For enabling Bambuser live video selling on the home page, following snipped to be added to Home Page,

For detailed reference, visit Bambuser docs.

Instagram section to be implemented by using following Meta’s Instagram graph APIs,

For detailed reference, visit Instagram Graph API docs.

Language and Region Selector to be implemented within NextJS headless storefront as a static part of Navigation React Component.

Categories

The system requires the ability for the user to navigate through the Product Categories, so that he can browse products by Categories and place an order.

• The user should be able to navigate to the Product Categories from the Website Homepage through the Category Bar.

• On the Homepage, the Category Bar should have the following categories: New In, Jewelry, Diamonds, Bridal, and Gifts.

• On the Live Page (mobile version), the Categories should be featured on the Burger Menu.

• The Category Bar should have a collapsed view by default, which the user can expand.

• On Desktop version:

  • The Category bar should expand on hover to any of the Category titles mentioned above.

  • If a user clicks on the Category title, they should be taken to the selected Category.

  • Mouse hover out should close the Category Bar.

• On the Mobile Version:

  • On tapping a category in the Burger Menu, it should be expanded and a back button would appear on the top to go back.

• The expanded view should show Category details as follows:

  • Shop by Category

  • Necklaces & Pendants - On click, User will be taken to Necklaces and Pendants listing page.

  • Rings - On click, User will be taken to Rings listing page.

  • Bracelets & Anklets - On click, User will be taken to Bracelets and Anklets listing page.

  • Earrings - On click, User will be taken to Earrings listing page.

  • Jewelry Sets - On click, User will be taken to Jewelry Sets listing page.

  • Explore All Categories - On click, user will be taken to the All categories Product listing page.

  • Curated Shops

    • Best Sellers - On click, user will be taken to the Best Sellers listing page.

    • New In! - On click, user will be taken to the New In! listing page.

    • Online Exclusives - On click, user will be taken to the Online Exclusives Product listing page.

    • Last Chance! - On click, user will be taken to the Last Chance! Product listing page.

  • Shop by Gold

    • Gold Jewelry - On click, user will be taken to the Gold Jewelry Product listing page.

    • Rose Gold Jewelry - On click, user will be taken to the Rose Gold Jewelry Product listing page.

    • White Gold Jewelry - On click, user will be taken to the White Gold Jewelry Product listing page.

  • Shop by Gemstone

    • Diamonds - On click, user will be taken to the Diamonds Product listing page.

    • Ruby - On click, user will be taken to the Ruby Product listing page.

    • Sapphire - On click, user will be taken to the Sapphire Product listing page.

    • Pearls - On click, user will be taken to the Pearls Product listing page.

    • Cubic Zirconia - On click, user will be taken to the Cubic Zirconia Product listing page.

    • Colored Stone - On click, user will be taken to the Colored Stone Product listing page.

  • Collections & Collabs

    • Miss L’ X Lady Fozaza - On click, user will be taken to the Miss L’ X Lady Fozaza listing page.

    • My Gold Sign - On click, user will be taken to the My Gold Sign listing page.

    • My World - On click, user will be taken to the My World listing page.

    • SuperMiss L’ - On click, user will be taken to the SuperMiss L’ listing page.

    • My Gold Roots - On click, user will be taken to the My Gold Roots listing page.

    • So In Love - On click

Implementation Details

Category Bar component to be created on Bloomreach Content CMS and implemented on Storefront via Bloomreach Content SDK.

New In and Sales offer

The system requires the ability for the user to have access to New In and Sales offers on the website homepage to browse and place orders.

• The user should be able to browse New In Products and Sales offers via the Category bar.

• The Main navigation should include a New In category showing links to new products under each subcategory.

• The Main navigation should also include a Sale category showing links to products on sale under each subcategory.

Implementation Details

New In and Sales offers navigation components to be created as part of Category Bar component on Bloomreach Content CMS. The PLP pages for these offers to be created on Bloomreach CMS as well. PLP page content to be fetched via Bloomreach Product Search API. Products that are to be included in these offers MUST have New In and appropriate sales offer tags. For example, a Black Friday sale product should have “Black Friday“ in “Occasions and Campaigns“ list attribute on Plytix PIM.

Seasonal Campaign Banner on HomePage

The system requires the capability for the User to see seasonal campaigns on the website to browse and place orders.

• The user should be able to see Seasonal Campaign information on the Hero section.

• Clicking on the Seasonal Campaign information should take the user to the campaign listing page.

• The user should also be able to see Seasonal Campaign information on the Top Bar.

• Clicking on the Seasonal Campaign information on the Top Bar should take the user to the campaign listing page.

• The Banner should be displayed according to the design for each brand and screen size.

Implementation Details

Hero Banner component to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section.

Website Dynamic Pages

Category Page

The system requires the capability for the User to be able to browse products via categories and place an order.

• The user should be able to go to the Category page through the Expanded view of the Category Bar.

• On the Category bar, the user can go to different category pages by clicking on an option in the Shop by Category section.

• Clicking on a category should take the user to the Category page and list all the products under the selected category.

• Clicking on a product on the Category page should take the user to the Product detail page.

• Clicking on Explore All Categories option on the Shop by Category section should take the user to the Shop All page instead of a category page.

• The Shop All page should display products of all categories.

• Category information and Product Information should be coming from PIM.

Implementation Details

The category page for each of the categories to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section. The category page to have a Category Header component which will capture category name, optional description and an optional category banner. For Shop All page, Category Cards component will be used as a category page header instead of a category banner. Category PLP page content to be fetched via Bloomreach Product Search API.

Campaign Page

The systen requires the capability for the user to be able to browse products via Campaigns and place an order.

• The user should be able to go to the Campaign page through Promotional Banners on the Website.

• The user should be able to go to the Campaign page through Hero Content on the Website.

• The user should be able to go to the Campaign page through Trending sections on the Website.

• The user should be able to go to the Campaign page through Campaigns listed on the Category bar.

• Clicking on a Campaign should take the user to the Campaign page and display products related to the Campaign.

Implementation Details

The Campaign Page to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section. The Campaign PLP page content to be fetched via Bloomreach Product Search API. Products that are to be included in these offers MUST have appropriate sales offer tags. For example, a Black Friday sale product should have “Black Friday“ in “Occasions and Campaigns“ list attribute on Plytix PIM.

Store List

As a user, I want to access a Store Locator page to view the list of stores and navigate to them.

Acceptance Criteria:

• The store locator link should be available on the Top Bar and Footer of the homepage.

• On clicking the link, the user should be directed to the Store Locator page.

• The Store Locator page for L'azurde should display stores for all brands, while other brands should show only their respective stores.

• The store locator page should include the following details:

  • List of stores for L'azurde, Miss L', Kenaz, InStyle Distributors, and L'azurde Distributors.

  • Search by Address field, My Current location on GPS button, and a search button.

  • The store list should show store title, address, distance from the user's location in miles, and a Google Maps icon with a Select CTA.

  • On selecting the store, the Google map view should appear next to the store list, and the store details section should appear under the map view.

  • The store details section should display the store address, contact information, opening hours, and a 'Close' button.

• On mobile, the store titles should be scroll-able vertically.

Implementation Details

Store locations to be created by Flow OMS via BigCommerce Location APIs. Storefront to fetch store locations via BigCommerce Location APIs and display them on Google Maps.
Location APIs - BigCommerce Dev Center

Google Maps Integration

For React/NextJS frontend integration, we will use the third party package npm: @react-google-maps/api. @react-google-maps/api includes map components and custom hooks to integrate google maps within a react app.

We will use latitude/longitude details provided by the location APIs to add store markers on the integrated Google map.

If required, further store details can be fetched directly from Google Map Service APIs - https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse https://developers.google.com/maps/documentation/javascript/examples/place-details

NOTE: Googles map services/APIs are not free. Each service/API has its own usage and billing criteria. Google provides a monthly credit of $200. Any usage charges above this amount will have to be paid.
For usage and billing details, refer to https://developers.google.com/maps/documentation/places/web-service/usage-and-billing https://developers.google.com/maps/documentation/geocoding/usage-and-billing Platform Pricing & API Costs - Google Maps Platform

FAQ Pages

The system requires the ability for the Admin to configure FAQ pages and link them to the website.

• Admin can access FAQ Pages at control panel

• Display FAQ link on the webpage

• Ability to navigate to the FAQ pages

• Ability to create, update, and delete FAQ and help pages

• Ability to add imagery, audio, video, and media content to the FAQ and help pages

• Setup SEO URLs and meta tags for FAQ and help pages.

Implementation Details

The FAQ Pages to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section. SEO information for FAQ pages to be added via Bloomreach Page SEO section. Imagery and other FAQ page content to be added via reusable FAQ components from Bloomreach CMS.

Collections Management

The system requires the ability for the Admin to configure and manage collections to make them live on the website.

• Admin can manage collections in the control panel

• Ability to create and manage collections

• Ability to group products for marketing purposes

• Ability to define collection details for each level: Brand/Country Site/Channel

• Ability to define collection name, slug, and imagery (banners)

• Ability to assign products to the collection

• Ability to configure T&C, start date, and end date

• Ability to configure landing pages with templates for new collection launches and promotion periods.

Implementation Details

The product collection to be specified in “Collection” attribute in Plytix PIM. Collection Pages / PLPs to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section. Collection slug, name, banners, T&C, start date (UTC) and end date (UTC) to be specified as part of Collection component on Bloomreach CMS. If the end date is reached and collection page has not been removed/disabled from CMS, user to be redirected elsewhere. Strict front-end checks to applied to ensure users are not allowed to buy collection products after the collection has expired.

Website Static Pages

Landing Page Management - General

The system requires the ability for an Admin to configure static landing pages on the website for user navigation.

• Admin can manage static pages on the website

• Ability to create, update, and delete static content pages (e.g. T&C/Privacy Policy)

• Ability to add imagery, audio, video, and media content into the static content pages

• Ability to setup SEO URLs and meta tags for static content pages

• Static page should be in accordance with the provided UI designs

Implementation Details

Static pages to be created on Bloomreach Content CMS as per guidelines mentioned in the Bloomreach Content - CMS section. Reusable components to be created for T&C and Privacy Policy pages on CMS with options for adding text content and imagery. SEO information for Static Pages to be added via Bloomreach Page SEO section.

Show Breadcrumb Navigation on Static Pages

The system needs to show breadcrumb navigation on static pages for easy navigation.

• User can have breadcrumb navigation for static pages

• Breadcrumb navigation should be shown on static pages to make navigation easier for the user

Implementation Details

[No Designs - NOT part of phase 1 - TBD]

Error Handling

The system needs to show error pages to the user in case of errors on the website.

• User should be shown error pages in case of errors on the website

• 404 landing page should be shown in case of unavailable pages, page doesn't exist or access failure, with the following information:

  • Error message: "Whoops, our bad :(\nThe content you requested was not found."

  • CTA to Go Back to the previous page (On click, user to be taken back to the previous page they were browsing)

  • CTA to Store Home (User to be taken to the Store Homepage)

  • CTA to My Account (User to be taken to the My Account dashboard)

• Error page should be shown to handle generic technical errors (Microservice down, etc.)

• Outage page should be shown during outages

• Traffic should be redirected to this page during technical maintenance, system upgrades, and release in progress.

Implementation Details

Error page UI to be created as per Figma UI designs. Error page to be created within NextJS codebase, no content will be fetched from CMS.
[No error page for generic errors is available in designs, no outage page is available in designs]

Lazurde Static Pages (About Us, Contact Form, L’azurde Policies, Customer Service, Governance and Investor Relations)

The system requires the ability for the User to browse Help pages on the Website for L’azurde products.

• About Us: details about L’azurde and their business.

• Contact Form: information to contact L’azurde stores.

• L’azurde Policies: terms and conditions of L’azurde.

• Order & Returns: a static page related to order and returns.

• Customer Service: information about effective communication between the company and investors.

• Governance and Investor Relations: pages and stock information coming from Euroland.

Implementation Details

Static pages to be created as per Figma Designs. Each page to be created in Bloomreach Content CMS via reusable components. Following reusable components to be created,

About Us: Banner (Optional Text), 2 Column Layout (Text and Image), 3 Column Layout (Image, Text and Image), Our Heritage Calendar, Best Sellers (CDXP)
Contact Form: Banner (Optional Text), Contact Us Grid
L’azurde Policies: Vertical Text (Headings) List, Policy Text Section (Vertical 2 Section Layout)
Customer Service: Banner (Optional Text and Search Input), Help Center Grid
Governance and Investor Relations: Vertical Text (Headings) List, Section Header and Details (Vertical 2 Section Layout)
Celebrities Choice: Banner (Optional Text), Celebrity Image Cards, Two Column Layout (Text Sections with CTA), Best Sellers (CDXP)
In the Press: Banner (Optional Text), Cards Grid, Best Sellers (CDXP)

For a step by step guide for creating ancillary page components, refer to Ancillary Pages section.

Custom Pages

The system requires the ability for the Admin to create custom static pages based on templates to publish marketing pages accordingly.

• Admin should be able to create static custom pages on the website.

• Pages should be generic static pages based on a template for marketing purposes.

• An example of a page could be a Lab Grown Diamond educational page.

Implementation Details

Reusable components to be created on Bloomreach Content CMS as per Figma Designs. These components will be available for creating other custom pages that are not available in Figma Designs. The components to be created as per the guide lines in Page Creation Guide section.

Global Search

Search Preview Section

The website should show a search preview so that user can search for products and add them to the cart.

• User can perform a search using the search bar in the Category bar.

• Clicking on the Search icon triggers a search preview bar with specific components.

• When the Search field is blank, the search preview should display Popular Search Terms and Popular Searched Products.

• Popular Searched Products include Product Image, Product Title, and Product Price.

• Popular products are based on Products, Categories, and Promotions.

• Bloomreach provides information for Popular Search Terms and Searched Products.

• As the user types in the Search field, the search preview dynamically displays products matching the typed query.

• Auto-correction feature corrects misspelled words in the search bar.

• "Did you mean?" suggestions are shown while the user is typing.

• User can initiate the search by hitting enter or clicking on the search button.

• Search recommendations are provided by Bloomreach.

Implementation Details

Search preview and suggestions to be implemented via Bloomreach Autosuggest API. Please note that there are no designs available for this requirement.

For more details, refer to Autosuggest API docs.

Search Results Page

The user should be able to see search results when they perform a search so that he can view desired products and add them to the cart.

• The search result page should display the following details:

  • Results Found: "We found 'number' results for 'Search Keyword'"

    • 'Search Keyword' represents the user-entered search value.

    • 'number' is the count of products returned based on the search.

• Users can filter search results using tabs for Brand, Category, Type, Metal, Gemstone, Price, and Collection.

• On the mobile version, the filter selection appears in a dropdown.

• Users can sort the search results using a dropdown with options for New (Default), Best Sellers, Biggest Saving, Most Viewed, Price: low to high, Price: high to low, and Relevance.

• A bar shows the number of results being shown per page.

• The "View All" CTA allows users to see all search results on a separate page.

• The search result list includes product thumbnails, names, and prices.

• Page change buttons enable navigation with options for Previous Page '<', Current Page 'Current Number/Total Number', and Next Page '>'.

• If the search returns no results, display the message: "We found '0' results for 'Search Keyword'" and provide assistance options such as contacting customer service.

• The "You might also like" section shows a product carousel with recommended products including thumbnails, names, and prices. Recommendations are provided by Bloomreach.

• The "Customers also Bought" section displays product thumbnails, names, and prices. Recommendations are provided by Bloomreach.

• Define relevance criteria for search, including Brand, Category, Type, Metal, Gemstone, Price, and Collection.

• Implement breadcrumb navigation for search results: Homepage -> Search Results.

Implementation Details

The search results page to be created on Bloomreach Content CMS. Page UI to be designed as per Figma Designs. Product Search API to be used for fetching search results on search results page. Refer to Product Search API docs for endpoint and payload details.

Configuring Search Settings

The system requires the ability for the Admin to configure search settings to ensure accurate search results for users. The admin should be able to

• Define sorting rules for search results

• Define sequencing rules for search results

• Enable direct navigation to the Product detail page for exact match results

• Assign landing pages to specific search terms

• Provide synonym suggestions for search queries

• Configure alternate products per keyword and per product

• Show alternate products when the configured product is unavailable

• Display phrase suggestions for alternative product searches

• Configure search groups for search settings.

Implementation Details

For defining sorting, sequencing and ranking rules refer to the Bloomreach Facet Management docs. For search personalization, refer to the Search Personlization docs.

Detailed Search Analytics

The system requires the ability for the admin to have detailed search analytics in the system so that he can obtain reports on search analytics. The admin should be able to

• Access detailed search analytics and reporting

• Include or exclude specific products or pages from search analytics

• Obtain search analytics data from Bloomreach.

Implementation Details

For accessing and setting up search analytics, refer to the Search Analytics and Site Search Reports docs.

Website Header

Navigation

The system requires the capability for the user to be able to view website header on the L’azurde website and access key information .

• Display brand title according to the Brand selected

• Display Promotion banner, if the website has any promotion going on.

  • Clicking on the link will take the user to the Promotion page

• For the first time user, Language and Region bar to appear for user to select their preferred Language and Region bar.

• Top Menu Bar

  • Shop by Boutique (Section Removed By Client)

  • Store Locator

  • Region and Language selector

  • My Account Icon

  • Wishlist

  • Cart

• Category Bar

  • Brand Logo

  • New In

  • Jewelry

  • Diamonds

  • Bridal

  • Gifts

  • Live Events

  • Search Bar

• An ability to have standard header across all pages on the website other than Checkout and Thank you page

• An ability for the menu expand on hover or tap with animations

Mini Cart

The system requires the capability for the user to be able to have a mini cart view on the website header and be able to see cart information.

• Display cart icon on header. Clicking icon expands mini cart to show user added items in cart with all required details as per designs.

• Mini cart will also expand whenever use carts an item to cart from any page.

• On collapsed view, the cart icon should show Item count badge.

• Ability to proceed to cart page from mini-cart (cart is always the first step of the checkout).

Implementation Details

The header component is to be created on Bloomreach Content CMS. This component should be added on every applicable page within Content CMS. Page UI to be designed as per Figma Designs. For details on creating the required menu fields and header component, refer to Bloomreach Content CMS sections.

Website Footer

The system requires the capability for the user to be able to see a Website footer at all times to view information related to L’azurde

• Sign Up/Sign In. On click, user to be taken to Sign Up/Sign In screen, Provide information of 10% discount for Member Signup ‘Sign Up And Get 10% Off’

• Social Platform Links

  • Instagram

  • Facebook

  • Pinterest

  • Twitter

  • YouTube

• Customer Service Section

  • Contact Us

  • FAQ

  • Store locations

• Services section

  • Sale permit

  • Terms and Conditions

  • Warranty

• L’azurde World

  • About L’azurde

  • Heritage

  • Celebrities Choice

  • Governance and Investor Relations

• Maroof QR Code

• Language and Region selection

  • Country dropdown. On select, website to be changed according to the selected country

  • Language dropdown. On select, website to be changed according to the selected language

• Payment Options references

  • Tabby

  • Paypal

  • Apple Pay

  • Visa

  • Mada

  • Tamara

• Footer should be visible on all pages expect Checkout and Thank you page

Implementation Details

The footer is component to be created on Bloomreach Content CMS. This component should be added on every applicable page within Content CMS. Page UI to be designed as per Figma Designs. For details on creating the required menu fields and footer component, refer to Bloomreach Content CMS sections.

Product Listing Page (PLP)

Displaying Product Listing Page Elements

The website user should be able to navigate to the Product Listing page to browse and add products to the cart. The acceptance criteria include various ways to access the Product Listing page, such as through the category bar, hero section, shop now button, what's trending section, and more. Clicking on the desired option takes the user to the Product Listing page, which displays the category title, category thumbnails (e.g., necklaces, rings), breadcrumb navigation, filters, sort by option, and pagination. The page also includes a CTA to view all products, a product list with thumbnails, names, and prices (including discounts), product ribbons or tags (e.g., new, online exclusive), and indications for out of stock or discontinued products. If a product is in the user's wishlist but no longer available, recommendations based on that product are shown.

Implementation Details

Each product listing page to be created on Bloomreach Content CMS. Page UI to be designed as per Figma UI designs. Explore all categories section to be created as a reusable component on Bloomreach Content CMS. Refer to the PLP Page Creation Guide section for step by step details for creating PLP pages and related components.

Product Images on PLP

The user should be able to view product images based on their preference on the Product Listing page (PLP). The acceptance criteria include the ability to switch between product view and model view. The user should be able to change the view for all products or individual products by selecting a tab or hovering the pointer respectively. It is specified that the changes made by the user should not be kept in the session and the default selection should be product view. This means that any changes made by the user will not be retained when navigating to other categories or refreshing the page.

Implementation Details

Product images on PLPs to be displayed as per the Figma designs. The source for product images is Plytix PIM. If the product contains multiple images then they would be displayed in a slider. The image switching will not be kept in user session.

Sorting Functionality on PLP

The user wants to have sorting functionality on the Product Listing page (PLP) to sort the list according to their preferences. The acceptance criteria include the availability of a Sort by Menu on the Filter and Sort bar, with options such as sorting by new, price (high to low and low to high), recommended, best sellers, most viewed, and biggest saving. The default sorting option is "New." When the user clicks on a sorting option, the Product Listing page should sort the products accordingly. Additional requirements include the ability to manipulate the PLP based on visual merchandising configuration, apply default sorting per product category, visually order products per category, display out of stock items at the end of the listing page, handle discontinued products and wishlist items, and specify fallback for sorting default. If no default sort order is configured per category, the sorting will default to "Featured Products," and if that is not configured either, the default will be "New."

Implementation Details

New, Price Low to High and Price High to Low sorting filters to be implemented by Shopdev as explained in the Product Search API section. The other sorting filters are to be implemented as part of engagement module by Voxwise. For adjusting product ranking, refer to the Ranking Tool docs.

Filter Functionality on PLP

The user should be able to apply filters on the Product Listing Page (PLP) to get products based on their preferences. The acceptance criteria include having filter functionality on the PLP through filter options on the Filter and Sort bar. On the mobile version, the filter options should appear in a dropdown menu. The available filter options include filtering by price, brand, category, metal, type, gemstone, and filtering for new products only. When the user selects filters, the product listing page should be updated based on the selections. Key requirements for filters include the ability to configure filters per product category independently, configure filter groups for categories, allow multi-select filters, and ensure regular data sync for up-to-date filtering and sorting, including integration with third-party systems.

Implementation Details

Filters UI to be implemented as per the Figma UI designs. All product attributes which are to be used as filters must be configured in Bloomreach Searchandizing dashboard. For configuring filters and facets, refer to the Facet Management docs.

Configuring Ribbons in the PLP

The admin needs to be able to configure ribbons for the Product Listing Page (PLP) so that they can appear on products. The acceptance criteria include the ability for the admin to configure ribbons on the PLP with the following key requirements:

1. Ribbon Rules: The admin should be able to define business rules to show ribbons on products based on criteria such as new, clearance/sale, bestsellers, or exclusivity.

2. Custom Ribbons: The admin should be able to define custom ribbons to display on the PLP.

3. Ribbon Design: The admin should have control over the appearance and visual design of the ribbons.

4. Apply Ribbons: The admin should be able to apply ribbons to individual products, and the available ribbon options may include "New," "Sale," "Exclusive," and "Discount."

Implementation Details

Ribbons to be included in the Ribbons product attribute array in Plytix PIM. If the Ribbon is added to product attributes then it will show up on PLP as per the UI designs.

Seasonal Campaigns on PLP

The user needs to be able to see seasonal campaigns on the Product Listing Page (PLP) in order to browse products according to the campaign and place orders. The acceptance criteria state that the user should be able to view seasonal campaigns on the PLP, including the campaign title and tags on the products. The key configurations for this feature include,

1. Configuring Seasonal Campaigns: The system should allow the configuration of seasonal campaigns with the following details:

   • Products allocated to the campaign

   • Promotion terms and conditions

   • Expiry date of the campaign

   • Number of days to expiry

   • Display a countdown of the time left to buy on the last day of the promotion

2. Promotion Restrictions: The system should support any restrictions or limitations on the promotion, such as eligibility criteria or quantity limits.

Implementation Details

Seasonal campaigns to be added as part of Occasions and Campaigns attribute in Plytix PIM. A PLP to be created on Bloomreach Content CMS with details added about
campaign name, start and expiry time and T&C details. Promotion to be created from Cegid and synced with BigCommerce.

Lazy Loading

The user needs to be able to scroll through the Product Listing Page (PLP) in order to browse all the products. The acceptance criteria state that when the user scrolls to the bottom of the page while browsing all the products, a lazy loading mechanism should be triggered to load more products. This ensures that as the user continues to scroll, additional products are dynamically loaded and displayed on the PLP, allowing them to browse through a larger inventory without having to navigate to separate pages or load all products at once.

Implementation Details

Lazy loading of products to be controlled by a Load More button as per the new requirement.

Adding to Cart on PLP

The user needs to have the ability to add products directly to the cart from the Product Listing Page (PLP) in order to make a purchase. The acceptance criteria state that the user should be able to add a product to the cart by clicking an "Add to Cart" button on the product thumbnail. The "Add to Cart" button should appear when hovering over the product thumbnail. Additionally, the mini cart should reflect the product added to the cart, and the badge count on the mini cart should update accordingly. There is also a configuration for a quick buy option, allowing users to quickly add an item to the cart and proceed to checkout. The options presented to the user for adding to cart should be based on stock availability. It's important to note that these options are only available on desktop and not on mobile.

Implementation Details

Add to cart UI to be implemented as per the Figma Designs. Add to Cart API as described in the Cart section to be triggered.

Adding to Wishlist on PLP

The user needs to have the ability to add products to their Wishlist directly from the Product Listing Page (PLP) in order to make a purchase later. The acceptance criteria state that the user should be able to add a product to the Wishlist by clicking an "Add to Wishlist" button or a heart icon on the product thumbnail. The "Add to Wishlist" button or icon should appear when hovering over the product thumbnail (for desktop) or on the Product Listing page. The Wishlist icon should reflect the product added to the Wishlist. Additionally, the user should be able to add products to their Wishlist when they are logged in, and if they are not logged in, a trigger option to log in should be provided.

Implementation Details

Add to wishlist UI to be implemented as per the Figma Designs. Add to Wishlist API as described in the Wishlist section to be used.

Product Description Page (PDP)

Defining PDP page elements

The system requires an ability for the user to be able to go to a Product detail page to view details and add to cart.

• Ability for user to go to PDP from product listings from pages e.g. Home page, Product listing page (PLP). User will be redirect on click product image/thumbnail.

• Ability to have breadcrumb navigation on the PDP for better navigation

• Display product images and videos on the PDP for devices.

• Displayed images should have the following functionality:

  • Carousel - View multiple images in a carousel, max images per standard product 4

  • Zoom - Ability to zoom into an image of the product by screen tap and mouse hover.

  • 360° - Ability to view 360° Images

  • Videos - Ability to capture video of a product (not part of phase 1)

  • Images per variant

    • Ability to capture and view images per variant

    • View images in the selected Product color

  • Advanced functionality - Ability to have zoom/swipe/multi-touch features for images ( Mobile /touch screen)

• Display product content section (see PRD for full details)

• Display ribbons and tags configured of the Product on the PDP

• Display alternate product in case a product is sold out or not available

• Display recommend products to the user based on ML, driven by CDXP

• Display recently viewed products on the PDP

• An ability to allow user to opt in for in stock alert (In case of Out of stock item)

• Display promotion related to the Product or store if available

• All products suggestions should be in stock and available to buy

Defining PDP secondary page elements (not part of phase 1)

The system requires the ability to have enhancements for a better experience on the Product detail page.

• Ability to generate a small sound to indicate successful ATC.

• An ability to configure widgets per device

• An ability to allow user to share product on social platforms (Facebook, Twitter, Instagram, Whatsapp, Pinterest, Email/Others)

Implementation Details

For details on implementing PDP pages, refer to the Product Details (PDP) and Product Reviews sections.

Wishlist

Unified Wishlist

The system requires an ability to have a unified Wishlist across all brands and show these products in Wishlist sections.

The User should to be able to add products to their Wishlist from the Product detail page of the Product for any brand. Following are the key requirements:

• User can then view the all the products in their Wishlist and purchase them afterwards. Also, this Wishlist will be unified/common so can have products from different L’azurde’s websites on any given time unless the user changes the region

• Share Wishlist via share options to others

  • Share Wishlist via Social Platforms

  • Share Wishlist via Email

  • Share Wishlist via Text/WhatsApp

The Common Wishlist will only be valid in the same region, for example One Wishlist would only work for UAE region, For KSA Region the user would have a separate Wishlist based on their KSA Account.

Managing Wishlist

The system requires an ability for the user to be able to manage their Wishlist in “My Account” and be able to ATC products.

• Ability to be able to manage their Wishlist on the My Wishlist section on the My Account

• My Wishlist Listing Page Details

  • Display number to show the count of items in the Wishlist

  • CTA - Add All to Bag - On click, all the items in the Wishlist will be added to bag and user will be taken to the bag (Cart page)

  • Items Listing

    • Item Thumbnail

    • Item Title

    • Item Price

    • CTA - Add to Bag. On click, the item will be added to bag and user would be notified

    • CTA - Remove. On click, the user would be asked if they want to remove the item from Wishlist. If yes, the item would be removed

  • Products not available in Region. In case there are products from region other than current selected region, they will be displayed in this section greyed out.

  • No Products in Wishlist - In case there are no products in the User’s Wishlist:

    • Message to be displayed - “You currently don’t have any items on the Wishlist”.

    • CTA - Start shopping - On click, the user to be taken to the L’azurde homepage

• Breadcrumb Navigation Wishlist - An ability to navigate on the Wishlist page through breadcrumb navigation

• Prompt to login if User is Guest - Ability to trigger alert to the user to login if they are adding to Wishlist as a guest user

Implementation Details

For details on implementing Wishlist, refer to the Wishlist sections.

SEO

Robots.txt configuration

The system requires an ability to be able to configure a Robots.txt file for SEO.

• Ability to be able to manage the allow/disallow process for the robots.txt file.

• Ability to be able to configure which URLs can and cannot be crawled by Google.

• Ability to add XML sitemaps to robots.txt file.

• Ability to update the robots.txt file from the BigCommerce backend.

Implementation Details

A robots.txt file lives at the root of your site. So, for site www.example.com, the robots.txt file lives at www.example.com/robots.txt. robots.txt is a plain text file that follows the Robots Exclusion Standard. A robots.txt file consists of one or more rules. Each rule blocks or allows access for all or a specific crawler to a specified file path on the domain or subdomain where the robots.txt file is hosted.

File will be created in the root of our NextJS storefront.

For further details, refer to https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt#:~:text=The%20robots.txt%20file%20must,.com%2Frobots.txt%20..

Sitemaps configuration on the Website

The system requires an ability to configure sitemaps on the L’azurde website.

• Sitemap XML Categories/PDF/CMS

  • Ability to create a specific sitemap for Homepage, (CLPs & PLPs), PDPs and content pages - split by market and language.

  • Ability to automate the XML sitemap when new products/brands/landing pages are added/removed.

  • No dynamic URLs should be included in the XML sitemaps (Optional).

  • The sitemap should contain href lang tags for all URLs (For eg - A PLP in KSA EN should have all its variations listed in other markets and language) (Optional).

Implementation Details

To create and implement a sitemap, follow these steps:

1. Plan the structure of your website: Determine which pages are most important and understand their hierarchical relationship with other pages.

2. Create the sitemap file: You can write a sitemap file manually using XML syntax or use an online sitemap generator tool to automatically generate the file for you.

3. Submit the sitemap file to Google: Sign in to Google Search Console and navigate to the "Sitemaps" section under "Index". Click the "Add/Test Sitemap" button and enter the URL of your sitemap file.

4. Monitor the sitemap's status: After submitting the sitemap, review the status report to verify that Google has successfully processed it. The report will also show any errors or warnings that need to be addressed.

5. Update the sitemap regularly: As changes are made to the website, be sure to update the sitemap file and submit the new version to Google for indexing.

For further details refer to https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap

Href-Lang

The system requires an ability to configure Href-lang on the L’azurde website.

• Requirements

  • Create a file to direct Google to appropriate country/language

  • All indexable pages on the website should contain the href lang tags in the HTML (For eg - A PLP page on the website should have all its variations basis market and language should be listed in the HTML).

Implementation Details

Need to implement href lang tag in head section for each version
Here is an example:

Add <link rel="alternate" hreflang="lang_code"... > elements to your page header to tell Google all of the language and region variants of a page.

For each variation of the page, include a set of <link> elements in the <head> element, one link for each page variant including itself. The set of links is identical for every version of the page. See the additional guidelines.

Here is the syntax of each link element:

For each domain

Href-lang tags will be implement on NextJS frontend.

For further details refer to https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites

Canonical URLs

The system requires an ability to configure Canonical URLs on the L’azurde website.

• Requirements

  • Google needs rules and implementation to prevent duplicate indexation.

  • All indexable URLs should contain self referencing canonical tags by default. [Except dynamic/filter pages these will have canonicals to the respective category or brand page].

  • The system should have the ability to manually overwrite the canonical tags for the pages.

Implementation Details

Adding canonical tag in Next.js

Here's a step-by-step implementation using BloomReach Content and Next.js for canonical URLs on the L'azurde website:

BloomReach Content Configuration:
a. Log in to BloomReach Content and access the website's configuration settings.
b. Locate the SEO settings or Metadata settings section where you can manage canonical URLs.
c. Enable the option to automatically generate self-referencing canonical tags for all indexable pages by default.
d. Configure dynamic/filter pages to have canonical tags pointing to their respective category or brand pages.
e. Save the configuration changes.

Next.js Implementation:
a. Identify the layout or template file(s) in your Next.js project that render the HTML structure of your website.
b. Install the necessary dependencies for handling server-side rendering (SSR) in Next.js, such as next-seo or react-helmet.
c. Import the required modules into your layout or template file(s).

Configure Self-Referencing Canonical Tags:
a. Within the layout file(s), locate the code responsible for rendering the <head> section of each page.
b. Implement logic to dynamically generate the canonical URL for each page.
c. Retrieve the current page's URL and assign it to a variable.
d. Render the self-referencing canonical tag within the <head> section using the appropriate module from the imported dependencies.

Handle Dynamic/Filter Pages:
a. Identify the dynamic or filter pages in your Next.js project.
b. Modify the logic for generating canonical URLs to handle these pages differently.
c. Retrieve the respective category or brand page URL for each dynamic/filter page.
d. Render the canonical tag within the <head> section using the appropriate module, pointing to the respective category or brand page URL.

Manual Override of Canonical Tags:
a. Implement a mechanism to allow manual override of canonical tags for specific pages.
b. Create a user-friendly interface within the CMS or an admin panel to input or modify the canonical URL for each page.
c. Store the manually overridden canonical URL in a suitable data structure or database.

Retrieve Manual Overrides:
a. Update the logic for generating canonical URLs to check for any manually overridden URLs for each page.
b. Retrieve the manually overridden URL for the current page from the data structure or database.
c. If a manual override exists, use it as the canonical URL for the page. Otherwise, proceed with the default self-referencing canonical URL logic.

Page Title

The system requires an ability to configure Page Title for SEO configuration on the L’azurde website.

Page title should be template driven and customizable (<meta name="title" content="xxx/>), And the systems can overwrite tags by a csv upload.

• Templates

  • Brand [Eg - Miss L]

  • L1 categories [Eg - Jewelry]

  • L2 categories [Eg - Shop By Metal]

  • L3 categories [Eg - Rings]

  • PDP [Eg - Product Title]

  • Country [Eg - Egypt]

  • Page Number [For paginated pages]

Implementation Details

Page titles will be editable through Bloomreach Content for each page and added as meta tags on NextJS frontend.

2 ways to set page titles and meta descriptions in Next.js. The first approach is only available for server components in Next.js 13 and above, while the second one works well with older versions of the framework. Next.js: Set Page Title and Meta Description

https://nextjs.org/docs/app/api-reference/file-conventions/metadata#other

(CSV upload) This would add to the scope of FE implementation. Cannot be made part of September go live.

Meta Description

The system requires an ability to configure Meta Description on the L’azurde website.

META Description should be template driven with the ability to customize each one individually (<meta name="description" content="xxx/>), And systems can overwrite tags with a csv upload.

• Templates

  • Brand [Eg - Miss L]

  • L1 categories [Eg - Jewelry]

  • L2 categories [Eg - Shop By Metal]

  • L3 categories [Eg - Rings]

  • PDP [Eg - Product Title]

  • Country [Eg - Egypt]

  • Page Number [For paginated pages]

Implementation Details

Meta descriptions will be editable through Bloomreach Content for each page and added as meta tags on NextJS frontend.

2 ways to set page titles and meta descriptions in Next.js. The first approach is only available for server components in Next.js 13 and above, while the second one works well with older versions of the framework. Next.js: Set Page Title and Meta Description

https://nextjs.org/docs/app/api-reference/file-conventions/metadata#other

(CSV upload) This would add to the scope of FE implementation. Cannot be made part of September go live.

Alt-Text for Images

The system requires an ability to configure Alt-text for images on the L’azurde website. Following is the requirement:

• Requirements

  • Images should be named appropriately (descriptive names rather than file numbers) and ALT text should replicate the image file name.

  • System should add the product title as the “alt” automatically.

  • For multiple images, system should append a number [For Eg - 18K Gold Diamond Drop Earring - 2].

Implementation Details

Image details (title, alt-text etc) will be added and provided by the image source i.e. Plytix PIM or Bloomreach Content. Frontend will implement these images accordingly.

<h>-Headlines

The system requires an ability to configure <h>-headlines for text based content on the L’azurde website.

• Heading Tag structure to be implemented (H1 - H3) based on site designs.

• Ability to add and modify any heading tag.

• Ability to configure tags from H1 - H4

• No irrelevant heading tags placement (eg: On elements from footer of website, sign up, add to cart etc.)

• By default all page headings should have <h> tags [basis design] -

  • Page title - <h1>

  • Sub headings - <h2>

  • Sub-Sub headings <h3>

  • All PDP titles on PLPs - <h3>

Implementation Details

Heading tags will be implemented on NextJS frontend as per the SEO figma designs.

Domain structure

URL structure shared by Incubeta

https://docs.google.com/spreadsheets/d/1Qqh2ITTQr_peKZHsESZ4b9W6yuclX-LK3t6zwJQFCxs/edit#gid=1250074119

Implementation Details

• NextJS folder structure for creating L’azurde PLPs → /pages/[slug]/[categoryName/campaignName]

• NextJS folder structure for creating MissL' PLPs → /pages/missl/[slug]/[categoryName/campaignName]

• NextJS folder structure for creating Waves PLPs → /pages/waves/[slug]/[categoryName/campaignName]

• NextJS folder structure for creating L’azurde PDPs → /pages/p/[productSKU-productTitle]

• NextJS folder structure for creating MissL PDPs → /pages/missl/p/[productSKU-productTitle]

• NextJS folder structure for creating Waves PDPs → /pages/waves/p/[productSKU-productTitle]

• NextJS folder structure for creating L’azurde Collections → /pages/collections/[collectionName]

• NextJS folder structure for creating MissL Collections → /pages/missl/collections/[collectionName]

• NextJS folder structure for creating Waves Collections → /pages/waves/collections/[collectionName]

Automatic URL Rewrites

The system requires an ability to configure Automatic URL Rewrites on the L’azurde website.

• URL structure should be clean and driven by taxonomy naming conventions

Implementation Details

When using parameters in a rewrite the parameters will be passed in the query by default when none of the parameters are used in the destination.https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites#rewrite-parameters

Custom URL 

The system requires an ability to configure Custom URL for SEO on the L’azurde website.

• An ability to configure Custom URL for SEO configuration.

Implementation Details

Custom URLs is not possible but predefined new URLs as predecided URLs will be added

Miss L' URL Takedown

The system requires an ability to redirect Miss L' to L’azurde once it’s taken down.

• Key Requirements

  • Miss 'L Jewelry website is currently a standalone website. However, it will be taken down and it will be come under L’azurde website / domain. However, it will still have its own UI.

  • The domain name of Miss L Jewelry and will 301 redirect directly to Miss L within the L’azurde platform. Example: Going to Miss L Rings would 301 redirect the user to Miss L rings on L’azurde website.

Implementation Details

In Next.js, we can list all the redirections inside the next.config.js file.

Assume that the old path /old-contact-page and the new path is /new-contact-page.

Set Up the 301 Redirect in a Next.js App or https://nextjs.org/docs/pages/api-reference/next-config-js/redirects

Redirection of Existing URLs

The system requires an ability to configure redirects for existing URLs.

• Key Requirements

  • Any existing URLs which will be 404-ing will require redirecting to their respective replacement

  • Waves will be placed under L’azurde in folder structure with the following URL structure.

• URL structure for Miss L'

  • lazurde.com/en_sa/missl

  • lazurde.com/ar_sa /missl

  • lazurde.com/en_eg/missl

  • lazurde.com/ar_eg /missl

  • lazurde.com/en_ae/missl

  • lazurde.com/ar_ae/missl
    
    

• URL Structure for L'azurde

  • http://lazurde.com/sa_en

  • http://lazurde.com/sa_ar

  • http://lazurde.com/eg_en

  • http://lazurde.com/eg_ar

  • http://lazurde.com/ae_en

  • http://lazurde.com/ae_ar
    
    

• Ability for all current L’azurde URLs to be redirected to new L’azurde URLs

  • All existing L’azurde Products PDP URLs to be linked with New PDP URLs

• Ability to add custom redirects to any existing URL on the website

  • A URL structure document will be shared separately.
    
    

• Redirection to the region website from

  http://lazurde.com
  
  

  • In case a user enters http://www.lazurde.com , the user to be redirected to the region website based on user’s Geo and IP location

    • Entry point - http://www.lazurde.com

    • Redirection to the following links from the entry point based on the region

      • UAE - www.lazurde.com/en-ae

      • KSA - www.lazurde.com/en-sa

      • EGP - www.lazurde.com/en-eg

    • All the redirections link to have two version

      • English

        • If the region selected is in English language then en would be part of the URL for example: http://lazurde.com/en-sa

      • Arabic

        • If the region selected is in Arabic language then ar would be part of the URL for example: http://lazurde.com/ar-sa

Implementation Details

Regional URL redirection and 404 redirection will be handled by NextJS frontend.

In Next.js, we can list all the redirections inside the next.config.js file.

Assume that the old path /old-contact-page and the new path is /new-contact-page.

Set Up the 301 Redirect in a Next.js App or https://nextjs.org/docs/pages/api-reference/next-config-js/redirects

Design Review

The system requires an ability that the Wireframes and site designs to be reviewed to ensure SEO friendly (ie. heading tags, on page content, internal linking)

SEO team will also review the HTML on staging along with the backend for items mentioned in this document

Implementation Details

Frontend will be implemented as per SEO requirement's and figma designs.

Filtering

The system requires an ability to configure Filters for SEO configuration.

• Requirements

  • Rules to be created in order to account for filtered URLs and multi-select attributes across one or more filter types.

  • Display the filters applied separately for the user to understand what filters are currently applied while allowing the user to remove filters when needed.

  • The filter bar needs to be sticky and follow the user scrolls through the page.

  • Filter dynamic URLs should contain canonical tags to the main page.
    
    

Implementation Details

Filter Dynamic URL contain canonical tag implementation

Adding canonical tag in Next.js

Schema Markup

The system requires an ability to configure Schema for SEO Configuration.

Schema markup required across various page types with key information (ratings/reviews, price, availability, product attributes).

The system requires an ability to manage schema codes from the backend at a template level homepage, categories and PDPs.

• Additional schema to be integrated apart from product schema

  • Breadcrumb schema

  • Organization schema

  • Local Business schema
    
    

Implementation Details
Schema Markup 

https://prismic.io/docs/schema-org-nextjs

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data#structured-data

https://blog.harveydelaney.com/creating-breadcrumb-structured-data-for-your-react-typescript-website/

add multiple local business schema in my next js application, next-seo package for this https://stackoverflow.com/questions/64047197/array-of-localbusinessjsonld-schema-using-next-seo

Content Placeholder

The system requires an ability to have content placeholder for SEO Configuration.

• Requirements

  • Adding an HTML content placeholder on the category and homepage. This will be place above the footer section.

  • Ability to implement and configure heading tags (H1, H2, H3), integrate texts in HTML.

  • Ability to add links in the content to other pages.

  • A read more tab will be present to expand the content on mobile and desktop.
    
    

Implementation Details

Placeholder component to be created from frontend and content will be added to pages through Bloomreach Content.

Internal Links

The system requires an ability to have internal links for SEO Configuration.

• Requirements

  • A “popular search” section to be placed under the main footer section for internal linking. This can be in an accordion.

  • Ability to implement/customize new anchor text and hyperlinks as suggested by SEO team on the footer section on main L'azurde website, Miss L and other brand pages.

  • Ability to implement/customize popular searches section across the website which hyperlinks to relevant pages.
    
    

Implementation Details

Popular search section to be implemented by Voxwise team.

Pagination

The system requires an ability to have Pagination scrolling for SEO Configuration.

• Requirements

  • Replace the numbered pagination to a ‘load more’ button.

  • Webpage to have static URL on “load more” click (rings/page-2) instead of dynamic URL (rings/?page=2).

  • Implement noindex, follow meta directives onto paginated pages.

  • Implement rel next and rel prev directives on paginated pages.

  • Implement self referencing canonicals on paginated pages.

  • Main page’s meta title to be appended with page number.

     

Implementation Details

Pagination will be implemented on NextJS frontend as per the SEO figma designs.

Navigational Links

The system requires an ability to have Navigational Links on PLPs for SEO configurations.

• Requirements

  • The system requires an ability to manually add links and anchors to these tabs.

  • Create a new placeholder under the breadcrumb of PLP pages to link important pages .
    Example:
    On the rings category page the placeholder can include hyperlinks to static pages for ‘Engagement.
    ring’, ‘Cocktail rings’ or any other new landing page that we may create.

Implementation Details

Navigational Links will be implemented on NextJS frontend as per the SEO figma designs.

Breadcrumb

The system requires an ability to have Breadcrumb across the Website for SEO Configuration.

• Requirements

  • All levels of page hierarchy to be displayed on the breadcrumb.

  • CrOn the PDP page level, product title should be the last level without the link.

  • Ability to change “Home” in the primary level of breadcrumb to respective brand name.

  • Breadcrumb schema implementation to be automated.
    
    

Implementation Details

Breadcrumbs will be implemented on NextJS frontend as per the SEO figma designs.

Dynamic Breadcrumbs in NextJS https://dev.to/dan_starner/building-dynamic-breadcrumbs-in-nextjs-17oa

Image Optimization

The system requires an ability to have Image optimization for SEO Configuration.

• Requirements

  • All images to be compressed and resized to fit the container.

  • ages should be in the webp format for optimal compression. (100kb or less per image).

Implementation Details

Optimized images to be added and provided by the image source i.e. Plytix PIM or Bloomreach Content. Storefront will implement these images accordingly.

404 Page Management

The system requires an ability to have 404 Page Management for SEO Configuration.

• Requirements

  • Ability to redirect the 404 product/category to the parent category automatically. [For eg - 14K Diamond Drop Earring if 404ed should redirect to/jewelry/earrings].

  • Ability to manually overwrite the automatic redirect to a custom 200 OK product URL.

  • Ability to upload a csv for bulk overwrites of automatic 404 redirects.

Implementation Details

404 page redirection will be handled by NextJs storefront.
(Manual Overwrite and CSV upload) This would add to the scope of FE implementation. Cannot be made part of September go live.

Discontinued Product Communication

The system requires an ability to have Discontinued Product Communication on PDPs for SEO Configuration.

• Requirements

  • Ability to add a “permanently out of stock” message on selected products.

  • Ability to add a widget for similar products on such pages.

Implementation Details

“permanently out of stock” attribute should be added from Plytix PIM. Storefront will use attribute to show message as per figma designs.

Need details on how data will be provided to ‘similar products’ widget. Need figma designs as well.

Store page

The system requires an ability to have Store Page URLs for SEO Configuration.

• Requirements

  • Each Store to have a unique URL on click with separate meta directives.

  • Automation of schema implementation on store pages.

Implementation Details

On Bigcommerce, will have three stores for each region. Each store will have its own SEO compliant url.

Meta directives

The system requires an ability to have Meta Directives and Meta Robots for SEO Configuration. Following are the key requirements:

• Requirements

  • All pages we would like to get indexed should contain a “index,follow” meta directive.

  • Ability to manually change meta directives of pages on the CMS.

Implementation Details

Meta data will be added on storefront, with some meta data being retrieved from Bloomreach Content.

CDN

The system requires an ability to have CDN Image Hosting for SEO Configuration. Following are the key requirements:

• Requirements

  • Ensure that your images are always hosted on your own domain.

  • Ensure that CDN is enabled on your own domain rather than any third party domain so that all link equity that you get through image links should be passed on to your main domain.

Implementation Details

Product images to be hosted on Plytix DAM. Banners and other images to be hosted on Bloomreach Content CMS.

Core Web Vitals

The system requires an ability to have Core Web Vitals (Website Performance) for SEO Configuration.

• Requirements

  • We (Incubeta) will be reviewing the website on staging while it's being developed to share recommendations related to core website vital issues like - CLS, LCP
    and FID etc.

Implementation Details

Web vitals will be regularly monitored through Pagespeed Insights and Vercel Analytics and Speed Insights. Approriate steps will be taken to ensure site speed/vitals remain within acceptable range.

Interfaces

eCommerce Interfaces

The system needs an ecommerce interface for Product Information Management (PIM) with several key requirements. It should be able to display products and catalogs, including master data and catalog information. Additionally, it should allow eligibility checks on the SKU level for voucher codes and promotions. To indicate if a product is eligible for vouchers and promotions, there should be a checkbox that can be applied to each product.

Implementation Details

PIM interface to be provided by Plytix. eCommerce interface to be provided by BigCommerce.

Order Interfaces

The system needs an interface for order management with several key requirements. It should support different delivery options such as backorder (made to order) and standard delivery. The system should also handle stock movement and updates, including availability and ATP (available to promise) through real-time API calls. Order status updates should include accepted, dispatched, delivered, and cancelled statuses. The system should capture order and return data, including price, discounts, items, quantity, services, delivery details, payment information, scheduled delivery, channel ID, and fulfilling site. Additionally, it should support return orders, receiving return items, and processing refunds based on the business process flows.

Implementation Details

Order management interface to be provided by FlowOMS.

Placeholder for Image Assets

The system needs a placeholder for image assets with the following requirements. While loading image assets, a generic animation or placeholder image of the same size should be displayed. This could be a low-quality picture or a consistent loading animation for all images.

Implementation Details

React Loading Skeleton to be used for adding loading skeletons all over the website.

CMS Management

The system needs the ability to manage CMS (Content Management System) with the following key requirements. The CMS should allow for the editing of labels, messages, and text elements displayed on each Country Site and brand, enabling flexibility in their appearance. There should be a workflow in place for content creation, translation review, approval, and publishing to the target environment. Additionally, the system should ensure that content is not hard-coded and can be easily exchanged.

Implementation Details

Bloomreach Content CMS to be used as the CMS for L’azurde.

Preview Feature

The system needs a Preview feature for the CMS (Content Management System) with the following key requirements. It should allow for scheduling the publishing of various site content such as taxonomy, campaigns, product mapping, product content, static content, etc. This scheduling should include start and end date configurations to enable automatic publishing and unpublishing. Additionally, there should be a capability to preview the site based on date selection, allowing users to preview promotions and other content after the specified start date.

Implementation Details

For development purposes the preview to be enabled on local machines by following the steps in setting up a development project docs. For prod environment, external preview to be enabled by following the steps in the Enable External Preview docs.

Notifications

Registration Confirmation

The system requires the ability for a use to receive a registration confirmation notification after signing up on a website. The acceptance criteria include sending an email confirmation for successful registration, a confirmation email template, and an email notification for email verification. Additionally, an email notification should be sent for successful account creation, and the email content will be provided by the design team.

Order State Notifications

The system requires the ability for a user to get notifications for their orders and track their order status. The notifications include confirmation, dispatch, delivery, cancellation and return/refund.

Subscription Notifications

The system requires the ability for a user to subscribe to notifications on the website based on their preferences. The notifications include opt-in confirmation for new subscribers and the ability to send email notifications for newsletter subscriptions and availability notifications. The system should update customers when an item is back in stock, and link to CDXP to ensure email notifications are sent to customers

Cart Abandonment

The system requires the ability for a user to receive emails for any abandoned carts and be able to view these carts and complete the purchase. The acceptance criteria requires generating a notification for a cart that was abandoned by the customer on the checkout page and sending an email notification with cart details in order to recover the cart from being abandoned.

Marketing Notifications

Abandoned Carts Configuration

The system requires the ability for the user to receive abandoned cart notifications and be able to view these carts and complete the purchase. The system should be able to identify and notify the user of an abandoned cart that has not been checked out within a given time frame. The user should also have the ability to opt-out of these notifications via their Market Notification settings.

Cart Abandonment Triggers

The system requires the ability for an admin to be able to configure cart abandonment rules for customers to receive abandonment notifications. The admin should be able to set the time limit for when a cart is considered abandoned, select triggers for when notifications should be sent (taking into account if another notification was recently sent), and set the frequency of the abandoned shopping cart notifications. (to be configured via CDXP)

Immersive Experience

AR Solution via Tangiblee

The system requires the capability for the user to have a Virtual Try On feature on the L'azurde website in order to visualize how a product would look on them and make a purchase decision. The acceptance criteria state that the user should be able to access the Virtual Try On feature on the Product Detail page using an AR solution provided by Tangiblee. The key requirements include integrating the Virtual Try On feature from Tangiblee into the website and enabling customers to see how a product will look on themselves without leaving the product page.

Implementation Details

Virtual try on to be enabled on PDP via Tangiblee script. Please note that we don’t have designs for Tangiblee on PDP.

For detailed integration guide, refer to the Tangiblee docs.

Live Selling

For information about requirements an implementation details, refer to Store Elements on Home Page section.

Nonfunctional requirements

Data Retention and Disaster Recovery

Admins can back up products, customers and orders data using BigCommerce’s csv export features. In case of data loss, the data can be quickly re-imported via CSVs.
Refer to the Back Up Your Store docs for further understanding.

Communication Protocol – SSL/Encryption

The NextJS storefront to be hosted on Vercel. Vercel ensures SSL encryption for websites deployed on their platform through the following mechanisms:

• Automatic SSL Provisioning: When a website is deployed on Vercel, they automatically provision and manage SSL certificates for all custom domains. This ensures that all traffic to the website is encrypted using the HTTPS protocol.

• Integration with Let's Encrypt: Vercel integrates with Let's Encrypt, a widely recognized certificate authority, to obtain SSL certificates. Let's Encrypt provides free SSL certificates, making it accessible and cost-effective for website owners to secure their websites.

• Certificate Renewal and Management: Vercel handles the renewal and management of SSL certificates automatically. This includes monitoring the expiration of certificates and renewing them before they expire, ensuring continuous SSL encryption without any manual intervention.

• Domain Validation: Vercel validates domain ownership before issuing SSL certificates. This validation process ensures that only authorized individuals or organizations can obtain SSL certificates for a specific domain.

• SSL/TLS Configuration: Vercel configures SSL/TLS protocols and cipher suites to ensure secure and up-to-date encryption standards. They follow industry best practices for SSL/TLS configuration to provide strong security for websites.

• Automatic Redirects: Vercel automatically redirects HTTP traffic to HTTPS, ensuring that all connections to the website are encrypted. This helps in enforcing SSL encryption and maintaining a secure browsing experience for visitors.

By employing these measures, Vercel prioritizes the security of websites hosted on their platform and ensures that data transmitted between clients and the website is protected through SSL encryption.

Performance and Load Balancing

The NextJS storefront is to be hosted on Vercel. Vercel provides Analytics such as unique website visitors, page views, visitor country, visitor browser and OS. Vercel also provides speed insights which include speed insights for each page, code web vitals and virtual and real experience scores. For further details about Vercel analytics and speed insights set up, visit Vercel Analytics and Speed Insights docs. Detailed analytics are to be enabled via Bloomreach Pixel tracking as mentioned in the Bloomreach Discovery and Pixels section. Google Analytics will also be integrated for granular tracking.

As a Serverless and CDN solution, Vercel is highly scalable out-of-the-box and doesn't require human intervention to adjust server instances nor load-balancers.

Peak Scalability

Vercel scales websites automatically to handle high traffic situations using its serverless infrastructure. Here's how Vercel achieves scalability:

1. Serverless Architecture: Vercel's platform is built on a serverless architecture, which means that resources are allocated dynamically as needed. It uses a combination of containers and serverless functions to handle incoming requests.

2. Global CDN: Vercel utilizes a global content delivery network (CDN) to cache and distribute your website's static assets. This ensures that content is served from the nearest edge location to the user, reducing latency and improving performance.

3. Automatic Scaling: When traffic to your website increases, Vercel automatically scales the infrastructure to handle the load. It dynamically allocates additional resources, such as containers and serverless functions, to handle incoming requests and ensure responsiveness.

4. Elasticity: Vercel's infrastructure scales up or down based on demand. When traffic subsides, it automatically adjusts the allocated resources to optimize cost efficiency.

5. Instant Scaling: Vercel has the ability to scale instantaneously in response to traffic spikes. This ensures that your website remains available and performs well even during sudden surges in user activity.

By leveraging serverless architecture, a global CDN, and automatic scaling capabilities, Vercel is designed to handle high traffic situations and ensure that the website remains accessible and performs well even under heavy load.

Modern Caching Approach

NextJS, a popular framework for building React applications, provides various mechanisms for caching data. Here are some ways NextJS can cache data:

1. Server-Side Rendering (SSR) Caching: NextJS supports server-side rendering, where the server generates the initial HTML response for a page. During SSR, data can be fetched from an API or a database, and NextJS can cache the generated HTML based on the incoming request. This caching mechanism helps improve performance and reduces the load on the server.

2. Static Site Generation (SSG) Caching: NextJS also supports static site generation, where HTML pages are pre-generated at build time. Data can be fetched during the build process, and the resulting HTML pages can be cached for subsequent requests. This caching allows for fast and efficient delivery of static content.

3. Incremental Static Regeneration (ISR): NextJS introduced Incremental Static Regeneration, which combines static site generation with the ability to update specific pages dynamically. With ISR, you can define a revalidation interval for specific pages, and NextJS will automatically update the data for those pages at the specified interval, providing a balance between static content and dynamic updates.

4. Client-Side Caching: NextJS applications can leverage client-side caching mechanisms such as browser caching, service worker caching, or client-side state management libraries like Redux. These approaches allow data to be cached and reused within the client's browser, reducing the need for repeated network requests.

NextJS provides flexibility in choosing the caching strategy based on your application's requirements. Whether it's server-side rendering, static site generation, incremental static regeneration, or client-side caching. For Lazurde’s NextJS storefront, a combination of all 4 caching strategies will be used for caching data effectively and optimize the performance of application. Following page generation techniques will be used for L’azurde’s NextJS storefront,

• All static/ancillary pages will be generated using SSG

• PLPs and PDPs will be generated using a combination of SSG and ISR

• PII, Cart and Checkout pages will be generated using SSR

• All pages will use client-side caching via Reach Query library for HTTP request data caching

CSS & JS Bundling

CSS Bundling

• Next.js supports various CSS approaches, including CSS Modules, CSS-in-JS libraries like styled-components or Emotion, and global CSS.

• When using CSS Modules or CSS-in-JS, Next.js automatically processes and bundles the CSS styles alongside the components that use them. This allows for modular and scoped styling.

• Next.js extracts and optimizes the CSS during the build process, removing any unused styles and minimizing the overall size of the bundled CSS.

• The resulting CSS is then included in the HTML output, either inlined or loaded as a separate CSS file, depending on the configuration.

JS Bundling

• Next.js uses webpack under the hood for JavaScript bundling.

• JavaScript files, including React components and any imported modules, are analyzed and bundled together to minimize the number of network requests and optimize performance.

• Next.js supports tree shaking, a technique that eliminates unused code during the bundling process, reducing the bundle size.

• The bundled JavaScript files are optimized for production, including techniques like minification, compression, and code splitting to improve loading speed.

Automatic Code Splitting

• Next.js automatically performs code splitting to split the JavaScript bundle into smaller chunks.

• Code splitting enables the loading of only the necessary JavaScript code for each page, reducing the initial load time and improving performance.

• Next.js identifies the different routes and components used in the application and generates optimized chunks that are loaded on-demand as the user navigates the site.

By bundling CSS and JavaScript files, Next.js optimizes the delivery of styles and code to the client, reducing file sizes and improving performance. The automatic code splitting and optimization techniques employed by Next.js contribute to faster page loads and an enhanced user experience.

OWASP Top 10

The e-commerce system development to be done such that the system is protected from OWASP top 10 security risks.

GDPR

As an ecommerce platform, BigCommerce is compliant with GDPR.
BigCommerce GDPR Compliance

PCI Compliance

The NextJS storefront will use BigCommerce’s Checkout and Payments SDK along with Checkout.com payment processor for credit card and Apple Pay payments. The SDK is PCI compliant and sends the card data to the payment gateway in a secure tokenized manner.

Tabby, ValU and Tamara BNPL methods provide their own hosted PCI compliant environments for capturing credit card information. Responsibility for PCI compliance lies with the BNPL providers.

SOX

BigCommerce is SOC 1 and SOC 2 compliant and meets the SOX requirements.

BigCommerce SOC 1 and SOC 2

ISO 9000

ISO 27001

BigCommerce is ISO 27001 certified.

BigCommerce ISO 27001 Certification

ISO 27017-18

Existing Customer Architecture

Currently L’azurde e-commerce website is managed by Magento and all the user management, products / inventory management along with other essential modules that required for a e-commerce website is being controlled by the Magento admin portal.

Open

Furthermore, 3rd party integrations and extensions being used along with Magento are

• OTO for Courier Management

• WhatsApp for support, linked with business phone numbers for each region

• Checkout.com payment gateway for credit card payments

• Euroland widgets for real-time shares information

• Valu and Tabby for buy now pay later in Egypt and Saudi / KSA region

• Hotjar for customer behavior tracking

Proposed Architecture

Open

E-commerce System Components

Bloomreach Discovery and Pixels

Bloomreach Discovery is a SaaS-based product discovery platform that helps you curate relevant, intelligent, and efficient digital search experiences so that your customers find the right products at the right time with maximum ease. Discovery equips you with real-time data and actionable customer behavior insights that help you fine-tune your customers' search experiences to their preferences.

For empowering AI powered semantic search and customizable merchandising on L’azurde’s e-commerce website, each page of the website will integrate Bloomreach Pixels.

A pixel is a JavaScript code that must be add to the site’s pages to send necessary data to Bloomreach. The pixels track customers' activities on the site such as page views, clicks on products, search, add-to-cart etc. which add behavioral learning data to Bloomreach's algorithm. Over a period of time, data captured by the pixel amounts to a powerful and intuitive search solution. Following core pixels will be added to L’azurde e-commerce website,

• Page View Pixels for tracking Global, Product, Category, Search and Conversion pages

• Event Pixels for tracking Add-to-cart (ATC), Search and Suggest events

Page View Pixels

The Bloomreach Page View Pixels track views of customers on website pages. The page view pixels to be integrated on L’azurde e-commerce website are as follows,

Global Page View Tracking Snippet to be added in NextJS storefront.

Product Page View Tracking snippet to be added on Product Detail page template. On the Product Detail page, add the product specific tracking parameters to Global Page View Tracking snippet

Content Page View Pixel

Content Search Pixel to be added

Category Page View Pixel to be added on each Product Listing page. If a user applies a filter and results are refreshed, Bloomreach expects that the Category Page View pixel fires each time a filter is applied. To fire a category page view pixel each time a user applies a filter, refer to Virtual Page View Pixel section.

Search Result Page View Pixel to be add on Search Results page template. On the search results page, add the search specific tracking parameters in the Global Tracking snippet. If a user applies a facet filter and refreshes results, Bloomreach expects that the Search Result Page View pixel fires each time a filter is applied. To fire a search results page view pixel each time a user applies a filter, refer to Virtual Page View Pixel section.

Conversion Page View Pixel to be added on Thank You page. On the thank you page, add basket and Conversion specific Page View parameters in the Global Tracking snippet. We will be using Bigcommerce Checkout.js Thank you page. Script will be added directly into Thank you page through code.

Virtual Page View Pixel to be added to pages wherever we need to track an AJAX interaction that loads content outside of the normal page load cycle. For example, when user applies a filter on a PLP, the PLP results are refreshed and a new tracking event needs to be passed to Bloomreach.

For more information and in-depth understanding about data values and variables in page view pixel scripts, please refer to Page View Pixels Reference.

Event Pixels

Bloomreach Event Pixels track various user interaction events that can occur on a page, such as adding products to the cart or interacting with a page element. Events always occur on a page view, so the associated page view pixel information must be passed together with the event pixel. Event pixels to be integrated on L’azurde e-commerce website are as follows,

Add-to-cart (ATC) Pixel to be add fired any time a user adds an item to their cart. ATC event to be captured on the product detail page, product listing pages and search pages. The following snippet for the ATC event must be tied to Add To Cart buttons all over the website site,

Search Event Pixel to be fired each time the user types a search query in the search box and then clicks the search button or hits enter to submit the search query.

Implementing Pixels in Test Environment

In a test environment (development, staging, UAT, etc.), a test_data variable must be added. This will ensure that Bloomreach ignores test data during analytics processing.

For more information and in-depth understanding about data values and variables in event pixel scripts, please refer to Event Pixels Reference.

Pixels on PII Pages

Some pages include Personally Identifiable Information (PII), especially registration pages and secure login pages, payment details pages, delivery information pages, account settings pages, etc. Bloomreach does not collect PII. Bloomreach recommends against integrating the pixels on pages with this kind of information.

Do not add the pixels on pages where PII is passed.

Bloomreach Catalog Feed

The product catalog will be fed from BigCommerce to Bloomreach via a script provided by Bloomreach team.

Step 1. Format your data

You must format your catalog data properly in order for Bloomreach to ingest it. In this step, you will learn how to format a product record, which contains the data for a single product. We also provide details on how to implement variants and/or views, if your catalog uses them.

• Products

• Variants

• Views

• Variants and Views

Step 2. Send your data

After properly formatting your catalog data, you must send it to Bloomreach for ingestion. There are two modes of delivery:

• PUT (full replacement of catalog data)

• PATCH (partial updates to catalog data)

Catalog data may be sent as an API payload, or as a file sent to a SFTP.

Step 3: Configure Attributes

You can configure your product catalog data attributes such as title, description, price, sku, etc. so that Bloomreach processes your data the way you need it. Work with your Bloomreach representative to configure the required attributes.

Step 4. Publish the index

You must publish the index in order to query your catalogs with our Search APIs. Make sure to deploy the Product Search API .

Add Case

When an any product added in big commerce store it will share the product payload on middleware endpoint which is subscribe through big commerce webhook topic name as store/product/created you can find all details hare how we can subscribe webhook event and also check sample data that is provided by big commerce.

https://developer.bigcommerce.com/api-docs/store-management/webhooks/webhook-events#products

after receiving data in middleware it map according to Bloomreach put api payload and send it to this endpoint

https://api-staging.connect.bloomreach.com/dataconnect/api/v1/accounts/7235/catalogs/{{domain_key}}/products 

when it will insert successfully it will return job id after that run final call of index posting through this endpoint

https://api-staging.connect.bloomreach.com/dataconnect/api/v1/accounts/7235/catalogs/{{domain_key}}/indexes

when job successfully posted now it available on Bloomreach dashboard for search

Update Case

When an any product updated in big commerce store it will share the product payload on middleware endpoint which is subscribe through big commerce webhook topic name as (store/product/updated) you can find all details hare how we can subscribe webhook event and also check sample data that is provided by big commerce.

https://developer.bigcommerce.com/api-docs/store-management/webhooks/webhook-events#products

after receiving data in middleware it map according to Bloomreach patch API payload and send it to this endpoint

https://api-staging.connect.bloomreach.com/dataconnect/api/v1/accounts/7235/catalogs/{{domain_key}}/products 

when it will update successfully it will return job id after that run final call of index posting through this endpoint

https://api-staging.connect.bloomreach.com/dataconnect/api/v1/accounts/7235/catalogs/{{domain_key}}/indexes

when job successfully posted now it available on Bloomreach dashboard for search. In any case if you want to check job status simply run this api to check job status

Note: all data will update according to domain key wise

Bloomreach Searchandizing

The product search on L’azurde e-commerce website will be powered by Bloomreach Search and Merchandising APIs.

Environments and Endpoints

Bloomreach Search and Merchandising exposes two environments to enable you to integrate and deploy: staging and production. A typical integration involves integrating against the staging servers. All lower environments (DEV, QA and UAT) of NextJS storefront to be pointed towards staging API servers. Production NextJS storefront to be pointed to Bloomreach’s production API servers.

Product Search and Category API

For keyword search and populating the search results page, following Product Search API to be used,

For populating the product listing page for a particular category, use the following Category Search API,

The category search API performs search based on category ID.

For searching category tree, make use of the following parameters,

For more in-depth understanding details about each query parameter, please refer to the Product Search and Category API reference.

For faceting and filtering, make use of the fq parameter, for example,

The fq parameter filters on facets. The product attribute MUST be enabled for filtering and properly mapped in Bloomreach's configuration. For in-depth understanding and reference, please refer to the Faceting and Filtering reference.

For pagination, make use of the rows and start parameters and numFound value in API response, rows represent the number of products returned and start represents the position of 1st element of that page. Based on numFound, total pages can be calculated. For L’azurde row parameter to be set at 24 products per page.

For sorting, make use of the sort parameter,

Bloomreach Content - CMS

The NextJS Storefront is to be Integrated with Bloomreach Content Headless CMS. English and Arabic Home Pages, Product Listing Pages, Ancillary Pages and other static content pages to be created on Bloomreach Content CMS. Pages to be created using reusable components created on CMS dashboard, page layout and styling to be controlled by corresponding storefront component. NextJS Storefront to use Bloomreach Content SDK to integrate with Bloomreach Content CMS. All lower environments (DEV, QA, UAT) to be connected with stage instance of Bloomreach Content and Prod env to be connected with Prod instance.

For step by step guide and general understanding about setting up Bloomreach Content CMS and creating components and pages, refer to the following documentation for each step,

1. Create a Channel

2. Connect with Storefront

3. Set up Development Project on Dashboard

4. Create a Component

5. Create a Complex Component Data Model

6. Create a Shared Document-Driven Component

NextJS Storefront will be connected with Bloomreach Content CMS via Bloomreach Content SDK. Bloomreach React SDK provides simplified headless integration with Bloomreach Experience Manager for React-based applications. Following code snippets demonstrate the rendering of a ContentPage component via content SDK.

For detailed guide, refer to the Bloomreach Content SDK documentation.

Page Creation Guide

Bloomreach Content SDK requires all pages to be created on Bloomreach Content CMS. Even if the page content is dynamic and unique to each user, page route must be created on the CMS for the Content SDK to render the page on front-end successfully. A general guideline about creating different types of website pages and components for L’azurde is provided for each type of page.

Pre-requisites for All Pages

1. Navigate to content app on CMS dashboard

2. From the dropdown in the left-most panel, select Content Types

3. Look for Bloomreach (brxsaas) and click on menu icon, from the pop-up menu select New document type

4. Name the document as Page, select 1 Column layout and click Next, Page document type will be created

5. From the right-most menu, under Primitive Field, select String

6. Scroll-down the right-most menu, under Field Properties section edit the Name and Default caption to Title

7. Repeat steps 5 and 7 and create SEO meta description, OG Title, OG Description and OG Url fields and click Done

Home Pages

For creating a home page, follow these steps

1. Navigate to Experience Manager App and select the channel for which you want to create pages

2. From the For Project menu at the top centre, select Lazurde Development Project or any other development project you want to create pages for

3. Click on arrow head at the top-left and expand the Experience Manager menu

4. From the Sightmap menu, select home

5. Click on +Page button at top right of the page

6. Enter Page name, URL, select Document type as Page, select Page layout as One-Column Layout and click Next

7. Fill all relevant fields and click Create, Home Page will be created

8. Now go to Site Development app, navigate to routes and create a route for home page

For creating home page components, follow these steps (for Hero Banner component only, rest of the components to follow similar steps)

1. Go to Components tab in the Site development app, click on +Component and create a component

2. Extend from base component

3. Under Properties tab, add properties for Title, Subtitle, Background Image URL, CTA Link and CTA Text

4. Now, navigate back to Experience Manager app, under Sitemap, select home page, switch to Components tab

5. From page-specific components list, select Hero Banner and click on the page container at the right to add component to the page

6. Click on the component added to the page to edit its properties

7. Now click on Page at the top left, edit page metadata and publish, the page will become available for the storefront application to display

Account Page

Account page is primarily dynamic and generated from within codebase, layout and route must be created on CMS for the SDK to render these pages properly

1. Go to Site development app, navigate to Page Layouts, click on +Layout

2. Add “account“ as the layout name, select “page“ as the Type and click Create

3. Under Layout Structure, click on menu icon on the account accordian and add a static component, name the component as “Account”

4. Go to Routes tab, click on +Route, add “account“ as route name, and “account“ as Page layout click Save

Ancillary Pages

For creating ancillary pages, follow these steps (for contact page only, rest of the ancillary pages to follow same steps),

1. Navigate to Experience Manager App and select the channel for which you want to create pages

2. From the For Project menu at the top centre, select Lazurde Development Project or any other development project you want to create pages for

3. Click on arrow head at the top-left and expand the Experience Manager menu

4. From the Sightmap menu, select home

5. Click on +Page button at top right of the page

6. Enter Page name, URL, select Document type as Page, select Page layout as One-Column Layout and click Next

7. Fill all relevant fields and click Create, Contact Page will be created

8. Now go to Site Development app, navigate to routes and create a route for contact page

For creating home page components, follow these steps (for contact us grid component only, rest of the components to follow similar steps)

1. Go to Components tab in the Site development app, click on +Component and create a component

2. Extend from base component

3. Under Properties tab, add properties for Title, Subtitle, Contact No and Email

4. Now, navigate back to Experience Manager app, under Sitemap, select home page, switch to Components tab

5. From page-specific components list, select Contact Us Grid and click on the page container at the right to add component to the page

6. Click on the component added to the page to edit its properties

7. Now click on Page at the top left, edit page metadata and publish, the page will become available for the storefront application to display

Category Pages (PLPs)

For PLPs, follow the same steps for creating page layout, route and components as described for other pages. Following key points are to be kept in mind while creating PLP pages,

1. All types of PLPs, attributes based PLPs, category PLPs, campaign PLPs and promotion PLPs to be created on CMS

2. All PLPs to have 3 main components, Category Banner, Explore All Categories Cards and Products Grid

3. Category Banner and Explore All Categories components to be made optional

4. Category name, tag name and promotion name MUST be provided via CMS

5. Product search, facets and ranking rules MUST be configured on Bloomreach Searchandizing prior to the creation of PLP

Cart Page

Cart page is primarily dynamic and generated from within codebase, layout and route must be created on CMS for the SDK to render these pages properly

1. Go to Site development app, navigate to Page Layouts, click on +Layout

2. Add “cart“ as the layout name, select “page“ as the Type and click Create

3. Under Layout Structure, click on menu icon on the account accordian and add a static component, name the component as “Cart”

4. Go to Routes tab, click on +Route, add “cart“ as route name, and “cart“ as Page layout click Save

Checkout Page

Checkout page is primarily dynamic and generated from within codebase, layout and route must be created on CMS for the SDK to render these pages properly

1. Go to Site development app, navigate to Page Layouts, click on +Layout

2. Add “checkout“ as the layout name, select “page“ as the Type and click Create

3. Under Layout Structure, click on menu icon on the account accordian and add a static component, name the component as “Checkout”

4. Go to Routes tab, click on +Route, add “checkout“ as route name, and “checkout“ as Page layout click Save

Thank You Page

Thank You page is primarily dynamic and generated from within codebase, layout and route must be created on CMS for the SDK to render these pages properly

1. Go to Site development app, navigate to Page Layouts, click on +Layout

2. Add “thank you“ as the layout name, select “page“ as the Type and click Create

3. Under Layout Structure, click on menu icon on the account accordian and add a static component, name the component as “Thank You”

4. Go to Routes tab, click on +Route, add “thank you“ as route name, and “thank you“ as Page layout click Save

Bloomreach Engagement - CDXP

To be implemented by Voxwise. Thomas for Voxwise to provide details.

Plytix PIM

Plytix Product Information Management (PIM) system to be used for creating and managing product catalog. Product catalog, product taxonomy, categories and hierarchies to be set up on Plytix by L’azurde with the help of Plytix team. Product catalog from Plytix to be synced with BigCommerce via Plytix product APIs. Plytix PIM to be synced with 3 development stores for each region and 3 Production stores.

PIM configuration to be set up for adding products for each brand and each region.

Refer to BigCommerce - Plytix Catalog Feed section for detailed steps.

BigCommerce - Plytix Catalog Feed

Steps 1 through 4 are a one time activity for pushing all products created in Plytix to BigCommerce.

Complete product catalog must be on boarded on Plytix before feed is processed to BigCommerce.

Steps to Generate Product Feed

Step 1. Get Data From Plytix

Get all products data in a paginated response from plytix via /products/search API

Step 2. Get Category from BigCommerce

Fetch all categories from BigCommerce via BigCommerce API to use the id's of category to map it according to product catalog. Curl:

Please note that the categories must be created in BigCommerce store prior to creating products.

Step 3. Get Product details

For each product, fetch product details from plytix via /products/{productId} API. Curl:

Step 4. Create Product in BigCommerce

Create product in BigCommerce according to following mapping

Curl for creating product in BigCommerce

Step 5. Update Product

Get all products data in a paginated response from plytix via /products/search API by using “modified” filter with greater than and less than operators over a specified time. This is a scheduler based job using aws scheduler service which will run once or twice a day to get updated product data from plytix and post it to Big Commerce. Curl for getting product data from plytix using “modified“ filter.