0

I want to insert a JavaScript snippet in a Magento .phtml template file. Please, refer to the following question to review the JS snippet - it is the snippet of the chosen best answer:

$(function() {
var menu = $('#fixedbtn');
function isInViewport($this) {
   var elementTop = $this.offset().top;
   var elementBottom = elementTop + $this.outerHeight();
   var viewportTop = $(window).scrollTop();
   var viewportBottom = viewportTop + $(window).height();
if(elementTop < viewportBottom ==true){
    menu.addClass('fixedPosition');
}else { 
    menu.removeClass('fixedPosition');
 }
}
$(window).scroll(function() {
isInViewport($('#footer-1'))
});
});

Now, this code works perfectly in a standard HTML file on a non-server environment. However, when I tried to implement it in a Magento website, it just doesn't work. I tried including it in my app.js, then tried placing it on the page itself between script tags. I tried replacing the $ with jQuery, alas, nothing seems to work.

How can I implement this JavaScript code in Magento template file? Could you please guide me in how I need to format the code, so that it works in Magento (2.1.8)?

Follow up:

Alright, at this point I'm quite unsure why the above code will not work as inline script on Magento .phtml template file. I've used JavaScript in this Magento set-up before, both in app.js and also as inline script all working fine. Here, for example, I have the following JS code snippet in copyright.phtml working just fine:

<script type="text/javascript">
jQuery(function() {
    jQuery(window).scroll(function() {
    if(jQuery(this).scrollTop() > 800) {
        jQuery('#back-top').fadeIn(); 
        jQuery('#back-top').style.display = "block";  
    } else {
        jQuery('#back-top').fadeOut();
        jQuery('#back-top').style.display = "none";
    }
});
   jQuery('#back-top').click(function() {
    jQuery('body,html').animate({scrollTop:0},500);
});   
});
</script>

I also added the following script inline:

<script type="text/javascript">
require(['jquery','domReady!'], function($){
console.log('hello world');
})
</script>

And "hello world" comes out as output in console upon page reload = so no problem with caches or script parsing. I place the desired JavaScript code within

<script type="text/javascript">
require(['jquery','domReady!'], function($){
..desired code snippet here.....
})
</script>

Reload page, and... it does not work. Odd? Any idea why?

1

Try to cover it with:

<script>
    require([
        'jquery',
        'jqueryui'
    ], function ($) {

   ... Your code ...

    });
</script>

That's how to place script inside .phtml. Another option to include it with requirejs. Google it.

  • Wrapping the code snippet in the suggested format does not work either. – Iveta Allogenes Sep 5 '17 at 12:33
  • @IvetaAllogenes this should work, did you clear all caches? – Ben Crook Sep 5 '17 at 14:55
  • Yes, I did clear css/js cache, flushed cache. Still no success. I placed the code in copyright.phtml, so that it will load at the footer. I also removed the 'jqueryui' from the require statements, as I don't need it in this case, correct? And I was getting error message for it in the console, not being found. When I view page source, I can see that the script shows up at the bottom of the page = no old cache issue, correct? – Iveta Allogenes Sep 5 '17 at 15:17
  • 1
    Did you tried to replace "JQuery" with $ ? – Obscuro Sep 6 '17 at 7:05
  • I have found that using jQuery instead of $ makes the difference between working and not working for JS scripts in Magento 2. If you don't use RequireJS that is.. – Iveta Allogenes Nov 16 '17 at 8:55
1

The solution: replace

$(window).scroll(function() {

with

window.addEventListener("scroll", function() {

and make sure all your JavaScript code, whether inline or in a custom app.js file is wrapped in

jQuery(document).ready(function($) {
.....your code here....
});

Of course, you can also use require_config.js, as per Magento 2 recommendations. That way is tidier, I guess, but harder for newbies.

Also, since adding event listener on the scroll event creates a ton of scroll events, as can be seen in browser web inspector tools >> console logs, we can use additional scripts like lodash.js to reduce server load, if this turns out to be a concern.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.