Skip to main content

Nespresso Content Logic - Technical Documentation

Overview​

The Nespresso content system is a multilingual interactive catalog that allows users to browse product categories and view detailed information in both Hungarian and English. The content uses directory widgets, form widgets, mock data sources, and event-driven interactions to create a seamless bilingual product browsing experience.

Architecture​

Core Components​

1. Directory Structure​

The content contains two main directory widgets:

  • English Directory: Displays product items with English content
  • Hungarian Directory: Displays product items with Hungarian content

Both directories are positioned in the same location on the canvas and their visibility is controlled through the language selection mechanism.

2. Mock Data Sources​

The system uses two mock data sources to manage state:

  • Selected Items Data Source: Stores the currently selected product information
  • Language Data Source: Tracks the active language (HU or ENG)

3. Form Widget for Categories​

A form widget manages the product categories, allowing users to filter and browse different product types. This widget sends worksheet selector events when categories are clicked.

4. Language Selection Popup​

The language selection interface consists of:

  • Two text widgets styled as buttons (one for Hungarian, one for English)
  • Each button has an action with visibility control based on the active language state
  • Change data source actions that switch the language mock data to either "HU" or "ENG"

Data Flow​

1. Language Selection Process​

User clicks language button → Action triggered
                ↓
Hide/show logic evaluates current language state
                ↓
Change data source action sets language to "HU" or "ENG"
                ↓
Mock data source updated with new language value
                ↓
Directory visibility updated based on language

2. Category Selection Process​

User clicks category in form widget
                ↓
Worksheet selector event emitted
                ↓
Page-wide sensor event captured on default page
                ↓
Language check performed
                ↓
Both directories configured:
  - Hungarian directory targeted for HU language
  - English directory targeted for ENG language

3. Product Selection Process​

User clicks product in directory widget
                ↓
Item Select Event emitted
                ↓
Event captured in action configuration
                ↓
Directory popup opens with product details:
  - Product image
  - Product name (language-specific)
  - Product price

Event System​

Worksheet Selector Event​

  • Trigger: Category selection in form widget
  • Scope: Page-wide
  • Handler Location: Default page sensor events
  • Purpose: Filter products based on selected category
  • Language Handling: Event data passed with language check to determine which directory to update

Item Select Event​

  • Trigger: Product click in directory widget
  • Scope: Widget-level
  • Handler Location: Action configuration
  • Purpose: Display product details in popup
  • Data Passed: Product object with all properties

Language-Specific Property Mapping​

The system handles bilingual content through property mapping:

Property TypeHungarian PropertyEnglish Property
Product NamenameHUnameENG
DescriptiondescriptionHUdescriptionENG

Dynamic Property Selection​

// Pseudo-code for language-based property selection
if (language === 'HU') {
    displayName = product.nameHU;
    displayDescription = product.descriptionHU;
} else if (language === 'ENG') {
    displayName = product.nameENG;
    displayDescription = product.descriptionENG;
}

Product Detail Popup​

When an item is selected from the directory, the popup displays:

  1. Product Image

    • Source: Product image URL from data
    • Widget Type: Image widget

  2. Product Name

    • Source: Dynamically selected based on language (nameHU or nameENG)
    • Widget Type: Text widget
    • Language Logic: Checks language data source value

  3. Product Price

    • Source: Product price from data
    • Widget Type: Text widget
    • Format: Currency display

Data Source Override​

The system performs a complete mock data source override when displaying product details:

  • Original data source is replaced with selected product data
  • All product properties become available for widget binding
  • Language-specific properties are selected based on current language state

Implementation Details​

Language Button Actions​

Button HU Action:
  - Change Data Source: Set language to 'HU'
  
Button ENG Action:
  - Change Data Source: Set language to 'ENG'

Directory Configuration​

Hungarian Directory:
  - Visibility: Controlled by language === 'HU'
  - Data Source: Hungarian product catalog
  - Target Language: HU
  
English Directory:
  - Visibility: Controlled by language === 'ENG'
  - Data Source: English product catalog
  - Target Language: ENG

Event Handling Configuration​

Category Selection:
  - Event Type: Worksheet Selector
  - Capture Scope: Page-wide on default page
  - Processing: Language check → Directory update
  
Product Selection:
  - Event Type: Item Select
  - Capture Scope: Directory widget
  - Processing: Open popup → Set image → Set name (language-aware) → Set price
Last updated on