Runtime events and attributes SDK reference

Stable browser events and data attributes for custom theme JavaScript.

Import these public values from @upstorr/theme-sdk/v1. Do not import their internal source files.

createThemeTextRuntime

createThemeTextRuntime(value: unknown): ThemeTextRuntime

isThemeEditorPreviewContext

isThemeEditorPreviewContext(): boolean

publishThemeCartUpdated

publishThemeCartUpdated(detail: unknown): void

publishThemeToast

publishThemeToast(detail: { tone?: string; message: string; }): void

publishThemeWishlistUpdated

publishThemeWishlistUpdated(detail: unknown): void

readThemeEditorSelection

readThemeEditorSelection<TSelection>(): TSelection | null

readThemeRuntimeLinkLists

readThemeRuntimeLinkLists(composition: unknown): Record<string, unknown>

THEME_RUNTIME_EVENTS

THEME_RUNTIME_EVENTS: { readonly cartUpdated: "upstorr:cart-updated"; readonly editorSelection: "upstorr:theme-editor-selection"; readonly wishlistUpdated: "upstorr:wishlist-updated"; readonly toast: "upstorr:toast"; }

themeRuntimeProps

themeRuntimeProps: { readonly sectionGroup: (group: string) => ThemeRuntimeProps; readonly sectionLiquidLayout: () => ThemeRuntimeProps; readonly editorAllowClick: (enabled?: boolean) => ThemeRuntimeProps; readonly maintenanceAction: (action: string) => ThemeRuntimeProps; readonly buttonAction: (action: "gift-card-copy" | "digital-delivery-download") => ThemeRuntimeProps; readonly giftCardRoot: () => ThemeRuntimeProps; readonly giftCardCode: () => ThemeRuntimeProps; readonly giftCardMessage: () => ThemeRuntimeProps; readonly digitalDeliveryRoot: (input: { entitlementId: string; remainingDownloads: number | null; preview: boolean; }) => ThemeRuntimeProps; readonly selected: (selected: boolean, style?: string) => ThemeRuntimeProps; readonly sectionDisplay: (input: { id: string; type: string; group?: string | null; pageType?: string | null; layoutOrder?: number; display?: "contents"; }) => ThemeRuntimeProps; readonly cartDrawerRoot: (settings: { autoOpen?: boolean; showCartNote?: boolean; cartNoteOpenByDefault?: boolean; showDiscountCode?: boolean; showCurrencyCodeCartItems?: boolean; showCurrencyCodeCartTotal?: boolean; emptyCartButtonLink?: string; }) => ThemeRuntimeProps; readonly cartDrawerTrigger: () => ThemeRuntimeProps; readonly cartDrawerDialog: () => ThemeRuntimeProps; readonly cartDrawerClose: () => ThemeRuntimeProps; readonly cartNoteInput: (savedNote: string) => ThemeRuntimeProps; readonly cartDiscountComponent: () => ThemeRuntimeProps; readonly cartDiscountForm: () => ThemeRuntimeProps; readonly cartDiscountInput: () => ThemeRuntimeProps; readonly cartDiscountMessage: () => ThemeRuntimeProps; readonly checkoutField: (id?: string, options?: { persistOnCommit?: boolean; }) => ThemeRuntimeProps; readonly checkoutDraftPatch: (patch?: ThemeCheckoutDraft, options?: { persist?: boolean; price?: number; }) => ThemeRuntimeProps; readonly checkoutDeliveryMethod: (method: string) => ThemeRuntimeProps; readonly checkoutDeliveryPanel: (method: string) => ThemeRuntimeProps; readonly checkoutShippingMethodPanel: () => ThemeRuntimeProps; readonly checkoutBusinessPurchase: () => ThemeRuntimeProps; readonly checkoutBusinessTaxFields: () => ThemeRuntimeProps; readonly checkoutBillingAddress: () => ThemeRuntimeProps; readonly checkoutBillingSameAsDelivery: () => ThemeRuntimeProps; readonly checkoutBillingFields: () => ThemeRuntimeProps; readonly checkoutShippingItemsToggle: (id: string) => ThemeRuntimeProps; readonly checkoutShippingItemsPopup: () => ThemeRuntimeProps; readonly checkoutShippingItemsClose: () => ThemeRuntimeProps; readonly checkoutPickupSearch: () => ThemeRuntimeProps; readonly checkoutPickupSearchReset: () => ThemeRuntimeProps; readonly checkoutPickupLocation: (locationId: string) => ThemeRuntimeProps; readonly checkoutPickupSelectionSummary: () => ThemeRuntimeProps; readonly checkoutPickupOption: (searchText: string) => ThemeRuntimeProps; readonly checkoutPickupEmpty: () => ThemeRuntimeProps; readonly checkoutShippingOptionsToggle: (id: string) => ThemeRuntimeProps; readonly checkoutShippingOptionsPopup: () => ThemeRuntimeProps; readonly checkoutShippingOptionsClose: () => ThemeRuntimeProps; readonly checkoutLocalDeliveryPhoneCountryCode: () => ThemeRuntimeProps; readonly checkoutLocalDeliveryPhoneNumber: () => ThemeRuntimeProps; readonly checkoutLocalAddressRoot: (options?: { quoteLocalDelivery?: boolean; }) => ThemeRuntimeProps; readonly checkoutLocalAddressSearch: () => ThemeRuntimeProps; readonly checkoutLocalAddressCurrent: () => ThemeRuntimeProps; readonly checkoutLocalAddressSuggestions: () => ThemeRuntimeProps; readonly checkoutLocalAddressMessage: () => ThemeRuntimeProps; readonly checkoutRemoveUnavailableItem: (lineItemId: string) => ThemeRuntimeProps; readonly checkoutTotalLine: (key: string) => ThemeRuntimeProps; readonly checkoutTotalValue: (key: string) => ThemeRuntimeProps; readonly checkoutSubmit: (options?: { sessionId?: string; loadingLabel?: string; }) => ThemeRuntimeProps; readonly checkoutSubmitLabel: () => ThemeRuntimeProps; readonly checkoutPreview: (enabled: boolean) => ThemeRuntimeProps; readonly checkoutPreviewState: (state: string) => ThemeRuntimeProps; readonly wishlistPreview: (enabled: boolean) => ThemeRuntimeProps; readonly wishlistPreviewState: (state: string) => ThemeRuntimeProps; readonly productPurchaseRoot: (productId?: string | null) => ThemeRuntimeProps; readonly productVariantData: (variants?: unknown[] | null) => ThemeRuntimeProps; readonly productVariantPicker: (input: { optionName?: string | null; optionIndex: number; }) => ThemeRuntimeProps; readonly productVariantOption: (input: { optionName?: string | null; optionIndex: number; optionValue?: string | null; }) => ThemeRuntimeProps; readonly productPrice: (input?: { currency?: string | null; showCurrencyCode?: boolean; showSalePriceFirst?: boolean; }) => ThemeRuntimeProps; readonly productAddToCart: (input?: { productId?: string; variantId?: string; }) => ThemeRuntimeProps; readonly complementaryProducts: (input: { page: number; pageCount: number; }) => ThemeRuntimeProps; readonly complementaryProductsPage: (page: number) => ThemeRuntimeProps; readonly complementaryProductAddToCart: (input?: { productId?: string; variantId?: string; }) => ThemeRuntimeProps; readonly complementaryProductsPageAction: (action: "previous" | "next") => ThemeRuntimeProps; readonly complementaryProductsPageLabel: () => ThemeRuntimeProps; readonly productWishlist: (productId: string) => ThemeRuntimeProps; readonly wishlistRemove: (productId: string) => ThemeRuntimeProps; readonly maintenanceUnlockPanel: () => ThemeRuntimeProps; readonly maintenanceUnlockForm: () => ThemeRuntimeProps; readonly maintenanceUnlockMessage: () => ThemeRuntimeProps; readonly cookieConsentAction: (action: "accept" | "reject") => ThemeRuntimeProps; readonly emailSignupForm: (source: string) => ThemeRuntimeProps; readonly emailSignupMessage: () => ThemeRuntimeProps; readonly emailSignupMessageText: () => ThemeRuntimeProps; readonly emailSignupSuccessIcon: () => ThemeRuntimeProps; readonly cookieConsentPreview: (input?: { sectionId?: string | null; blockId?: string | null; blockType?: string | null; }) => ThemeRuntimeProps; readonly productQuantityAction: (action: "increase" | "decrease") => ThemeRuntimeProps; readonly productQuantityInput: () => ThemeRuntimeProps; readonly productPurchaseMessage: () => ThemeRuntimeProps; readonly productMediaGallery: () => ThemeRuntimeProps; readonly featuredProductGallery: () => ThemeRuntimeProps; readonly featuredProductZoomOpen: () => ThemeRuntimeProps; readonly featuredProductZoomDialog: () => ThemeRuntimeProps; readonly featuredProductZoomClose: () => ThemeRuntimeProps; readonly carouselContent: () => ThemeRuntimeProps; readonly carouselAction: (action: "previous" | "next") => ThemeRuntimeProps; readonly collectionListCarousel: () => ThemeRuntimeProps; readonly collectionLinks: () => ThemeRuntimeProps; readonly comparisonSlider: () => ThemeRuntimeProps; readonly comparisonSliderRange: () => ThemeRuntimeProps; readonly featuredBlogPostsCarousel: () => ThemeRuntimeProps; readonly productListCarousel: () => ThemeRuntimeProps; readonly productCardGallery: () => ThemeRuntimeProps; readonly layeredSlideshow: () => ThemeRuntimeProps; readonly slideshow: (mode: "full-frame") => ThemeRuntimeProps; readonly slideshowMode: (mode: string) => ThemeRuntimeProps; readonly slideshowClone: (clone?: boolean) => ThemeRuntimeProps; readonly wishlistSection: () => ThemeRuntimeProps; readonly ordersSection: () => ThemeRuntimeProps; readonly ordersRoot: () => ThemeRuntimeProps; readonly ordersState: (state: string) => ThemeRuntimeProps; readonly ordersListState: (state: string) => ThemeRuntimeProps; readonly ordersDetailState: (state: string, orderId?: string) => ThemeRuntimeProps; readonly ordersMobileBack: () => ThemeRuntimeProps; readonly ordersOrder: (orderId: string) => ThemeRuntimeProps; readonly ordersPaginationPage: (page: number) => ThemeRuntimeProps; readonly ordersRetry: () => ThemeRuntimeProps; readonly ordersActionMessage: () => ThemeRuntimeProps; readonly ordersBookingCancel: (orderId: string, bookingId: string) => ThemeRuntimeProps; readonly ordersReturnRoot: (orderId: string) => ThemeRuntimeProps; readonly ordersReturnOpen: () => ThemeRuntimeProps; readonly ordersReturnClose: () => ThemeRuntimeProps; readonly ordersReturnLine: (orderItemId: string) => ThemeRuntimeProps; readonly ordersReturnReason: () => ThemeRuntimeProps; readonly ordersReturnSubmit: () => ThemeRuntimeProps; readonly ordersReturnMessage: () => ThemeRuntimeProps; readonly ordersPreviewOrder: (orderId: string) => ThemeRuntimeProps; readonly bookingSlotPanel: (input: { offerHandle?: string | null; productId?: string | null; variantId?: string | null; canCheckout?: boolean; datePageSize: number; }) => ThemeRuntimeProps; readonly bookingDate: (input: { dateKey: string; index: number; }) => ThemeRuntimeProps; readonly bookingDatePageAction: (action: "previous" | "next") => ThemeRuntimeProps; readonly bookingDateGroup: (dateKey: string) => ThemeRuntimeProps; readonly bookingSlot: (input: { id: string; startsAt: string; label?: string | null; maxQuantity: number; }) => ThemeRuntimeProps; readonly bookingQuantity: () => ThemeRuntimeProps; readonly bookingQuantityAction: (action: "increase" | "decrease") => ThemeRuntimeProps; readonly bookingQuantityInput: () => ThemeRuntimeProps; readonly bookingCartLine: () => ThemeRuntimeProps; readonly bookingCartQuantity: () => ThemeRuntimeProps; readonly bookingError: () => ThemeRuntimeProps; readonly bookingMessage: () => ThemeRuntimeProps; readonly bookingContinue: () => ThemeRuntimeProps; readonly bookingSelectedMessage: (windowLabel: string) => ThemeRuntimeProps; readonly headerAccountRoot: () => ThemeRuntimeProps; readonly headerAccountToggle: (popupId: string) => ThemeRuntimeProps; readonly headerAccountPopup: () => ThemeRuntimeProps; readonly headerAccountClose: () => ThemeRuntimeProps; readonly headerRow: (row: string, input: { menuPosition?: string; menuColumn?: string; hasCenterColumn?: boolean; }) => ThemeRuntimeProps; readonly marketSwitcher: () => ThemeRuntimeProps; readonly marketSwitcherTrigger: () => ThemeRuntimeProps; readonly marketSwitcherMenu: () => ThemeRuntimeProps; readonly marketSwitcherLink: (marketCode: string) => ThemeRuntimeProps; readonly headerDrawerRoot: () => ThemeRuntimeProps; readonly headerDrawerPanel: () => ThemeRuntimeProps; readonly headerDrawerToggle: () => ThemeRuntimeProps; readonly headerDrawerClose: () => ThemeRuntimeProps; readonly headerDrawerBackdrop: () => ThemeRuntimeProps; readonly headerDrawerSubmenu: () => ThemeRuntimeProps; readonly headerDrawerSubmenuTrigger: () => ThemeRuntimeProps; readonly headerDrawerBack: () => ThemeRuntimeProps; readonly emptyLinkList: (handle?: string | null) => ThemeRuntimeProps; readonly reviewFormOverlay: () => ThemeRuntimeProps; readonly reviewFormClose: () => ThemeRuntimeProps; readonly reviewFormPanel: () => ThemeRuntimeProps; readonly reviewForm: () => ThemeRuntimeProps; readonly reviewStepIndicator: (state: "active" | "complete" | "idle") => ThemeRuntimeProps; readonly reviewStep: (step: string) => ThemeRuntimeProps; readonly reviewMediaUpload: () => ThemeRuntimeProps; readonly reviewMediaInput: () => ThemeRuntimeProps; readonly reviewMediaCount: () => ThemeRuntimeProps; readonly reviewNext: (enabled: boolean) => ThemeRuntimeProps; readonly reviewBack: (enabled: boolean) => ThemeRuntimeProps; readonly reviewFormMessage: () => ThemeRuntimeProps; readonly reviewTrigger: () => ThemeRuntimeProps; readonly customerReviews: () => ThemeRuntimeProps; readonly customerReviewItem: () => ThemeRuntimeProps; readonly customerReviewsShowMore: () => ThemeRuntimeProps; readonly searchPageForm: () => ThemeRuntimeProps; readonly searchPageInput: () => ThemeRuntimeProps; readonly searchResults: (sectionId: string, width?: string) => ThemeRuntimeProps; readonly searchResultsLoadMore: () => ThemeRuntimeProps; readonly mainCollection: (sectionId: string) => ThemeRuntimeProps; readonly mainCollectionLoadMore: () => ThemeRuntimeProps; readonly viewMorePrevious: () => ThemeRuntimeProps; readonly facetsForm: () => ThemeRuntimeProps; readonly facetsOpen: (id: string) => ThemeRuntimeProps; readonly facetsClose: () => ThemeRuntimeProps; readonly facetsDrawer: (id: string) => ThemeRuntimeProps; readonly gridDensityControl: () => ThemeRuntimeProps; readonly videoPlay: () => ThemeRuntimeProps; readonly videoTemplate: () => ThemeRuntimeProps; readonly jumboText: (value: string) => ThemeRuntimeProps; readonly errorPopupSection: (settings: { position: string; animation: string; width: string; customWidth: number; message: string; }) => ThemeRuntimeProps; readonly errorPopupText: (message: string) => ThemeRuntimeProps; readonly placeholder: (value: string) => ThemeRuntimeProps; readonly overlay: (input: { style: string; color: string; direction: string; background: string; }) => ThemeRuntimeProps; readonly customTypography: (settings: { preset?: string; font?: string; size?: string; lineHeight?: string; letterSpacing?: string; case?: string; wrap?: string; }) => ThemeRuntimeProps; }

