Skip to main content
Version: 2.0.0

sodexo-shop-list-template

The sodexo-shop-list-template component displays a list of shops organized by site, with filtering capabilities by site or shop type. This template includes built-in API and i18n support.

Authentication Required

This template requires a valid authentication token to access shop 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
defaultSiteExternalIddefault-site-external-idstring-Use it to select a shop by default. The external ID is provided by Sodexo
showBadgeshow-badgebooleantrueShow or hide the balance banner

Events​

EventTypeDescription
sodexoShopSelectedCustomEvent<ShopSelected>Emitted when a shop card is clicked. Returns siteId and shopId. Recommended action: Navigate to shop menu page
sodexoShopBalanceBannerClickedCustomEvent<void>Emitted when the balance banner is clicked. Recommended action: Navigate to wallet page

Event Details​

sodexoShopSelected​

interface ShopSelected {
  siteId: string;
  shopId: string;
}

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-shop-list-template
    api-key="your-api-key"
    token="user-auth-token"
  ></sodexo-shop-list-template>

  <script>
    const element = document.querySelector('sodexo-shop-list-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 shop selection
    element.addEventListener('sodexoShopSelected', (event) => {
      console.log('Selected shop:', {
        siteId: event.detail.siteId,
        shopId: event.detail.shopId
      });
      // Redirect to shop menu
      window.location.href = `/shop-menu?shopId=${event.detail.shopId}`;
    });

    // Handle balance banner click
    element.addEventListener('sodexoShopBalanceBannerClicked', () => {
      console.log('Balance banner clicked');
      // Redirect to wallet
      window.location.href = '/wallet';
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

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

This diagram shows the recommended navigation flow when handling events from this template:

  1. On sodexoShopSelected: Navigate to the shop menu page with the selected shop
// Pass shopId to shop menu template
navigate(`/shop-menu?shopId=${event.detail.shopId}`);
  1. On sodexoShopBalanceBannerClicked: Navigate to the wallet/balance page
navigate("/wallet");

Features​

  • Site Filtering: Filter shops by site location
  • Shop Type Filtering: Filter by type of shop (restaurant, café, etc.)
  • Balance Banner: Quick access to wallet/balance information
  • Responsive Design: Adapts to all screen sizes

Examples​

Basic Implementation​

<sodexo-shop-list-template
  api-key="your-api-key"
  token="user-auth-token"
></sodexo-shop-list-template>

With Custom Theme​

const shopList = document.querySelector("sodexo-shop-list-template");

shopList.theme = {
  "--sodexo-primary-color": "#283897",
  "--sodexo-primary-text-color": "#ffffff",
  "--sodexo-primary-background-color": "#f7f8ff",
  "--sodexo-secondary-color": "#ff6b6b",
  "--sodexo-font-family": "Open Sans, sans-serif",
  "--sodexo-border-radius": "8px",
};

TypeScript Types​

interface ShopSelected {
  siteId: string;
  shopId: string;
}