> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://rubik-combined-listings.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Swatch Click Event API

Rubik Combined Listings emits a custom JavaScript event whenever a swatch is clicked. This allows developers to track interactions, trigger analytics events, or build custom logic.

Event name:

`rcl_swatch_clicked`

The event is dispatched on `window` and includes detailed information about the clicked swatch and related product.

**Event detail properties:**

| Property | Type | Description |
| ---- |
| optionValue | string | Swatch label such as "Blue" |
| productId | number | Shopify product ID |
| productTitle | string | Product title |
| productUrl | string | Product page URL |
| productPrice | string | Formatted product price |
| hasPriceRange | boolean | Indicates if multiple variant prices exist |
| productAvailable | boolean | Stock availability |
| productCompareAtPrice | string | Compare-at price if on sale |
| isCurrent | boolean | True if the swatch is already selected |
| category | string | Swatch category label |
| swatchType | string | visual, button, or dropdown |
| context | string | product_page or product_card |
| viewport | string | desktop or mobile |
| position | number | Zero-based index within the group |
| groupOptionName | string | Option name such as "Color" |
| timestamp | number | Unix timestamp in milliseconds |

**Example usage with Google Analytics:**

```
window.addEventListener('rcl_swatch_clicked', function(e) {
    gtag('event', 'swatch_click', {
        product_id: e.detail.productId,
        option_value: e.detail.optionValue
    });
});
```

This API makes it easy to measure swatch engagement and integrate with analytics tools, tag managers, or custom tracking systems.