themeRuntimeSelectors

themeRuntimeSelectors: { readonly carouselAction: "[data-upstorr-carousel-action]"; readonly carouselContent: "[data-upstorr-carousel-content]"; readonly collectionListCarousel: "[data-upstorr-collection-list-carousel]"; readonly comparisonSlider: "[data-upstorr-comparison-slider]"; readonly comparisonSliderRange: "[data-upstorr-comparison-slider-range]"; readonly featuredBlogPostsCarousel: "[data-upstorr-blog-posts-carousel]"; readonly featuredProductGallery: "[data-upstorr-featured-product-gallery]"; readonly featuredProductZoomDialog: "[data-upstorr-featured-product-zoom-dialog]"; readonly featuredProductZoomOpen: "[data-upstorr-featured-product-zoom-open]"; readonly featuredProductZoomClose: "[data-upstorr-featured-product-zoom-close]"; readonly layeredSlideshow: "[data-upstorr-layered-slideshow]"; readonly collectionLinks: "[data-upstorr-collection-links]"; readonly productListCarousel: "[data-upstorr-product-list-carousel]"; readonly productCardGallery: "[data-upstorr-product-card-gallery]"; readonly productMediaGallery: "[data-upstorr-product-media-gallery]"; readonly slideshowFullFrame: "[data-upstorr-slideshow=\"full-frame\"]"; }

ThemeTextRuntime

type ThemeTextRuntime = {
    languageCode: string | null;
    translate: ThemeTextTranslator;
};

ThemeTextTranslator

type ThemeTextTranslator = (key: string, fallback: string) => string;

useThemeCartUpdatedEvent

useThemeCartUpdatedEvent<TDetail>(handler: (event: CustomEvent<TDetail>) => void): void

useThemeEditorSelection

useThemeEditorSelection<TSelection>(handler: (selection: TSelection | null) => void): void

useThemeRuntimeEvent

useThemeRuntimeEvent<TDetail>(name: string, handler: (event: CustomEvent<TDetail>) => void): void