Magento theme displays errors and responsive display after refresh

[claudia_mvh]

We have a Magento webshop (1.9.3.2) with Ultimo theme, which appears to have some strange problem in a few browsers - we've discovered it's only on Chrome and Opera so far. When you first watch the website (https://www.tuinkussengigant.nl) in Chrome, it displays correctly with no JS errors. When you refresh the page, the website changes to some weird responsive mobile view and suddenly JS errors show up too.

We've looked at the page resource of both versions (the correct one and the weird responsive view), but both of them are exactly the same. We have no idea where to look for what's wrong.

The only thing we could already find, was the JS noconflict thing, but that's already in one of the included .js files Magento minified, so that's not the case either.

Can somebody please push us into the right direction of where to look on how to solve this problem? Has it something to do with the async of the js file, since it's only after a refresh and not when the page is first loaded with CTRL+F5 for example?

Thanks in advance.

[dimamagento]

It seems it is the wrong sequence of javascript files.
You need to add files in the next order:
1. prototype.js
2. jquery-x.x.x.min.js
3. noconflict.js

4. ....

You need to open page.xml (layout) file and check javascript files order.

In my case, I have the next code

<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script></action>
...

Best regards, Dima.

If my answer was helpful, please Click Kudos & Accept as Solution. Thank you

[claudia_mvh]

Hi,

Thank you very much for your reply. I tried a few things, but so far didn't help. We have the following files there (page.xml - in base/default. Can you help us with the right order? 

<action method="addJs"><script>prototype/prototype.js</script><params>defer</params></action>  
<action method="addJs"><script>prototype/prototype.js</script><params>async</params></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>

In theme specific file (local.xml - in ultimo/default) we have the following code:

<action method="addJs"><script>infortis/jquery/jquery.min.js</script></action>
<action method="addJs"><script>infortis/jquery/jquery-noconflict.js</script></action>
<action method="addJs"><script>infortis/jquery/jquery-ui.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/modernizr.custom.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/matchMedia.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/matchMedia.addListener.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/enquire.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.easing.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.tabs.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.accordion.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/jquery.owlcarousel.min.js</script></action>
<action method="addJs"><script>infortis/jquery/plugins/imagesloaded.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/smartheader.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/stickyheader.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>

<!-- Script killer: remove previous version of jQuery to prevent jQuery conflicts -->
<action method="removeItem"><type>js</type><name>infortis/jquery/jquery-1.7.2.min.js</name><params/></action>

Thanks in advance.

[dimamagento]

Let's try to turn off js merge (System=>Configuration=>Advanced=>Developer), and clear Magento cache.

Maybe, there are problems in merged files. 

[dimamagento · Accepted solution]

I think, that file validation.js load faster then prototype. Because validation.js  is in the cache. Please. Try to remove the async parameter. Cleare Magento Cache. And try again. 

[claudia_mvh]

Thank you very much for your very quick and good help!

[dimamagento]

Thank you ) Have a nice day