Automatically refresh preview of dynamic product v1 - 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 to be created whenever a customization dial loses focus:

<script type="text/javascript">
  var refreshURL;
  $(document).ready(function(){
    if (window.location.href.indexOf("Customization") > 1 ) {
      refreshURL = $("[nowaitingdiv]").attr("href");
      $(".Duc[dialid] [tabindex]").change(function(){
        if (refreshURL.length > 0)
          window.location.href=refreshURL;
      });
    }
  });
</script>

The following modified script has been tested on uStore NG theme v12.1 and handles both text field and Gallery Gridview Dial controls:

<script type="text/javascript">
  $(document).ready(function(){
    if (window.location.href.indexOf("Customization") > 1 ) {
      $(".Duc[dialid] [tabindex]").change(function(){
          $('#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails').click();
      });
      $(".FieldOptionItem").click(function(){
          $('#ctl00_cphMainContent_ucDialCustomization_btnUpdateThumbnails').click();
      });
    }
  });
</script>

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

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