Examples → PDP: Refresh

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.

        
var opts = {
  api: {
    total: 3,
    item_number: '426088032',
  },
  display: {
    cols: 3,
  },
}

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


// In this example we'll use jQuery to init widget on document.ready and set up
// triggers for refreshing the widget when the user selects a different color.

$(function(){

  // render the widget to its target div
  styliticsWidget1.load();

  $('.swatch').on('click', function(e){

    // Get the new item number to be passed to .refresh
    // In this simple example, it's stored in the id of the swatch
    // In practice, you need to get it from the appropriate place in your page
    // environment, whether stored in the DOM or some page-level state data source
    var id = $(this).attr('id');

    handleSwatchClick(id);  // source elided, not relevant to example

    //optional UI nicety to avoid other elements jumping during widget refresh
    var currentHeight = $('#target1').height();
    $('#target1').height(currentHeight);

    // refresh the stylitics widget with the new colorway id / item_number and
    // an optional onLoad callback function.  In this case we just return control
    // of the target div height to the browser and log the new outfits JSON to the
    // console.
    styliticsWidget1.refresh(id, function(outfits){
      console.log(outfits);
      $('#target1').height('auto');
      setTimeout(function() {$('#target1').height('auto')}, 250);  //return control of height to browser, with slight safety delay
    });

  })
}