Web SDK Docs

// SSE event: type = "bundle-result"
{
  "type": "bundle-result",
  "data": {
    "intent": "beginner surfer starter kit",
    "budget": 500,
    "groups": [
      {
        "category": "Surfboards",
        "product": {
          "id": "prod_abc123",
          "title": "7ft Soft-Top Beginner Surfboard",
          "price": 249,
          "variantId": "variant_xyz"
        }
      },
      {
        "category": "Wetsuits",
        "product": {
          "id": "prod_def456",
          "title": "3/2mm Full Wetsuit",
          "price": 189,
          "variantId": "variant_uvw"
        }
      },
      {
        "category": "Leashes",
        "product": {
          "id": "prod_ghi789",
          "title": "7ft Surf Leash",
          "price": 35,
          "variantId": "variant_rst"
        }
      }
    ]
  }
}

const response = await fetch('https://api.inops.dev/shop/flow/execute', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Search-Key': 'YOUR_SEARCH_KEY',
    'Accept': 'text/event-stream',
  },
  body: JSON.stringify({
    userInput: { type: 'search', value: 'my kid wants to start surfing' },
    language: 'en',
  }),
});

const reader = response.body.getReader();
const decoder = new TextDecoder();
const bundles = [];

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  const text = decoder.decode(value);
  for (const line of text.split('\n')) {
    if (!line.startsWith('data: ')) continue;
    const event = JSON.parse(line.slice(6));

    switch (event.type) {
      case 'products':
        renderSearchResults(event.data);
        break;
      case 'ranked-results':
        replaceWithRankedResults(event.data);
        break;
      case 'summary-result':
        renderSummary(event.data.summary);
        break;
      case 'bundle-result':
        // Multiple bundle-result events may arrive (one per variant)
        bundles.push(event.data);
        renderBundle(event.data);
        break;
      case 'flow-end':
        setLoading(false);
        break;
      case 'flow-error':
        showError(event.data.message);
        break;
    }
  }
}

// Fire after a shopper clicks a product card
async function loadSimilarProducts(productId) {
  const response = await fetch('https://api.inops.dev/shop/flow/execute', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Search-Key': 'YOUR_SEARCH_KEY',
      'Accept': 'text/event-stream',
    },
    body: JSON.stringify({
      userInput: { type: 'similar_products', productId },
      language: 'en',
    }),
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const text = decoder.decode(value);
    for (const line of text.split('\n')) {
      if (!line.startsWith('data: ')) continue;
      const event = JSON.parse(line.slice(6));
      if (event.type === 'products') {
        renderRecommendations(event.data); // "You might also like"
      }
      if (event.type === 'flow-end') break;
    }
  }
}

// Add a single product variant to the Shopify cart
async function addToCart(variantId, quantity = 1) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      items: [{ id: variantId, quantity }],
    }),
  });
  const cart = await response.json();
  return cart;
}

// Add all items in a bundle-result to the Shopify cart at once
async function addBundleToCart(bundle) {
  // bundle.groups is the array from the bundle-result event
  const items = bundle.groups.map((group) => ({
    id: group.product.variantId,
    quantity: 1,
  }));

  const response = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items }),
  });
  const cart = await response.json();
  return cart;
}