Skip to Content
Product Cards

Product Cards

ProductCards converts a text chunk into shoppable product cards. Each card opens a detail sheet with variants, delivery estimates, and a purchase action.

Input

text is treated as the user’s current shopping intent (or a short assistant summary of that intent). The SDK calls ShopOps to resolve offers and renders as soon as results are available.

Optional shopper context improves pricing and delivery accuracy:

  • shopper.country (ISO 3166-1 alpha-2)
  • shopper.postalCode

Web API

import { ShopOps } from '@shopops/agentic-shopping'
 
ShopOps.configure({ sessionToken })
 
const cards = ShopOps.ProductCards.mount('#shopops-cards', {
  text,
  shopper: { country: 'US', postalCode: '94107' },
  layout: 'carousel',
  onEvent(event) {
    if (event.type === 'product.opened') {
      console.log(event.offerId)
    }
  }
})
 
cards.update({ text: nextText })

React Native

import { ShopOpsProductCards } from '@shopops/agentic-shopping/react-native'
 
<ShopOpsProductCards
  sessionToken={sessionToken}
  text={text}
  shopper={{ country: 'US', postalCode: '94107' }}
  layout="carousel"
  onEvent={(event) => {
    if (event.type === 'product.opened') {
      // analytics
    }
  }}
/>

SwiftUI

import ShopOpsAgenticShopping
 
ShopOps.configure(sessionToken: sessionToken)
 
ShopOpsProductCards(
  text: text,
  shopper: .init(country: "US", postalCode: "94107")
) { event in
  if case let .productOpened(offerId) = event {
    // analytics
  }
}

Jetpack Compose

import com.shopops.agenticshopping.ShopOps
import com.shopops.agenticshopping.model.Shopper
import com.shopops.agenticshopping.ui.ShopOpsProductCards
 
ShopOps.configure(sessionToken = sessionToken)
 
ShopOpsProductCards(
  text = text,
  shopper = Shopper(country = "US", postalCode = "94107"),
  layout = ShopOpsProductCardsLayout.Carousel,
  onEvent = { event ->
    if (event is ShopOpsEvent.ProductOpened) {
      // analytics
    }
  }
)

Events

Product Cards emits structured events so the host app can update the conversation, analytics, and attribution.

export type ShopOpsEvent =
  | { type: 'product.impression'; offerId: string }
  | { type: 'product.opened'; offerId: string }
  | { type: 'checkout.started'; checkoutId: string; offerId: string }
  | { type: 'checkout.completed'; orderId: string; receiptUrl: string }
  | { type: 'error'; code: string; message: string }

By default, tapping Buy opens Checkout immediately. Hosts that want full control can set purchaseAction: 'emitOnly' and present checkout programmatically.

Last updated on
Checkout