Mix & Match → Widget + Modal

Instructions

Add mix & match modal styles

        #widget { position: absolute; top: 0; left: 0; width: 100vw;} 
      

        <link rel="stylesheet" type="text/css" href="//widget.stylitics.com/mnm-modal/css/style.css"> 
      

Require the PDP outfits widget script

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

Require the mix & match widget script

        <script src="//widget.stylitics.com/mnm-modal/js/main.js"></script> 
      

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

        //MnM instance - 'widget' refers to target div of MnM modal
var mnm = new TapToSwap('widget');

//optional onload callback
mnm.onload = function(outfits){
  console.log(outfits)
}


//optional onswap callback
mnm.onswap = function(swap){
  console.log(swap.newItem);
  console.log(swap.updatedOutfit);
}

mnm.initMultipleInstance({
  username: 'demo',
});


//outfits widget settings
var opts = {
  api: {
    total: 3,
    with_item_coords: true,
    item_number: '389998022',
  },
  display: {
    carouselWrap: false,
    cols: 3,
    mobileArrows: true
  },
  onOutfitClick: function(outfit){
    //no-op -- to be overwritten -- but must be present
    return true
  }
}


var styliticsWidget1 = new StyliticsWidget("demo", "target1", opts)


//MnM settings
var searchParams = new URLSearchParams(window.location.search);
var settings = {
  hideBrandSwapModal: true,
  hideBrandItemList: true,
  outfitsWidgetInstance: styliticsWidget1
  locale: searchParams.has("locale") ? searchParams.get("locale") : "us-en"
};

styliticsWidget1.opts.onOutfitClick = function(outfit){
    mnm.init(settings, outfit)
}

styliticsWidget1.load();