Examples → PDP: Jumplinks

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 add a jumplink to the main product image
// and do some customization via the onLoad callback

// Code for the refresh on color change is elided and can be found on the
// "PDP - Refresh" demo page linked in the sidebar.

//////////////////


// Before defining our onLoad callback fn, we'll make a few small functions for
// the specific customizations we want to do, just for clarity's sake.

// We want to change the CTA text from "Shop" to "Shop Now"
function updateCTAs(){
  $('.stylitics-widget-item-cta .stylitics-widget-item-link').text('Shop Now');
}

// We want to make the links open in the same tab on desktop, instead of new.
function forceSameTabLinks(){
  $('.stylitics-widget-item-link').removeAttr('target');
}

// We want to make the entire item rows clickable
// Note: this means our above function regarding the link target attrs is not
// necessary, so we'll not include it in our final onLoad callback fn

function makeItemRowsClickable(outfits){
  $('.stylitics-widget-item-container').on('click', function(e){
    let itemRemoteId = parseInt($(this).attr('data-item-remote-id'));
    let itemLinksByRemoteId = {};
    for(o of outfits){
      for(i of o.items){
        itemLinksByRemoteId[i.remote_id] = i.affiliate_link; //building this index better done up front...
      }
    }
    window.location = itemLinksByRemoteId[itemRemoteId];
  });
}

// We want to show a jumplink on the main PDP image only if there are enough
// outfits such that the widget will be shown on this page.

function toggleJumplink(outfits){
  if (outfits.length > 2){
    $('#item-content').append("How to Wear It");
    // please note this is a string for an a-tag with class 'jumplink', it's just displaying weird here
  }
}

// Finally, this will be the function we pass to .load() which will be called with the

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


$(function(){

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

  //set up refresh (swatch-related code elided)
  styliticsWidget1.refresh(id, function(outfits){
    onLoadCustom(outfits);
    $('#target1').height('auto');
  });


})