Forcing the user to actually view the proof before checkout - xmpie-users/uStore-js GitHub Wiki

uStore has a feature which forces the customer to agree that they have viewed and approved the proof of the print product before they add the product to the cart.

In the uStore admin site, the settings are here:

Alt

And in uStore client side, you can see the settings here:

Alt

However, there is nothing preventing the customer from simply checking the box and adding it to the cart without actually clicking to view the proof.

This JavaScript prevents the user from adding the product to the cart if they not actually clicked the proof button AND checked the approval box.

<script type="text/javascript">
  $(document).ready(function(){
    (function ($) {
      var localStorage = window.localStorage;
      if (localStorage.getItem("proofViewed") === null)
        localStorage.setItem('proofViewed', 'false');
      $('#ctl00_cphMainContent_ctl09_tdProof').click(function() {
        localStorage.setItem('proofViewed', 'true');                       
      });
      $('#ctl00_cphMainContentFooter_WizardStepsNextPrev1_ButtonFinish').click(function() {
        let viewed = localStorage.getItem('proofViewed') == 'true';
        if(!viewed) {
          alert("Please click PROOF to view your card before proceeding.");
          return false;
        } else if ($("#ctl00_cphMainContent_ctl09_chkProofApproval").length > 0 
            && $("#ctl00_cphMainContent_ctl09_chkProofApproval").prop("checked") == true) {
              localStorage.setItem('proofViewed', 'false');
              return true;
        }
      });
    }(jQuery));
  });
</script>

Limitations

This script is tested with Dynamic products on uStore up to v13.2.

It is not designed to work with Static products on v13 or later. But then, it is not likely that you will need to force proofing of a static product.

When Dynamic products move to the new React SPA (Single Page Application) model, the current script will not work and need to be updated for the new uStore version.

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