Initialization Options - ecellar/remote-widgets GitHub Wiki

The eCellar Designer Widgets require a set of options when initializing the SPA in your site. Options are all contained in a variable named epubOptions in the global namespace.

There is one required option, one recommended option and many other options that can be used.

This is a UUID string used to authorize API calls for a specific brand.

Example:

APIKey: '8D0F7483-25BA-43B7-87BB-82815FC1ADDC'

Used to dynamically create deep links in rendered markup and the browser address bar. This should point to the location of the SPA. For example, https://ecellar-rw.squarespace.com/store/?view=account the pathRoot for this page is /store/ and the pathRoot for this page https://ecellar1.dream.press/rw/categories/Wine/ is /rw/. When using query string mode be sure to include the page name if it’s not a “default document” like index.php.

Example:

pathRoot: '/spa/'

Default: /

Example:

'v1'

Default: '', directs the SPA to append this value to the query string when loading html templates. Set this to a unique value after deploying changes to custom html templates so that returning visitors download the new templates instead of using older cached versions.

Example:

false

Default: true, directs the SPA to operate in Query String mode. Directs the SPA, on initial page load, to determine which view and view request data to display from the query string of the browser address bar.

Example:

true

Default: false, directs the SPA to operate in URL Rewrite mode. Forces initQueryString to false. Directs the SPA, on initial page load, to determine which view and view request data to display from the path of the browser address bar. This requires pathRoot to be set correctly.

Example:

'categories'

No Default, directs the SPA to load a specific view if one was not parsed from query string or path data.

Example:

{slug: 'Current Releases'}

No Default, data to be passed to the initView when called.

Example:

false

Default: true, directs the SPA to update the browser history state (including address bar). This enables browser forward/back navigation within the SPA, without actually refreshing the browser page.

Example:

false

Default: true, directs the SPA to use the history.back when there are no views to display.

Example:

['es','fr','de','il']

No Default, directs the SPA to load specified locale data for localization. English (‘en’) is automatically loaded. See epub.API.getSupportedLocales() for the full list of supported locales.

Example:

'fr'

Default: 'en', directs the SPA to set localization to the specified locale on start up. The specified locale must be listed in addLocales.

Example using a url for a JSON file:

['https://<www.yoursite.com>/files/custom-messages.json']

Example using a javascript object:

[
  {
    "en": {
      "epub": {
        "account": {
          "Dashboard": {
            "Summary": "Welcome!  Please select from the options below."
          },
          "EditProfile": {
            "BirthDateTip": "Your birth date",
            "PreferencesTip": "Change your preferences"
          }
        },
        "cart": {
          "GeneralCart": {
            "Summary": "Your shopping cart currently contains:"
          }
        },
        "signup": {
          "CreateCustomerThankYou": {
            "ThankYouHTML": "<p>Thank you. Your new account has been created.</p>"
          }
        }
      }
    }
  }
]

No Default, directs the SPA to load custom message strings from URL or javascript object(s).

Example:

[
  {
    "cart": {
      "en": {
        "MiniCart": {
          "url": "https://<www.yoursite.com>/files/MiniCart__FontAwesome.html"
        }
      }
    }
   }
]

No Default, directs the SPA to use locale-specific custom html template(s).

Example:

{
  "categories": {alias: 'regions', forcePageLoad: 'all', pathRoot: '/shopping/'},
  "products": {forcePageLoad: 'viewChange', pathRoot:'/shopping/'},
  "account": {alias: 'home', forcePageLoad: 'viewChange', pathRoot:'/profile/'}
}

No Default, directs the SPA to use custom words in place of the default view names. Directs the SPA to force browser page loads with different pathRoot values. This enables a site to deploy multiple different SPA implementations and have them link together with browser page reloads.

Example:

{
  ga4gtag: true,
  ga4gtm: true,
  fbq: true
}

Defaults to false for all, directs the SPA to provide advanced consumer behavior statistics to Google Analytics 4 and/or Facebook Pixel. You should use only 1 type of Google Analytics integration. There are additional setup steps to take within Google Analytics and Google Tag Manager. Read about them here: Reporting Analytical Statistics.

Example:

{
  LoginState: function ( loginState ) { console.log('got login state: ', loginState); },
  CustomerAccount: function ( customerAccount ) { console.log('got customer account: ', customerAccount); },
  ViewChange: function ( viewData ) { console.log('got view change: ', viewData); }
}

ViewChange notifications contain the following:

{
  view: 'view.identifier'
}

LoginState notifications contain the following:

{
  isAuthenticated: false,
  stateChangedTime: 1702928307212,
  stateInitTime: 1702928307212
}

CustomerAccount notifications will be an empty object when consumer is not yet authenticated. An authenticated consumer profile contains the following:

{
  first_name: "Customer",
  last_name: "Name",
  has_allocation_event: true,
  has_club_remixes: true,
  has_subscriptions: true,
  has_declined_orders: true,
  has_orders: true
}

Example:

true

Default: false, directs the SPA to ignore settings in the API definition and expire all DAL cache after 2 seconds. This is useful when trying to view changes from the Admin Control Panel in real-time. Do NOT use in production.

Example:

'/wp-content/uploads/2018/08/'

No Default, directs the SPA to replace the path to eCellar html templates. This requires replicating EVERY default template file in the new location using the same folder structure and file names.

Example:

'/wp-content/uploads/2018/08/'

No Default, directs the SPA to load localization data (CLDR) from another source.