Skip to main content
Version: 3.0.0

sodexo-public-shop-list-template

The sodexo-public-shop-list-template component displays a list of available shops for a specific site..

No Authentication Required

This is a public template that does not require user authentication. It can be used on public-facing pages to allow visitors to browse available shops.

Properties​

PropertyHTML AttributeTypeDefaultDescription
siteExternalIdsite-external-idnumber-Site external identifier. Provided by Sodexo

Events​

EventTypeDescription
sodexoPublicShopListTemplateShopSelectedCustomEvent<ShopSelected>Emitted when a shop card is clicked. Returns siteId and shopId. Recommended action: Navigate to public shop menu

Event Details​

ShopSelected​

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

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-public-shop-list-template
    site-external-id="12345"
  ></sodexo-public-shop-list-template>

  <script>
    const element = document.querySelector('sodexo-public-shop-list-template');
   
    // Handle shop selection
    element.addEventListener('sodexoPublicShopListTemplateShopSelected', (event) => {
      const { siteId, shopId  } = event.detail;
      console.log('Shop selected:', { siteId, shopId });
      
      // Redirect to shop menu
      window.location.href = `/menu?siteId=${siteId}&shopId=${shopId}`;
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

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

This diagram shows the recommended navigation flow for the public shop list:

On sodexoPublicShopListTemplateShopSelected: Navigate to public shop menu

const { siteId, shopId } = event.detail;
navigate(
  `sites/${siteId}/shops/${shopId}/menu/${siteExternalId}/${shopExternalId}`
);