ShoppableVideos

• The ShoppableVideos component is a versatile tool for React Native applications tailored for e-commerce and content-rich platforms. It enhances the user experience by integrating shoppable features directly within media posts, such as videos.

  Is one of the minis UGC, User-Generated Content, that allows users to create and share their own content, and other users can shop directly from it.

  This component dynamically renders an video with associated actionable elements like a list of related products that can be directly shopped from the video.

  Designed to foster interactive shopping experiences, the ShoppableVideos supports customization for media rendering and extends functionality to include product relationships directly beneath the media content, dynamically adjusting its layout based on content attributes and device-specific behaviors.

  Here's how you can use the ShoppableVideos component within your React Native application:

• 
  

  <ShoppableVideos
    items={shoppableVideos}
    shopId={shopGID}
    fetchMore={fetchMore}
  />

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Integration

Step 1: Importing the Component

Import the ShoppableVideos component from your project's module:

import { ShoppableVideos } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the ShoppableVideos

Implement the ShoppableVideos in your application where you want to provide an interactive video shopping experience. It's crucial to configure it with the items that represent the video content and handlers for dynamic data fetching or shop interactions:

<ShoppableVideos
  items={videoContentArray}
  shopId={shopIdentifier}
  fetchMore={handleLoadMoreVideos}
  onShopLoaded={handleShopLoaded}
/>

Examples

For detailed examples check how to build a ShoppableVideos mini using this template here.

Props

• items (ItemType[]): An array of video items that the component will render. Each item in the array represents a shoppable video object containing video details and associated products.
• shopId (string): The unique identifier for the shop where the products related to the videos are hosted.
• fetchMore (() => void): An optional function that is triggered when the end of the video list is reached. This is typically used to load more video items, facilitating pagination or infinite scrolling.
• onShopLoaded ((shopInfo: ShopType) => void): A callback function that is invoked once the shop data is loaded. This allows the parent component to access shop-specific information, such as details about the shop or other metadata.
• renderItem ((info: ListRenderItemInfo<ItemType>) => ReactElement): An optional function for rendering each video item. This is useful for custom video player integration or when specific customization is required for each video item.
• renderMedia, renderMediaFooter, and renderMediaHeader (() => ReactElement): Optional rendering functions for displaying custom media components, footers, or headers associated with each video. These provide additional customization points to augment the video content with extra UI elements like buttons, links, or additional information.

For more details on the props, please refer to the ShoppableVideos Props.