1

I am trying to add some custom javascript to my magento shop but keep getting errors like: Uncaught TypeError: Cannot read property 'on' of null. Which makes me think that maybe my file is loaded before jquery is present, or before other important files are loaded.

The way I added my js:

In app/design/frontend/rwd/brezza/layout/local.xml I added the following line:

<action method="addJs"><script>footerblocks.js</script></action>

Then in my root js folder, I added footerblocks.js which is loaded with the following content:

$('.feature-box').on('mouseover', function (event) {
    $('.feature-box').css('height', '1000px');
});

console.log('test');

var Now = new Date();
var CurrentDay = Now.getDay();
// opening time - 24 hours so 9:30am is 9, 30
var OpeningTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 11, 36);
// closing time - 24 hours so 5:30pm is 17, 30
var ClosingTime = new Date(Now.getFullYear(), Now.getMonth(), Now.getDate(), 17, 30);
var Open = (Now.getTime() > OpeningTime.getTime() && Now.getTime() < ClosingTime.getTime())
// days 0.sun 1.mon 2.tues 3.wed 4.thur 5.fri 6.sat
// CurrentDay !== 0 && the # is the day to eclude, so if I want to be closed on Sat6, Sun0, Wed3
// CurrentDay !== 6 && CurrentDay !== 0 && CurrentDay !== 3 && Open
if (CurrentDay !== 0 && CurrentDay !== 6 && Open) {
    $('.openstatus').toggle();
}

It already gives an error before it reaches the console log.

What can be causing this? And is this the correct way to add custom JS to a magento installation?

In my footer.phtml there is the following div:

<div class="feature-box first"><span class="fa fa-truck">&nbsp;</span>
    <div class="content">
        <h3>GRATIS VERZENDEN VANAF €50</h3>
        <div class="hours openstatus">We zijn bereikbaar</div>
        <div class="closed openstatus">We zijn gesloten</div>
    </div>
 </div>

Addional note:

When I remove the first part of my code the error changes into: Uncaught TypeError: Cannot read property 'toggle' of null.

So toggle and on (two jquery functions if I'm correct) are not working as they should.

  • Make sure the is an element with class feature-box. – sv3n Jun 29 '17 at 9:44
  • @sv3n There is an element with that class, I added it in my question. – twan Jun 29 '17 at 9:47
1

I have checked with added that script in my footer.phtml with using $j instead of $ in script its working.

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.