Skip to main content
Version: 2.0.0

sodexo-formula-selection-template

The sodexo-formula-selection-template component provides a complete interface for selecting and customizing meal formulas (menus). This template includes built-in API integration, i18n, and theme provider.

Authentication Required

This template requires a valid authentication token to access formula options.

Properties​

PropertyHTML AttributeTypeDefaultDescription
themethemeThemeDefault Sodexo themeCustomization variables for Sodexo components theme
apiKeyapi-keystring-X-API-key for Sodexo API
tokentokenstring-Authentication token for Sodexo API
siteIdsite-idstring-Site identifier
shopIdshop-idstring-Shop identifier
serviceDateservice-datestring-Service date in ISO format (e.g., "2025-01-13")
formulaIdformula-idstring-Formula identifier to configure

Events​

EventTypeDescription
sodexoFormulaSelectionTemplateFormulaAddedCustomEvent<FormulaSelected>Emitted when user adds a configured formula to cart. Recommended action: Navigate back to shop menu

Event Details​

FormulaSelected​

interface FormulaSelected {
  formulaId: string;
  siteId: string;
  shopId: string;
  serviceDate: string;
}

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-formula-selection-template
    api-key="your-api-key"
    token="user-auth-token"
    site-id="site-123"
    shop-id="shop-456"
    formula-id="formula-789"
    service-date="2025-01-13"
  ></sodexo-formula-selection-template>

  <script>
    const element = document.querySelector('sodexo-formula-selection-template');
    
    // Apply custom theme
    element.theme = {
      '--sodexo-primary-color': '#283897',
      '--sodexo-primary-text-color': '#283897',
      '--sodexo-primary-background-color': '#f7f8ff',
      '--sodexo-font-family': 'Open Sans',
    };

    // Handle formula added to cart
    element.addEventListener('sodexoFormulaSelectionTemplateFormulaAdded', (event) => {
      console.log('Formula added:', event.detail);
      const { formulaId, siteId, shopId, serviceDate } = event.detail;
      
      // Navigate back to menu
      window.history.back();
      // Or redirect to menu
      // window.location.href = `/menu?siteId=${event.detail.siteId}&shopId=${event.detail.shopId}&serviceDate=${serviceDate}`;
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

  • In HTML: Use kebab-case (e.g., api-key, site-id, formula-id)
  • In JavaScript: Use camelCase (e.g., apiKey, siteId, formulaId)
  • Events: Can only be handled in JavaScript, not in HTML attributes

This diagram shows the recommended navigation flow for the formula selection template:

On sodexoFormulaSelectionTemplateFormulaAdded: Navigate back to shop menu with confirmation

const { formulaId, siteId, shopId, serviceDate } = event.detail;
// Navigate back
navigate(`site/${siteId}/shop/${shopId}/service-date/${serviceDate}`); // or history.back()