Jump to content

Disabling debug mode changes site lay out


SnapChatScore

Recommended Posts

  • 3 weeks later...
  • 2 weeks later...
1 hour ago, tomerg3 said:

Did you check the browser console for any JS errors?

Are you using a module for the display that's breaking, if so, did you ask the module creator?

It gives me these 2 error in the console (Only when debug mode is disabled:

Uncaught ReferenceError: $ is not defined
    at HTMLDocument.<anonymous> ((index):90)
(index):668 Uncaught ReferenceError: GoogleAnalyticEnhancedECommerce is not defined
    at HTMLDocument.<anonymous> ((index):668)

 

14 minutes ago, Klemart3D said:

Have you tried to disable all overrides and disable all non natives modules?

Yes I tried enabling both "Disable non PrestaShop modules" which didn't work and "Disable all overrides" which also had no effect.

Link to comment
Share on other sites

"$ is not defined" means that you are trying to use jQuery command before the jQuery Javascript file was loaded.

This is the code I suspect is causing the issue

<code>

document.addEventListener("DOMContentLoaded", function(event) {

$('.ajax_add_to_cart_button, .add-to-cart').click(function(){

fbq('track', 'AddToCart');

});

});

</code>

First try to disable it (it's adding Facebook tracking for add to cart) and see if it helps.

If it does, you need to move that code in the page to be after the .js files are loaded.

Link to comment
Share on other sites

9 hours ago, Klemart3D said:

"$ is not defined" seems a javascript/jquery issue. Which module having this variable are you using "GoogleAnalyticEnhancedECommerce"?

The default google analytics addon from prestashop, disabling the module made the error disappear. It didn't fix the layout bug.

8 hours ago, tomerg3 said:

"$ is not defined" means that you are trying to use jQuery command before the jQuery Javascript file was loaded.

This is the code I suspect is causing the issue

<code>

document.addEventListener("DOMContentLoaded", function(event) {

$('.ajax_add_to_cart_button, .add-to-cart').click(function(){

fbq('track', 'AddToCart');

});

});

</code>

First try to disable it (it's adding Facebook tracking for add to cart) and see if it helps.

If it does, you need to move that code in the page to be after the .js files are loaded.

Thanks I found the code and fixed it. It hasn't solved the layout problem either sadly.

Now there is no more errors in console but the layout still changes after disabling debug mode.

Link to comment
Share on other sites

Very strange, I never encountered this problem^^ The best (but not easy way) would be to compare the DOM of your two layouts and compare them to see where is difference. It can be a missing CSS/JS file or instruction that break the layout when debug mode is disabled.

Link to comment
Share on other sites

1 hour ago, Klemart3D said:

Very strange, I never encountered this problem^^ The best (but not easy way) would be to compare the DOM of your two layouts and compare them to see where is difference. It can be a missing CSS/JS file or instruction that break the layout when debug mode is disabled.

Is that possible with these 2 files?

13 hours ago, SnapChatScore said:

This is the page source with debug disabled (Bugged):
https://pastebin.com/bTKGUr9Q

This is the page source with debug enabled (Not bugged:
https://pastebin.com/Es4akW77

 

Link to comment
Share on other sites

I used Meld to compare your two files, I attach here a copy.  All lines beginning by "<!--" are deleted because they hare comments that are deleted when debug mode is disabled, so it's normal. The last 2 blue lines pointing a different number id for footer_sub_menu but it's normal because this number is random for each page call. So problem didn't come from your HTML DOM but from an asset file like JS or CSS. I think to a problem of compilation but it's hard to debug without warning messages.

493318529_Capturedcrande2020-02-2814-06-07.thumb.png.6a97d60de22507e70d631c90f47ea497.png

Link to comment
Share on other sites

On 2/28/2020 at 2:20 PM, Klemart3D said:

I used Meld to compare your two files, I attach here a copy.  All lines beginning by "<!--" are deleted because they hare comments that are deleted when debug mode is disabled, so it's normal. The last 2 blue lines pointing a different number id for footer_sub_menu but it's normal because this number is random for each page call. So problem didn't come from your HTML DOM but from an asset file like JS or CSS. I think to a problem of compilation but it's hard to debug without warning messages.

493318529_Capturedcrande2020-02-2814-06-07.thumb.png.6a97d60de22507e70d631c90f47ea497.png

Hmm what do you think the next good step is? 
 

 

On 2/28/2020 at 1:04 PM, JBW said:

Try to hard delete the cache by renaming /var/cache to /var/cache_old (can be deleted afterwards if successful as cache get re-generated automatically)

No success :(

Link to comment
Share on other sites

11 hours ago, Klemart3D said:

At your place, I will inspect source code (with your browser dev tool) to check which CSS rule (and from which file) is different between two websites versions. It can be a little fastidious if you are not front developer.

I tried comparing the 4 css files located at the top of the page source but they all turned out identical.
No clue what I can do now. Maybe this makes it easier to investigate:
site.zip

In the file is a full version of the homepage when debug mode is enabled and a version of the homepage when debug mode is disabled.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...