Skip to main content
Version: 2.0.0

sodexo-public-shop-menu-template

The sodexo-public-shop-menu-template component contains the menu feature with built-in API and i18n support. This template is public and does not require authentication.

Properties​

PropertyHTML AttributeTypeDefaultDescription
themethemeThemeDefault Sodexo themeCustomization variables for Sodexo components theme
apiKeyapi-keystring-X-API-key for Sodexo API
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
shopIdshop-idstring-Internal shop identifier. Use only if obtained from sodexo-public-shop-list-template
Property Usage
  • External IDs: Use siteExternalId + shopExternalId together (provided by Sodexo)
  • Internal ID: Use shopId alone (only if retrieved from shop list template)
  • Do not mix both approaches

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-public-shop-menu-template
    api-key="your-api-key"
    shop-id="your-shop-id"
  ></sodexo-public-shop-menu-template>

  <script>
    const element = document.querySelector('sodexo-public-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',
    };
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

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

Examples​

Using External IDs​

<sodexo-public-shop-menu-template
  api-key="your-api-key"
  site-external-id="site-123"
  shop-external-id="shop-456"
></sodexo-public-shop-menu-template>

Using Internal Shop ID​

<sodexo-public-shop-menu-template
  api-key="your-api-key"
  shop-id="internal-shop-id"
></sodexo-public-shop-menu-template>