Basic Types → PDP Widget

Instructions

Require the widget script

 <script src="//widget.stylitics.com/v2/widget.js"></script> 

Set configuration options and initialize the widget once your target div is on the page.

(Note: the border in the above example is on the target div, just to show where it is. It is not rendered by the widget)

Responsive behavior can now be configured with responsive option as seen below

        
//optional fn to call instead of taking user to item PDPs on clicking an item's shop link
var onItemClick = function(colorwayId){
  console.log(colorwayId);
}

var opts = {
  api: {
    total: 3,

    //On PDPs, your tag manager or other PDP page code will need to dynamically set this value
    item_number: '389998022',

    //other optional API params
    //tags:'glam,preppy',
    //from_accounts: 'demo-men',
  },
  display: {
    cols: 3
    //alwaysRender: true, // default false - render widget even if there are less outfits than columns
    //carouselWrap: false,  // default true
    //outfitBg: "transparent",
    //maxNameChars: 20, //includes 3 chars for elipsis
    //excludePrimary: true // default false - exclude current PDP item from outfits' item lists
  },

  //Set responsive to null in order to make the carousel non responsive
  //responsive: null

  //Responsiveness can now also be configured by adding a responsive collection to opt, like this:
  //Example

  //responsive: [{
  //  breakpoint: 1024,
  //  settings: {
  //    slidesToShow: 3,
  //    slidesToScroll: 3,
  //    infinite: true,
  //    dots: true
  //  }
  //},
  //{
  //  breakpoint: 600,
  //  settings: {
  //    slidesToShow: 2,
  //    slidesToScroll: 2
  //  }
  //},
  //{
  //  breakpoint: 480,
  //  settings: {
  //    slidesToShow: 1,
  //    slidesToScroll: 1
  //  }
  //}]

}

/*
  Optional onLoad callback, which will be called with the array of outfit
  objects returned from the API.

  USE ONLOAD CALLBACK TO TRIGGER QUICK VIEW.

  You can use the id of each to find the div for that outfit, which will have
  a *class* of "stylitics-outfit-{outfit.id}"

  Each outfit has an array of items, and their item_ids can be used to find the item divs
  which will have a class of "stylitics-item-{item.item_id}". Note in this case the API's
  item object ids are `item_id`, not `id`
  */
function onLoadDemo(outfits){
  console.log(outfits);
  console.log(document.getElementsByClassName('stylitics-outfit-' + outfits[0].id)[0]);
  }

//constructor args:  client name, id of target div, config options
var styliticsWidget1 = new StyliticsWidget("demo", "target1", opts)

//initialize the widget
styliticsWidget1.load(onLoadDemo)

//Note: used at end of body tag in this example.  Use library of your choice to
//ensure widget loads after target div exists on page - the widget does not handle this.

//Refresh widget with new item
//styliticsWidget1.refresh(newItemNumber, onLoadDemo)