Skip to main content
Version: 3.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.

Properties​

PropertyHTML AttributeTypeDefaultDescription
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></sodexo-shop-list-template>

  <script>
    const element = document.querySelector('sodexo-shop-list-template');

    // 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

TypeScript Types​

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