The easiest method to debug a PDP Widget Implementation implementation is via Chrome’s DevTools, specifically by checking the Console for any error messages, inspecting the network activity for the loading of the JS script and the Complete the Look API call, and checking the DOM for the module’s target DOM container with an ID of findmine-app-container.

Debugging Steps

The PDP Widget Implementation Guide details the requirements for a successful implementation. Below is a step-by-step process to make sure the JS is loading correctly and rendering in the correct spot.

1. The client-specific JS is loaded onto the page
   • This will appear in the Network tab; search for findmine within the Network tab and see if a <app-id>.module.js request is present.
   • It’s usually at the top of the Network activity as it’s the first step in the implementation
2. The target DOM container is on the page
   • This will appear in the page’s HTML, as known as the DOM (Document Object Model); simply search the HTML in DevTools for findmine to find the findmine-app-container.
   • If it is not present, there will be an error message in the console that reads Uncaught Error: Minified React error #200; this can also indicate a timing issue (see Common Issues, below)
3. The Complete the Look API call is triggered via window.FindMine.match({/* params */})
   • This will also appear in the Network tab as an API request to complete-the-look followed by a variety of query parameters
   • If this is missing, it means that the window.FindMine.match({/* params */}) call is either not being triggered by the client, or there’s a timing issue
   • The most difficult step to debug is the window.FindMine.match({/* params */}) call
4. The module is rendering
   • Once all of the above steps are happening correctly, the module should render on the page
   • However, it is possible that everything is correct, but the module will not render if the Complete the Look API does not return any looks, or an item’s product ID and color ID are being passed in the window.FindMine.match({/* params */}) call that does not exist in the FM system

Common Issues

• Implementation appears correct, but the module is not rendering
  1. Check the Network tab for the complete-the-look API call; click on the Response header in the right panel, and read through it. There will usually be an error with a reason value that specifies what is happening: No match looks, invalid item, etc.
     • Try a different PDP or passing different product parameters if this is the case
  2. If the complete-the-look API is successfully made and returning looks, but the module is still not rendering, check the parameters
     • Many modules now require a return_pdp_item: true parameter that, if missing, will mean the module does not render
     • Some modules only render if n number of looks are returned
• Implementation appears correct, but an Uncaught Error: Minified React error #200 is printed to the console (a timing issue)

  1. Ensure that you have implemented the module using a MutationObserver. Doing so almost guarantees that all the prerequisites required for the FindMine Widget to load on the page exist and are ready. The MutationObserver listens for the existence of the target DOM container with specified findmine-app-container ID in the page’s HTML. Without this container, the FindMine Widget JavaScript will fail to attach to the page and cause the Uncaught Error: Minified React error #200. Implementations using the MutationObserver will not run into this issue:

     <script>
       function loadFindMine() {
         var script = document.createElement('script');
         script.onload = function () {
           // Add any custom scripts to construct parameters object here
           
           // window.FindMine.match call belongs here
           window.FindMine.match({
             application: '<Application-ID>',
             product_id: '<Product-ID>',           
             product_color_id: '<Product-Color-ID>',
             product_in_stock: true,
             return_pdp_item: true,
           });
         };
         
     		// Loads client-specific FindMine Widget JS onto your PDP
         script.src = '//js.findmine.com/<Application-ID>.module.js';
         document.head.appendChild(script);    
       }
     
       function waitForTargetContainer(params, callback) {
           var observer;
           observer = new MutationObserver(mutations => {
               var target = document.getElementById(params.id);
               if (target) {
                   observer.disconnect();
                   callback(target);
               }
           });
           observer.observe(document, {
               subtree: !!params.recursive,
               childList: true,
           });
       }
     
     	// Dynamic mount point integration listens for the existence of the
     	// target DOM container w/ specified ID
       if (!document.querySelector('#findmine-app-container')) {
         waitForTargetContainer({
               id: 'findmine-app-container',
               recursive: true,
           }, target => {
     		      // Target DOM container exists; load the widget
               loadFindMine();
           });
       } else {
         // Mount point detected (target DOM container exists); load the widget
         loadFindMine();
       }  
     </script>
     

     Double check that the target DOM container ID is correct in your implementation.

Contact Us

If you have attempted all of these steps and continue experiencing issues with your implementation, please contact your Customer Experience Manager and we will be happy to provide additional guidance.