How to Show Products

This guide explains the methods for displaying and managing products using the Jay platform APIs. It covers how products are structured, how they can be grouped, and how they relate to other entities like looks, characters and locations.

Product Structure

• Products can have variants (e.g., different sizes)
• Products can include similar items (via linkedToProducts references)
• Products can come from different merchants (online shops)
• Each product includes details like brand, price, description, and images

Fetching Product Data

1. Get all Products for an Episode

To retrieve all products available for a specific episode:

API Endpoint:

• GET /playouts/{playoutId}/episodes/{episodeId}/products

This endpoint returns a list of all products available in the episode, with their basic information.

2. Get detailed Product Information

For comprehensive details about a specific product:

API Endpoint:

• GET /playouts/{playoutId}/episodes/{episodeId}/products/{productId}

This provides complete product information including:

• Product name, description, and brand
• Pricing information
• Available sizes/variants
• Images
• Related products

3. Get Product details for multiple Products

To retrieve detailed information for multiple products in a single request, you can use the Basket API.

For details on how to retrieve product information using the Basket API, please refer to:

• How to Use the Basket

This is particularly useful when you need to display information for products in a user's basket.

How to group Products by Shop

Products can be organized by their respective merchants (shops). You can create shop-specific displays by:

1. Fetching all products for an episode
2. Grouping them based on their merchant attributes
3. Displaying each group as a separate shop section

Groups are an important concept for organizing products:

• Products within one group often share a common theme or merchant
• Some groups are designated as "menu groups" (where mainMenu=true)
• Menu groups typically appear in navigation menus

API Endpoint for Groups:

• GET /playouts/{playoutId}/episodes/{episodeId}/groups

Working with Looks

A "look" typically represents a character's outfit or a styled collection of products.

Components of a Look

• Core entity (typically a character/person or a location)
• Multiple associated costumes or props with purchasable products
• A look can also combine a location with multiple associated props

Retrieving Looks

1. Fetch characters or locations

   • GET /playouts/{playoutId}/episodes/{episodeId}/characters
   • GET /playouts/{playoutId}/episodes/{episodeId}/locations

2. Fetch associated costumes and props

   • GET /playouts/{playoutId}/episodes/{episodeId}/costumes
   • GET /playouts/{playoutId}/episodes/{episodeId}/props

3. Link characters to their costumes and products

Timecode-Based Product Display

To display products that appear at specific times in the video:

1. Get timeline events:

   • GET /playouts/{playoutId}/episodes/{episodeId}/timeline/events

2. Filter events by the current playback time using the filterTime parameter (in milliseconds)

3. Extract product IDs from relevant events and display the associated products

Adding Products to the Basket

Once a user selects a product, you can add it to their basket using the Basket API.

For comprehensive instructions on adding products to the basket, managing cart items, and checkout process, please refer to:

• How to Use the Basket