Show page preview based on customization step - xmpie-users/uStore-js GitHub Wiki

The uStore customization setup allows you to define the customization of dynamic products across multiple steps.

In the case of larger documents, it is possible that each customization step could relate to a specific page.

For example, customization step 1, could have all customization values for page 1; customization step 2, could have all customization values for page 2; and so on...

In this case, it might be nice to move the thumbnail preview to the relevant page based on the current customization step.

This JavaScript shows how this can be achieved:

<script type="text/javascript">
$(document).ready(function() {
  if (document.location.href.indexOf("Customization.aspx") > -1) { //this line will select to change thumbnail on every product in the store
  //  if (document.title.indexOf("My business card") > -1) { //alternatively, this line will select to change thumbnail only on the product called "My business card"
    var steps = xmp.uStore.storeFrontParams.customizationStepIDs,
    currentStepId = $(".Duc").attr("stepid"),
    currentStepNumber = -1;

    for (var i=0; i<steps.length; ++i) {
      if (steps[i] == currentStepId) {
        currentStepNumber = i;
        break;
      }
    }
    jump2Thumb(currentStepNumber);
  }
});

function jump2Thumb(iThumb) {
  for (var i=0; i<iThumb; ++i)
  {
    setTimeout(function() {
      var test = $('#ctl00_cphMainContent_ucDialCustomization_SlideShow_btnNext');
      test.click();
    }, 400);
  }
}
</script>

For information on how to add JavaScript to your store: How to add JavaScript to a storefront.

⚠️ **GitHub.com Fallback** ⚠️