shopify-types.d.ts

type Primitive = | null | undefined | string | number | boolean | symbol | bigint;
type LiteralUnion<LiteralType, BaseType extends Primitive,> = LiteralType | (BaseType & Record<never, never>);

interface BrowserContextSuggestions {
  detected_values: {
    /**
     * An object informing of the the visitors country and 2 letter country code
     */
    country: {
      /**
       * The 2 letter country code
       */
      handle: string;
      /**
       * The country name in English
       */
      name: string;
    };
    /**
     * The country name in English (same as `country.name`)
     */
    country_name: string
  };
  suggestions: Array<{
    parts: {
      country?: {
        /**
         * The active 2 letter country code in uppercase, eg: `SE`, `NL` etc.
         * Identical to `detected_values`
         */
        handle: string;
        /**
         * The country name in English, Identical to `detected_values`
         */
        name: string;
        /**
         * Confidence
         */
        confidence: number;
        /**
         * List of countries
         */
        options: {
          [countryCode: string]: string;
        }
      };
      language?: {
        /**
         * The active 2 letter language code in lowercase, eg: `sv`, `nl` etc.
         */
        handle: string;
        /**
         * The language name in English
         */
        name: string;
        /**
         * Confidence
         */
        confidence: number;
        /**
         * List of languages in the store
         */
        options: {
          /**
           * Language Code > Language Name
           */
          [languageCode: string]: string;
        }
      }
    }
  }>
}

class PreviewBarInjector {

  /**
   * Options are pre-populated
   */
  constructor(options: {
    targetNode: HTMLElement;
    iframeRoot: string;
    iframeSrc: string;
    previewToken:string;
    themeStoreId:string;
    permanentDomain: string;
  })

}

interface Shopify {
  PaymentButton: {
    init(): any
  }
  autoloadFeatures(param: any): any
  /**
   * Only show in Theme previews, it's a class instance, yuck.
   */
  PreviewBarInjector(): {
    /**
     * This is already invoked at runtime
     */
    init(): void;
    hideIframe(): void;
    postMessageBuffer(argument: any): any;
    postTrekkieData(param: any): any;
    sendPostMessage(param1: any, param2: any): any;
    postMessageHandler(param1: any, param2: any, param3: any, param4: any): any;
    teardown(): void;
  }
  /**
   * Set to `true` when active in theme editor
   */
  designMode?: boolean;
  /**
   * Related to web-pixels management
   */
  analytics: {
    /**
     * Store reference of some sort, see `publish` method.
     */
    replayQueue: Array<[any, any, any]>;
    /**
     * Inserts entries into the `replayQueue`
     */
    publish(...param: any[]): void
  }
  /**
   * Routes reference
   */
  routes: {
    /**
     * The root path, typically `/` unless you are using sub-folder
     * markets then it would be something like `/en-us/` etc
     */
    root: string
  };
  /**
   * Reference to CDN hostname, typically: `cdn.shopify.com`
   */
  cdnHost: string
  /**
   * Currency Reference
   */
  currency: {
    /**
     * The current active current code, eg: `USD`, `SEK` etc
     */
    active: string;
    /**
     * The exchange rate
     */
    rate: string
  },
  /**
   * The current 2 Letter ISO Country code, eg: `US` or `CA` or `NL` etc
   */
  country: string;
  /**
   * Customer Privacy Methods
   */
  customerPrivacy: {
    getRegulation(): any
    getShopPrefs(): any
    getTrackingConsent(): any
    isRegulationEnforced(): any
    /**
     * Check if a cookie consent banner should be displayed (via visitor IP address)
     *
     * > This is `true` if consent isn't already set and the visitor is in a region showing consent.
     *
     * @see https://shopify.dev/docs/api/consent-tracking#regions-showing-consent-banners).
     */
    shouldShowBanner(): boolean;
    /**
     * Check if the visitor is in a region showing data sale opt outs.
     *
     * > This is `true` if the visitor is from a region that requires data sale opt-outs.
     *
     * @see https://shopify.dev/docs/api/consent-tracking#regions-showing-data-sale-opt-out
     */
    saleOfDataRegion(): boolean;
    /**
     * Record customer consent, use the setTrackingConsent method:
     */
    setTrackingConsent(consent: {
      /**
       * Cookies to understand how customers interact with the site.
       */
      analytics?: boolean;
      /**
       * Cookies to provide ads and marketing communications based on customer interests.
       */
      marketing?: boolean;
      /**
       * Cookies that remember customer preferences, such as country or language,
       * to personalize visits to the website.
       */
      preferences?: boolean;
      /**
       * Opts the customer out of data sharing / sales.
       */
      sale_of_data?: boolean;

    }, callback?: (error?: any) => void): void;
    /**
     * Check the current users consent.
     *
     * **Return Values**
     *
     * - `yes` - _The current visitor has actively granted consent._
     * - `no` - _The current visitor has actively denied consent._
     * - `''`- _The current visitor has not yet granted or denied consent_
     *
     */
    currentVisitorConsent(): {
      marketing?: LiteralUnion<'yes' | 'no' | '', string>;
      analytics?: LiteralUnion<'yes' | 'no' | '', string>;
      preferences?: LiteralUnion<'yes' | 'no' | '', string>;
      sale_of_data?: LiteralUnion<'yes' | 'no' | '', string>;
      gpc?: LiteralUnion<'yes' | 'no' | '', string>;
    };
    /**
     * Permission to remember preferences such as language, currency, size, etc.
     */
    preferencesProcessingAllowed(): boolean;
    /**
     *  Permission to store information about how the storefront was used and
     * interactions made on the storefront.
     */
    analyticsProcessingAllowed(): boolean;
    /**
     * Permission to collect and process data for marketing, attribution and
     * targeted advertising from the merchant.
     */
    firstPartyMarketingAllowed(): boolean;
    /**
     *  Permission to collect and share data with third parties to perform
     * marketing, attribution and targeted advertising.
     */
    thirdPartyMarketingAllowed(): boolean;
    userCanBeTracked(): any
    userDataCanBeSold(): any
    /**
     * @deprecated
     */
    setTrackingConsent(consent: boolean, callback?: (error?: any) => void): any;
    /**
     * Use `customerPrivacy.shouldShowBanner()`
     *
     * @deprecated
     */
    shouldShowGDPRBanner(): any;
  },
  /**
   * The second argument to loadFeatures is a callback that indicates that
   * the API has loaded. When invoked without an error, the API is globally
   * available at window.Shopify.customerPrivacy.
   */
  loadFeatures(
    params: Array<{
    name: LiteralUnion<'consent-tracking-api', string>,
    version: LiteralUnion<'0.1', string>
  }>, callback:(error: Error) => void): any
  /**
   * Two letter language code
   */
  locale: string
  /**
   * The `myshopify.com` store domain
   */
  shop: string
  modules: boolean
  /**
   * Theme Information
   */
  theme: {
    handle: string
    id: number
    name: string
    role: 'published' | 'unpublished'
    style: {
      id: number
      handle: string
    },
    theme_store_id: null | number
  }
}

