{
  "chatvox_widget": 1,
  "name": "Product results",
  "instructions": "",
  "widget": {
    "source": "<Card size=\"sm\" status={{ text: \"Product search\", icon: \"search\" }}>\n  <Title value={products.length === 0 ? \"No matching products\" : \"Explore our products\"} size=\"sm\" />\n  {products.length === 0 && <Caption value=\"Try another product name, or ask us to help you choose.\" />}\n  {products.map((product, index) => (\n    <Col gap={3}>\n      {index < 4 && <Col gap={3}>\n        {index > 0 && <Divider />}\n        <Row gap={3} align=\"center\">\n          <Image src={product.images[0].thumbnail} alt={product.name} size={56} radius=\"md\" frame={true} />\n          <Col flex={1} gap={1}>\n            <Text value={product.name} weight=\"semibold\" />\n            <Row gap={2} align=\"center\">\n              <Money amount={product.prices.price} decimals={product.prices.currency_minor_unit} prefix={product.prices.currency_prefix} suffix={product.prices.currency_suffix} decimalSeparator={product.prices.currency_decimal_separator} thousandSeparator={product.prices.currency_thousand_separator} weight=\"semibold\" />\n              {product.on_sale && <Money amount={product.prices.regular_price} decimals={product.prices.currency_minor_unit} prefix={product.prices.currency_prefix} suffix={product.prices.currency_suffix} decimalSeparator={product.prices.currency_decimal_separator} thousandSeparator={product.prices.currency_thousand_separator} lineThrough={true} color=\"muted\" />}\n            </Row>\n            <Badge label={product.is_in_stock ? \"In stock\" : \"Out of stock\"} color={product.is_in_stock ? \"success\" : \"warning\"} variant=\"soft\" />\n          </Col>\n          <Button label=\"View\" variant=\"outline\" size=\"sm\" onClickAction={{ functionName: \"openProduct\", additionalInputs: { url: product.permalink } }} />\n        </Row>\n      </Col>}\n    </Col>\n  ))}\n  <Divider />\n  <Button label=\"Help me choose\" variant=\"soft\" block={true} onClickAction={{ functionName: \"askForHelp\" }} />\n</Card>",
    "fields": [
      {
        "key": "products",
        "type": "list",
        "description": null
      }
    ],
    "states": [],
    "functions": [
      {
        "name": "openProduct",
        "type": "link",
        "url": "{{url}}",
        "then": {
          "type": "none"
        }
      },
      {
        "name": "askForHelp",
        "type": "send_message",
        "message": "Can you help me choose between these?",
        "then": {
          "type": "none"
        }
      }
    ],
    "examples": {
      "default": "{\n  \"products\": [\n    {\n      \"name\": \"Cotton shirt\",\n      \"permalink\": \"https://shop.example.com/product/cotton-shirt/\",\n      \"prices\": {\n        \"price\": \"3800\",\n        \"regular_price\": \"3800\",\n        \"sale_price\": \"3800\",\n        \"price_range\": null,\n        \"currency_code\": \"USD\",\n        \"currency_symbol\": \"$\",\n        \"currency_minor_unit\": 2,\n        \"currency_decimal_separator\": \".\",\n        \"currency_thousand_separator\": \",\",\n        \"currency_prefix\": \"$\",\n        \"currency_suffix\": \"\"\n      },\n      \"on_sale\": false,\n      \"is_in_stock\": false,\n      \"images\": [\n        {\n          \"thumbnail\": \"https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=160&h=160&fit=crop\"\n        }\n      ]\n    },\n    {\n      \"name\": \"Oxford shirt\",\n      \"permalink\": \"https://shop.example.com/product/oxford-shirt/\",\n      \"prices\": {\n        \"price\": \"4800\",\n        \"regular_price\": \"6400\",\n        \"sale_price\": \"4800\",\n        \"price_range\": null,\n        \"currency_code\": \"USD\",\n        \"currency_symbol\": \"$\",\n        \"currency_minor_unit\": 2,\n        \"currency_decimal_separator\": \".\",\n        \"currency_thousand_separator\": \",\",\n        \"currency_prefix\": \"$\",\n        \"currency_suffix\": \"\"\n      },\n      \"on_sale\": true,\n      \"is_in_stock\": true,\n      \"images\": [\n        {\n          \"thumbnail\": \"https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=160&h=160&fit=crop\"\n        }\n      ]\n    },\n    {\n      \"name\": \"Linen shirt\",\n      \"permalink\": \"https://shop.example.com/product/linen-shirt/\",\n      \"prices\": {\n        \"price\": \"4800\",\n        \"regular_price\": \"4800\",\n        \"sale_price\": \"4800\",\n        \"price_range\": null,\n        \"currency_code\": \"USD\",\n        \"currency_symbol\": \"$\",\n        \"currency_minor_unit\": 2,\n        \"currency_decimal_separator\": \".\",\n        \"currency_thousand_separator\": \",\",\n        \"currency_prefix\": \"$\",\n        \"currency_suffix\": \"\"\n      },\n      \"on_sale\": false,\n      \"is_in_stock\": true,\n      \"images\": [\n        {\n          \"thumbnail\": \"https://images.unsplash.com/photo-1598033129183-c4f50c736f10?w=160&h=160&fit=crop\"\n        }\n      ]\n    }\n  ]\n}",
      "named": [
        {
          "name": "No results",
          "data": "{\n  \"query\": \"parka\",\n  \"count\": 0,\n  \"products\": []\n}"
        }
      ]
    }
  }
}