Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Official Shopify Documentation for window.Shopify object?

Official Shopify Documentation for window.Shopify object?

thomen
Tourist
5 0 5

Hi @Shopify 

 

I have not been able to find any official documentation on shopify.dev for the window.Shopify object?

 

I've done some initial tests with Shopify markets in developer preview to switch locale via url or subdomain and the locale is set correctly on window.Shopify.locale as expected in dev tools.

 

I've found random references around the place but nothing concrete.

 

I'd like to know it is fully supported and what properties are available before relying on it for production use.

 

I contacted Shopify Partner support and they found a question someone had posted on the community forum about using it but apart from that it's pretty scarce.

 

They suggested I ask a question here. The only other references have been other community members/partners asking the same thing.

 

Thanks!

Replies 2 (2)

reed-lu
Shopify Partner
7 0 2

+1, there is no  official reply yet 😞

I found there was a similar question long year ago, but not solved.

 

panoply
Shopify Partner
2 0 3

Unlikely you will get these in definitelyTyped. It's not fully complete but you informs on the most relevant references that you'd typically leverage. I've annotated the methods/props from which I have knowledge of but for the most part it's difficult without seeing the unobfuscated code.

In addition, I have typed with JSDocs annotation section schema, you can find that in the various projects I Open Source and maintain (search my name of github or see the vscode-liquid extension repo).

Lastly, you'll need to create a `global.d.ts` file and apply globalThis etc. 

Hope it helps.

 

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

export interface Shopify {
  PaymentButton: {
    init(): any
  }
  autoloadFeatures(param: any): any
  /**
   * Only show in Theme previews, it's a class instance, yuck.
   */
  PreviewBarInjector(options: {
    targetNode: HTMLElement;
    iframeRoot: string;
    iframeSrc: string;
    previewToken:string;
    themeStoreId:string;
    permanentDomain: string;
  }): {
    /**
     * 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(param1: any, param2: any, param3: 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
    setTrackingConsent(param1: any, param2: any): any
    shouldShowGDPRBanner(): any
    userCanBeTracked(): any
    userDataCanBeSold(): any
  },
  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
  }
}

export 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;
}

export interface ShopifyAnalytics {
  /**
   * Holds some references, not just `currency`
   * Seems to change between navigations.
   */
  meta: {
    currency: string;
  };
  /**
   * Related to Google Analytics, **bleep** 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 Window {
    BOOMR: BOOMR;
    ShopifyAnalytics: ShopifyAnalytics;
    Shopify: Shopify;
  }
}

/**
 * The Shopify window object
 */
declare const Shopify: Window['Shopify'];

/**
 * The Shopify Analytics window object
 */
declare const ShopifyAnalytics: Window['ShopifyAnalytics'];

/**
 * The BOOMR window object
 */
declare const BOOMR: Window['BOOMR'];