Examples → PDP: Recommended Setup

Overview

In the following example, we will highlight recommended config settings for the PDP widget, as well as the following recommended additional best practices:

• Refreshing the widget content on user-initiated change of colorway.
• A jumplink to the widget which will only display if the widget will render on this page.

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)

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

    // Styles the cta: "border" (default), "underline", "plain"
    ctaThemeClass: "underline",

    // Positions the cta relative to collage: "bottom" (default), "top"
    ctaPosition: "bottom",


    // Item info layout. Defaults to "rows"
    itemInfoLayout: "columns",

    //no carousel on mobile; show in a vertical stack
    mobileVertical: true

  },
}

 //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(){

  function toggleJumplink(outfits){
    if (outfits.length > 2){
      $('#item-content').append("<a href='#target1' class='jumplink'>How to Wear It</a>");
    }
  }

  function onLoadCustom(outfits){
    toggleJumplink(outfits);
  }

  // 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
    });

  })