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.model.ShopOpsEvent
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