Skip to main content
Version: 2.0.0

sodexo-shop-menu-template

The sodexo-shop-menu-template component contains all menu features including API integration, i18n, cart management, and theme provider.

Authentication Required

This template requires a valid authentication token to access shop menu data.

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
siteExternalIdsite-external-idstring-Site external identifier. Use with shopExternalId instead of shopId. Provided by Sodexo
shopExternalIdshop-external-idstring-Shop external identifier. Use with siteExternalId instead of siteId. Provided by Sodexo
serviceDateservice-datestring-Optional service date in ISO format (e.g., "2025-01-13")
Property Usage
  • External IDs: Use siteExternalId + shopExternalId together (provided by Sodexo)
  • Internal IDs: Use siteId + shopId together
  • Do not mix both approaches

Events​

EventTypeDescription
sodexoShopMenuTemplateInfoDishClickedCustomEvent<DishSelected>Emitted when a dish info button is clicked. Recommended action: Navigate to dish detail page
sodexoShopMenuTemplateAddFormulaClickedCustomEvent<FormulaSelected>Emitted when a formula add button is clicked. Recommended action: Navigate to formula selection page
sodexoShopMenuTemplatePlaceOrderClickedCustomEvent<void>Emitted when the place order button is clicked. Recommended action: Navigate to cart page

Event Details​

DishSelected​

interface DishSelected {
  dishId: string;
  siteId: string;
  shopId: string;
  serviceDate: string;
}

FormulaSelected​

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

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-shop-menu-template
    api-key="your-api-key"
    token="user-auth-token"
    site-id="123"
    shop-id="456"
    service-date="2025-02-10"
  ></sodexo-shop-menu-template>

  <script>
    const element = document.querySelector('sodexo-shop-menu-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 dish info click
    element.addEventListener('sodexoShopMenuTemplateInfoDishClicked', (event) => {
      console.log('Dish info clicked:', event.detail);
      const { dishId, siteId, shopId, serviceDate } = event.detail;
      // Redirect to dish detail
      window.location.href = `/dish/${dishId}?siteId=${siteId}&shopId=${shopId}&serviceDate=${serviceDate}`;
    });

    // Handle formula add click
    element.addEventListener('sodexoShopMenuTemplateAddFormulaClicked', (event) => {
      console.log('Formula add clicked:', event.detail);
      const { formulaId, siteId, shopId, serviceDate } = event.detail;
      // Redirect to formula selection
      window.location.href = `/formula/${formulaId}?siteId=${siteId}&shopId=${shopId}&serviceDate=${serviceDate}`;
    });

    // Handle place order click
    element.addEventListener('sodexoShopMenuTemplatePlaceOrderClicked', (event) => {
      console.log('Place order clicked with cart:', event.detail);
      // Save cart and redirect to cart page
      localStorage.setItem('cart', JSON.stringify(event.detail));
      window.location.href = '/cart';
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

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

This diagram shows the recommended navigation flow for the shop menu template:

  1. On sodexoShopMenuTemplateInfoDishClicked: Navigate to dish detail page
const { dishId, siteId, shopId, serviceDate } = event.detail;
navigate(
  `/dish/${dishId}?siteId=${siteId}&shopId=${shopId}&serviceDate=${serviceDate}`,
);
  1. On sodexoShopMenuTemplateAddFormulaClicked: Navigate to formula selection page
const { formulaId, siteId, shopId, serviceDate } = event.detail;
navigate(
  `/formula/${formulaId}?siteId=${siteId}&shopId=${shopId}&serviceDate=${serviceDate}`,
);
  1. On sodexoShopMenuTemplatePlaceOrderClicked: Save cart and navigate to cart page
navigate("/cart");