Class: StyliticsClassicWidget

let widgetInstance = new StyliticsClassicWidget("account-name", "stylitics-widget-container", {
  api: {
    item_number: "1234567",
    // other optional API Params
    // tags: "glam,preppy",
    // from_accounts: "demo-men",
    min: 3,
    max: 6,
  },
  display: {
    disableMnM: true,
  }
  // optional config to change default text labels
  // text: {
    // viewDetailsCTA: "Shop Now",
    // itemLinkCTA: "SHOP THIS",
    // example of locale-based text override:
    // itemDetailsModalHeader: {
      // "fr-CA": "Liste de produits"
    // }
  // },

  // IMPORTANT information about the following responsive breakpoints param:
  // These breakpoints are NOT based on viewport width but rather the width of the widget container.
  // Only uncomment this section of the config if you plan to change the responsive breakpoint defaults, otherwise you can remove this section.
  // responsive: [
  //   [0,    { columns: 1 }],
  //   [640,  { columns: 2 }],
  //   [1024, { columns: 3 }],
  //   [1280, { columns: 4 }],
  //   [1536, { columns: 5 }],
  // ]
})
// put calls to widgetInstance.on(...), widgetInstance.override(...) etc. here
widgetInstance.start()

Methods

destroy()

Source:

• classic.js, line 146

doNotTrack()

Source:

• classic.js, line 220

on(action, subject, f)

Parameters:

Source:

• classic.js, line 308

Example

// Valid action/subject pairs:
// "click", "bundle"
// "click", "item"
// "view", "bundle"
// "view", "item"
// "swap", "item"
// "mount", "item"
// "mount", "bundle"
// "mount", "bundles"
// "mount", "replacement"
// "mount", "replacements"
// "load", "widget" // Deprecated, use "mount", "bundles" instead
// "load", "replacements" // Deprecated, use "mount", "replacements" instead

widgetInstance.on("click", "item", function (data) {
  console.log("user clicked item:", data)
});

widgetInstance.on("mount", "bundles", function(data) {
  console.log("bundles response:", data.bundles)
});

*  // Important details regarding Stylitics callbacks
     // All stylitics callbacks must be placed in your code before the .start() method is called.

     // To avoid unexpected behavior, do not use multiple instances of the same action-subject pair. For example, you can not have multiple instances of .on("mount", "bundles",) in the code. You can, however, place multiple actions underneath one callback.
     // For example, if you need multiple actions to occur when the widget loads, such as showing the widget title, the jumplink, and checking for any Shop the Model bundles. You can nest all those actions underneath one .on("mount", "bundles",) callback.
     widgetInstance.on("mount", "bundles", function (data) {
        //Checking if outfits are returned and unhiding title and jumplink if so
        if (data.bundles && data.bundles.length) {
           let jumplinkElement = document.getElementById("stylitics-jumplink");
           let titleElement = document.getElementById("widget-title");
           // unhide jumplink after widget has loaded
           jumplinkElement.style.visibility = "visible";
           // unhide widget title after widget has loaded
            titleElement.style.visibility = "visible";

        // Checking for bundles that should be tagged shop the model and applying the badge
        let bundle = data.bundle;
        let element = data.element;
        // add if statement to make sure badge is added to the correct bundles
        if (bundle["on-model-image"]) {
          //create image element
          let badge = document.createElement("img");
          // add relative path to the img
          badge.setAttribute("src", "../img/shop_the_look.jpg");
          //append img to the "stylitics-bundle-badge" div
          element.querySelector(".stylitics-bundle-badge").appendChild(badge);
    }
  });

// All callback methods must be added before the .start() method
widgetInstance.start();

override(action, subject, f)

Parameters:

Source:

• classic.js, line 323

Example

widgetInstance.override("click", "item", function ({ item, bundle }) {
  openQuickView(item);
})

refresh()

Source:

• classic.js, line 138

Example

let newItemNumber = "426088032";
widgetInstance.refresh({ api: { item_number: newItemNumber } });

start()

Source:

• classic.js, line 127

Example

widgetInstance.start();

trackAddItemToCart(event, priceopt)

Parameters:

Deprecated:

• The second way is to provide the item id as the first argument and an optional price as the second argument.

Source:

• classic.js, line 195

Example

// recommended
widgetInstance.trackAddItemToCart({ itemId: "a1b2c3" })
widgetInstance.trackAddItemToCart({ itemId: "a1b2c3", price: 29.99 })
widgetInstance.trackAddItemToCart({ itemId: "a1b2c3", price: 29.99, uiComponent: "pdp" })

// deprecated
widgetInstance.trackAddItemToCart("a1b2c3");
widgetInstance.trackAddItemToCart("a1b2c3", 29.99);

trackClickItem(remoteId)

Parameters:

Source:

• classic.js, line 204

Example

widgetInstance.trackClickItem("13093805");

trackClickJumpLink()

Source:

• classic.js, line 165

trackViewItem(remoteId)

Parameters:

Source:

• classic.js, line 213

Example

widgetInstance.trackViewItem("13093805");

(static) info()

Source:

• classic.js, line 333

Example

StyliticsClassicWidget.info()