interface BOOMR {
  /**
   * Timestamp, eg: `new Date().getTime()`
   */
  snippetStart: number;
  snippetExecuted: boolean;
  snippetVersion: number;
  /**
   * The application rederer, typically: `storefront-renderer`
   */
  application: string;
  /**
   * The name of the Theme
   */
  themeName: string;
  /**
   * The theme version
   */
  themeVersion: string;
  /**
   * Shop ID
   */
  shopId: number;
  /**
   * Theme ID
   */
  themeId: number;
  /**
   * Theme render region
   */
  renderRegion: string;
  /**
   * External scripting reference, typically:
   * `https://cdn.shopify.com/shopifycloud/boomerang/shopify-boomerang-1.0.0.min.js`
   */
  url: string;
}

interface ShopifyAnalytics {
  /**
   * Holds some references, not just `currency` - Seems to change between navigations.
   */
  meta: {
    currency: string;
  };
  /**
   * Related to Google Analytics, fuck knows what.
   */
  merchantGoogleAnalytics(): void
  /**
   * Seems to be what is used to publish to dashboard
   */
  lib: {
    /**
     * Likely an action reference, something like `Viewed Product Category`
     * as the first parameter and the 2nd being an object describing the action.
     */
    track(action: string, data: object): any;
    /**
     * Similar to `track`
     */
    page(action: string, data: object): any;
  }
}

declare global {

  interface WindowEventMap {
    /**
     * The Customer Privacy API publishes document events when
     * consent change. Use this listener to react to changes in consent over time.
     */
     'visitorConsentCollected': CustomEvent<{
        detail: {
          /**
           *  Permission to collect and process data for marketing,
           * attribution and targeted advertising from the merchant.
           */
          firstPartyMarketingAllowed: boolean;
          /**
           * Permission to collect and share data with third parties to
           * perform marketing, attribution and targeted advertising.
           */
          thirdPartyMarketingAllowed: boolean;
          /**
           * Permission to store information about how the storefront was used and
           * interactions made on the storefront.
           */
          analyticsAllowed: boolean;
          /**
           * Permission to remember preferences such as language, currency, size, e
           */
          preferencesAllowed: boolean;
        }
      }>;
    }
    /**
     * Shopify Theme Editor section select event
     */
    'shopify:section:select': CustomEvent<{
      detail: {
        sectionId: string;
      }
    }>;
    /**
     * Shopify Theme Editor section select event
     */
    'shopify:section:deselect': CustomEvent<{
      detail:{
        sectionId: string;
      }
    }>;
  }

  export interface Window {
    /**
     * Shopify BOOMR
     */
    BOOMR: BOOMR;
    /**
     * Shopify Analytics
     */
    ShopifyAnalytics: ShopifyAnalytics;
    /**
     * Shopify context
     */
    Shopify: Shopify;
  }

  /**
   * Shopify context
   */
  const Shopify: Window['Shopify'];
  /**
   * Shopify BOOMR
   */
  const BOOMR: Window['BOOMR'];
}

Also, shouldn't all the declare const at the end of the file have an export?

Is there really nothing official for that?

@panzi There's no official solution, AFAIK. There was a weak attempt within Horizon but it was flawed due to poor implementation by their "engineers", which is typical, but i digress...

Also, shouldn't all the declare const at the end of the file have an export?

I pulled this from my codebase a while back to help someone, didn't pay much attention to it. I’ve updated this gist with what I had locally. It should suffice and aligns with most of the current CFH slop they inject. The reason for const references is so that you can omit window prefix and just use Shopify - there is more events too, so feel free to add to that list.

I meant the export in addition to declare const. VSCode didn't want it as a global otherwise for me.

Anyway, thanks a lot for this gist!