3 Replies Latest reply on Dec 29, 2017 2:58 PM by Sanford Whiteman

    Munchkin Limitation from Seeing Entire Webpage?

    JD Nelson

      We had our web designer code our resource page so that it paginates as you scroll, loading pages 2+ when you reach the bottom of the page instead of forcing a click to view more. I'm noticing now that Munchkin isn't recognizing any clicks from those secondary 'pages' -- did I shoot myself in the foot, or might there be a way to call them out?

       

      https://www.spigit.com/resource/type/video/

      I'm most interested in the videos page, as noted above. Any ideas?

        • Re: Munchkin Limitation from Seeing Entire Webpage?
          Sanford Whiteman

          Yes, when you use an infinite scroll effect with lazy loading, Munchkin doesn't know about the links that are added after initialization (init()).

           

          Fix that by running this code once at the start (to mark off the initial set of natively-detected links) and then run it again every time there's a scroll event.

           

          function refreshMunchkinLinks(native) { 
           var arrayFrom = Function.prototype.call.bind(Array.prototype.slice); 
          
           var visitedAttr = ["data-munchkin-visited","true"],
           unvisitedLinks = document.querySelectorAll('A:not(['+ visitedAttr.join('=') + '])');
          
           arrayFrom(unvisitedLinks) 
           .forEach(function(link){ 
             link.setAttribute.apply(link,visitedAttr); 
          
             if (!native) { 
               link.addEventListener("click",function(e){ 
               var youTubeId = this.getAttribute('data-youtube-id'), 
                 loggedHref = youTubeId ? 'video/' + youTubeId : this.href; Munchkin. 
          
               munchkinFunction("clickLink", { href: loggedHref }); 
             }); 
            }
           }); 
          }
          

           

          So right after Munchkin.init(), run

           

          refreshMunchkinLinks(true);
          

           

          then also run

           

          refreshMunchkinLinks(false);
          

           

          inside an Infinite Scroll append listener. (I detest jQuery so that part of the code is up to your designer. )

          1 of 1 people found this helpful