Skip to main content
Version: 3.0.0

sodexo-dish-detail-template

The sodexo-dish-detail-template component displays detailed information about a specific dish.

Properties​

PropertyHTML AttributeTypeDefaultDescription
siteIdsite-idstring-Site identifier
shopIdshop-idstring-Shop identifier
serviceDateservice-datestring-Service date in ISO format (e.g., "2025-01-13")
dishIddish-idstring-Dish identifier to display details for

Events​

EventTypeDescription
sodexoDishDetailTemplateAddOrRemoveClickedCustomEvent<DishSelected>Emitted when add/remove to cart button is clicked. Recommended action: Navigate back to shop menu

Event Details​

DishSelected​

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

Usage​

<!DOCTYPE html>
<html>
<body>
  <sodexo-dish-detail-template
    site-id="site-123"
    shop-id="shop-456"
    dish-id="dish-789"
    service-date="2025-01-13"
  ></sodexo-dish-detail-template>

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

    // Handle add/remove to cart
    element.addEventListener('sodexoDishDetailTemplateAddOrRemoveClicked', (event) => {
      console.log('Dish action:', event.detail);
      const { dishId, siteId, shopId, serviceDate } = event.detail;
      
      // Navigate back to menu
      window.history.back();
      // Or redirect to menu
      // window.location.href = `/menu?siteId=${event.detail.siteId}&shopId=${event.detail.shopId}&serviceDate=${serviceDate}`;
    });
  </script>

</body>
</html>

Property Naming Convention​

Naming Syntax

When using properties:

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

This diagram shows the recommended navigation flow for the dish detail template:

On sodexoDishDetailTemplateAddOrRemoveClicked: Navigate back to shop menu

const { dishId, siteId, shopId, serviceDate } = event.detail;
// Navigate back
navigate(`site/${siteId}/shop/${shopId}/service-date/${serviceDate}`); // or history.back()