TURBO for Developers

Home > widget-integration > CartSelectors

CartSelectors class

Cart selectors managing theme-specific cart icon configurations

Provides cart icon selectors and update actions for 30+ Shopify themes including: - Dawn, Debut, Sense, Craft, Refresh, Studio, Taste, Ride, Crave - Prestige, Empire, Impulse, Motion, Flex, Flow, Venue, Warehouse - Turbo, Testament, Venture, Symetry, Superstore, Icon, Ella - BlockShop, ColorBlock, Broadcast, Focal, Expanse - And more custom themes

Technical Support teams can: - Add custom theme configurations via window.boostWidgetIntegrationConfig - Override theme detection logic - Customize cart count update behavior

Signature:

export declare class CartSelectors

Example

// Add custom theme configuration
window.boostWidgetIntegrationConfig = {
  updateCartIconActionForThemes: {
    customTheme: {
      selector: '.my-cart-icon',
      action: (count) => {
        document.querySelector('.cart-count').textContent = count;
      }
    }
  }
};

// Extend CartSelectors for custom behavior
window.boostWidgetIntegration.extend('CartSelectors', (CartSelectors) => {
  return class CustomCartSelectors extends CartSelectors {
    getCartSelectorAndUpdateAction() {
      // Try custom logic first
      const customConfig = this.getCustomThemeConfig();
      if (customConfig) return customConfig;

      // Fallback to default
      return super.getCartSelectorAndUpdateAction();
    }

    getCustomThemeConfig() {
      const shopTheme = window.Shopify?.theme?.name;
      return this.updateCartIconActionForThemes[shopTheme];
    }
  };
});

Constructors

Constructor	Modifiers	Description
(constructor)(appService)		Constructs a new instance of the `CartSelectors` class

Properties

Property	Modifiers	Type	Description
appService	`protected`	AppService
updateCartIconActionForThemes	`protected`	{ blockShop: { selector: string; action: (cartItemCount: number) => void; }; colorBlock: { theme: string; selector: string; action: (cartItemCount: number) => void; }; craft: { selector: string; action: (cartItemCount: number) => void; }; crave: { selector: string; action: (cartItemCount: number) => void; }; dawn: { selector: string; action: (cartItemCount: number) => void; }; debut: { selector: string; action: (cartItemCount: number) => void; }; default: { selector: string; action: (cartItemCount: number) => void; }; ella: { selector: string; action: (cartItemCount: number) => void; }; empire: { selector: string; action: (cartItemCount: number) => void; }; flex: { selector: string; action: (cartItemCount: number) => void; }; flow: { selector: string; action: (cartItemCount: number) => void; }; icon: { selector: string; action: (cartItemCount: number) => void; }; impulse: { selector: string; action: (cartItemCount: number) => void; }; motion: { selector: string; action: (cartItemCount: number) => void; }; prestige: { selector: string; action: (cartItemCount: number) => void; }; refresh: { selector: string; action: (cartItemCount: number) => void; }; ride: { selector: string; action: (cartItemCount: number) => void; }; sense: { selector: string; action: (cartItemCount: number) => void; }; studio: { selector: string; action: (cartItemCount: number) => void; }; superstore: { selector: string; action: (cartItemCount: number) => void; }; symetry: { selector: string; action: (cartItemCount: number) => void; }; taste: { selector: string; action: (cartItemCount: number) => void; }; testament: { selector: string; action: (cartItemCount: number) => void; }; turbo: { selector: string; action: (cartItemCount: number) => void; }; venture: { selector: string; action: (cartItemCount: number) => void; }; venue: { selector: string; action: (cartItemCount: number) => void; }; warehouse: { selector: string; action: (cartItemCount: number) => void; }; expanse: { selector: string; action: (cartItemCount: number) => void; }; focal: { selector: string; action: (cartItemCount: number) => void; }; broadcast: { selector: string; action: (cartItemCount: number) => void; }; }	Theme-specific cart icon configurations Maps theme names to their cart icon selectors and update actions. Technical Support teams can extend this configuration via window.boostWidgetIntegrationConfig. Allows extension by subclasses for custom theme configurations

Property

Modifiers

Type

Description

appService

protected

AppService

updateCartIconActionForThemes

protected

{ blockShop: { selector: string; action: (cartItemCount: number) => void; }; colorBlock: { theme: string; selector: string; action: (cartItemCount: number) => void; }; craft: { selector: string; action: (cartItemCount: number) => void; }; crave: { selector: string; action: (cartItemCount: number) => void; }; dawn: { selector: string; action: (cartItemCount: number) => void; }; debut: { selector: string; action: (cartItemCount: number) => void; }; default: { selector: string; action: (cartItemCount: number) => void; }; ella: { selector: string; action: (cartItemCount: number) => void; }; empire: { selector: string; action: (cartItemCount: number) => void; }; flex: { selector: string; action: (cartItemCount: number) => void; }; flow: { selector: string; action: (cartItemCount: number) => void; }; icon: { selector: string; action: (cartItemCount: number) => void; }; impulse: { selector: string; action: (cartItemCount: number) => void; }; motion: { selector: string; action: (cartItemCount: number) => void; }; prestige: { selector: string; action: (cartItemCount: number) => void; }; refresh: { selector: string; action: (cartItemCount: number) => void; }; ride: { selector: string; action: (cartItemCount: number) => void; }; sense: { selector: string; action: (cartItemCount: number) => void; }; studio: { selector: string; action: (cartItemCount: number) => void; }; superstore: { selector: string; action: (cartItemCount: number) => void; }; symetry: { selector: string; action: (cartItemCount: number) => void; }; taste: { selector: string; action: (cartItemCount: number) => void; }; testament: { selector: string; action: (cartItemCount: number) => void; }; turbo: { selector: string; action: (cartItemCount: number) => void; }; venture: { selector: string; action: (cartItemCount: number) => void; }; venue: { selector: string; action: (cartItemCount: number) => void; }; warehouse: { selector: string; action: (cartItemCount: number) => void; }; expanse: { selector: string; action: (cartItemCount: number) => void; }; focal: { selector: string; action: (cartItemCount: number) => void; }; broadcast: { selector: string; action: (cartItemCount: number) => void; }; }

Theme-specific cart icon configurations

Maps theme names to their cart icon selectors and update actions. Technical Support teams can extend this configuration via window.boostWidgetIntegrationConfig.

Allows extension by subclasses for custom theme configurations

Methods

Method	Modifiers	Description
createCartCountBubble(cartItemCount, className)	`protected`	Safely create cart count bubble element with proper text content (XSS-safe)
createDebutCartCount(cartItemCount)	`protected`	Safely create Debut theme cart count element (XSS-safe)
exposeConfig()	`protected`	Expose cart icon configuration to window for runtime customization Protected to allow Technical Support teams to customize config exposure Override to: - Add custom configuration merging logic - Validate theme configurations - Add logging or analytics
getCartSelectorAndUpdateAction()		Get cart selector configuration for current theme Detects which Shopify theme is active by checking for theme-specific selectors Returns the first matching theme configuration found
safelySetCartCount(element, count)	`protected`	Safely update element text content (XSS-safe) Uses textContent instead of innerHTML to prevent XSS vulnerabilities
updateCartCount(cartItemCount)		Update cart count in theme-specific cart icon Exposes configuration to window and updates cart count using matched theme action Automatically detects current theme and applies appropriate update logic