Automatically refresh preview of dynamic product v2 - xmpie-users/uStore-js GitHub Wiki

uStore provides a link for customers to click to get a preview dynamic products with their customizations.

Alt

Sometimes a customer would prefer that the preview is created automatically rather than manually.

This JavaScript automatically updates the preview 4 seconds after the user stops making changes to text input customization dials:

<script type="text/javascript">
$("document").ready(function() {
  // only if there is a link to "update thumbnail" on the page
  if ($("#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails").length > 0)
  { 
    //set form input tags keyup event to refresh the preview after 4 second delay
    $("input").keyup(function() {
      wait(
        function(){
          if ($("#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails").length > 0) {
            document.location.href = $("#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails").attr("href"); 
          }
        },
        4000); //4000ms = 4 seconds
    });
    //set form input tags onchange event to refresh the preview after 4 second delay
    $(".Duc[dialid] [tabindex]").change(function() {
      wait(
        function(){
          if ($("#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails").length > 0) {
            document.location.href = $("#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails").attr("href"); 
          }
        },
        4000); //4000ms = 4 seconds
    });
  }
});
//this is a helper function used to delay the callback for x milliseconds.
var wait = function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  }  
}();
</script>

The v1 refresh example will force uProduce to create a new proof every time the user changes from one field to the next. While this script attempts to be more efficient and only requests the proof after the user stops making changes to text customization dials. This means that the user could type firstname and lastname dial values and only after 4 seconds of no interaction, the proof will then be requested. Therefore, there is less load on uProduce and the performance is improved.

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

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