Product Listing Page

Product listing API response mapped to frontend card fields, including an empty state.

What This Example Demonstrates

This fixture shows how a Merchant Services search response can be normalized into product-card data. It also includes the empty state needed when filters or customer intent produce no available products.

How to Use It

Map API field names at the frontend boundary so presentation components receive one stable shape. Preserve product and store IDs for later cart actions. Display price and stock as current search information, then revalidate both when the customer confirms a purchase.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "productListingPage": {
    "source": "Merchant Services search response mapped to frontend card fields.",
    "apiResponse": {
      "success": true,
      "count": 3,
      "products": [
        {
          "id": "prd_01HX7JACKETBLACK",
          "product_id": "1234567890",
          "store_id": "store_acme_outdoor",
          "sku": "JACKET-BLK",
          "name": "Black Waterproof Hiking Jacket",
          "description": "Lightweight waterproof shell with adjustable hood and sealed seams.",
          "price": "129.90",
          "currency": "USD",
          "status": "active",
          "in_stock": true,
          "inventory_quantity": 18,
          "image_url": "https://cdn.example.com/products/jacket-black-main.jpg",
          "product_url": "https://store.example.com/products/black-waterproof-hiking-jacket",
          "other_details": {
            "brand": "Example Brand",
            "category": "Outerwear",
            "storeName": "Example Brand Store"
          }
        },
        {
          "id": "prd_01HXRAINPARKA",
          "product_id": "1234567891",
          "store_id": "store_acme_outdoor",
          "sku": "PARKA-BLK-L",
          "name": "Storm Shield Rain Parka",
          "description": "Long waterproof parka with breathable lining.",
          "price": "179.00",
          "currency": "USD",
          "status": "active",
          "in_stock": true,
          "inventory_quantity": 7,
          "image_url": "https://cdn.example.com/products/parka-black-main.jpg",
          "product_url": "https://store.example.com/products/storm-shield-rain-parka",
          "other_details": {
            "brand": "Example Brand",
            "category": "Outerwear",
            "storeName": "Example Brand Store"
          }
        },
        {
          "id": "prd_01HXTRAILSHELL",
          "product_id": "1234567892",
          "store_id": "store_acme_outdoor",
          "sku": "SHELL-GRN-M",
          "name": "Trail Shell Jacket",
          "description": "Packable rain shell for trail and city use.",
          "price": "89.90",
          "currency": "USD",
          "status": "active",
          "in_stock": false,
          "inventory_quantity": 0,
          "image_url": "https://cdn.example.com/products/shell-green-main.jpg",
          "product_url": "https://store.example.com/products/trail-shell-jacket",
          "other_details": {
            "brand": "Example Brand",
            "category": "Outerwear",
            "storeName": "Example Brand Store"
          }
        }
      ]
    },
    "frontendMappedProducts": [
      {
        "id": "prd_01HX7JACKETBLACK",
        "productId": "1234567890",
        "sku": "JACKET-BLK",
        "name": "Black Waterproof Hiking Jacket",
        "brand": "Example Brand",
        "price": 129.9,
        "original_price": 159.9,
        "price_text": "$129.90",
        "url": "https://store.example.com/products/black-waterproof-hiking-jacket",
        "image": "https://cdn.example.com/products/jacket-black-main.jpg",
        "description": "Lightweight waterproof shell with adjustable hood and sealed seams.",
        "in_stock": true,
        "storeName": "Example Brand Store"
      },
      {
        "id": "prd_01HXRAINPARKA",
        "productId": "1234567891",
        "sku": "PARKA-BLK-L",
        "name": "Storm Shield Rain Parka",
        "brand": "Example Brand",
        "price": 179,
        "original_price": 179,
        "price_text": "$179.00",
        "url": "https://store.example.com/products/storm-shield-rain-parka",
        "image": "https://cdn.example.com/products/parka-black-main.jpg",
        "description": "Long waterproof parka with breathable lining.",
        "in_stock": true,
        "storeName": "Example Brand Store"
      }
    ],
    "emptyState": {
      "success": true,
      "count": 0,
      "products": [],
      "ui": {
        "action": "RENDER_PRODUCTS",
        "content": "No matching products were found. Try a different color, size, or category."
      }
    }
  }
}