Swatch Click Event

← Back to documentation

Overview

Rubik Combined Listings dispatches a custom JavaScript event whenever a user clicks on a swatch. This allows you to integrate with analytics, tracking systems, or custom functionality.

Event name

rcl_swatch_clicked

How to listen

window.addEventListener('rcl_swatch_clicked', function(e) {
    console.log('Swatch clicked:', e.detail);
});

Event detail properties

Property	Type	Description
optionValue	string|null	Swatch label (e.g., "Blue", "Large")
productId	number|null	Shopify product ID
productTitle	string|null	Product name
productUrl	string|null	URL to product page
productPrice	string|null	Formatted price (e.g., "$19.99")
hasPriceRange	boolean	True if product has multiple prices
productAvailable	boolean	Stock availability
productCompareAtPrice	string|null	Compare-at price if on sale
isCurrent	boolean	True if this was the already-selected swatch
category	string|null	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 in the swatch group
groupOptionName	string|null	Option name (e.g., "Color")
timestamp	number	Unix timestamp in milliseconds

Example: Google Analytics integration

window.addEventListener('rcl_swatch_clicked', function(e) {
    if (window.gtag) {
        gtag('event', 'swatch_click', {
            product_id: e.detail.productId,
            product_name: e.detail.productTitle,
            option_value: e.detail.optionValue,
            swatch_type: e.detail.swatchType,
            context: e.detail.context
        });
    }
});

Example: Custom tracking

window.addEventListener('rcl_swatch_clicked', function(e) {
    // Send to your analytics endpoint
    fetch('/api/track', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            event: 'swatch_click',
            data: e.detail
        })
    });
});

Debugging

Paste this snippet into your browser console to see all event data when clicking swatches:

window.addEventListener('rcl_swatch_clicked', function(e) {
    var d = e.detail;
    alert(
        'Swatch Clicked!\n\n' +
        '— Swatch Data —\n' +
        'optionValue: ' + d.optionValue + '\n' +
        'productId: ' + d.productId + '\n' +
        'productTitle: ' + d.productTitle + '\n' +
        'productUrl: ' + d.productUrl + '\n' +
        'productPrice: ' + d.productPrice + '\n' +
        'hasPriceRange: ' + d.hasPriceRange + '\n' +
        'productAvailable: ' + d.productAvailable + '\n' +
        'productCompareAtPrice: ' + d.productCompareAtPrice + '\n' +
        'isCurrent: ' + d.isCurrent + '\n' +
        'category: ' + d.category + '\n\n' +
        '— Context —\n' +
        'swatchType: ' + d.swatchType + '\n' +
        'context: ' + d.context + '\n' +
        'viewport: ' + d.viewport + '\n' +
        'position: ' + d.position + '\n' +
        'groupOptionName: ' + d.groupOptionName + '\n\n' +
        '— Timestamp —\n' +
        'timestamp: ' + d.timestamp
    );
    console.log('rcl_swatch_clicked:', d);
});

Performance notes

• The event is dispatched asynchronously using setTimeout(0) to avoid blocking the UI
• All data is already available in memory - no additional network requests are made
• The event fires after the swatch click action completes