Why does my header and add-to-cart button disappear randomly?

[paulbloomly]

My header (the menu and logo at the top) and my "add to cart/pre-order" button of product pages are randomly disappearing after I publish my theme.  No problem in staging, but if I publish, it'll disappear randomly, if you click through a few pages and products, eventually it goes away.  If I refresh several times it'll come back. 

I'm using the Palo Alto theme, and I've got the Pre-order Now app running.  Any ideas out there??

https://gobloomly.com

[thalpie]

Your CSS:

.site-header--loading {
overflow: hidden;
/* opacity: 0; */    <-- hides it                   
}

[paulbloomly]

I don't think that is the problem, seems like if it was in the CSS it would never be viewable, but the problem is random.  It appears whenever the issue persist, I see a $.throttle is not a function type error.

[tim]

Good catch of $.throttle undefined -- and a very interesting case of jQuery overload.

Your theme includes jQuery library (ver 3.5.1) as part of theme.js.  Then it adds a throttle plugin to this copy of jQuery. Later it calls PaloAlto.Header function and all of a sudden there is no throttle  plugin?!

However, you have a PreOrder Now app and it loads it's own copy of jQuery (3.4.1). I must admit, the app loads jQuery in a responsible way by using it in noConflict mode.

However, looks like browser is able to run  the aforementioned Header function in a split moment after the jQuery 3.4.1 is loaded (and took control of $ variable) and before the app code runs jQuery.noConflict to restore $ back to what it was (themes own 3.5.1).

There are several ways to try to fix this problem.

1) tell the app to not load it own jQuery at all by adding this  code right before </head>  tag in your theme.liquid Layout -- it should be able to use theme jQuery just right:

<script> 
if(typeof pn === "undefined")
  pn = {};
if(typeof pn.shop === "undefined")
  pn.shop = {};
pn.shop.never_load_jquery = true;

</script>

2) delay App code execution. App javascript is included (most probably) as part of the snippet right above the </body> tag. it includes the following line 

<script src="https://preorder-now.herokuapp.com/widget/javascript?shop=bloomly-garden-center.myshopify.com"></script>

Add defer=defer, like this:

<script defer= defer  
        src="https://preorder-now.herokuapp.com/widget/javascript?shop=bloomly-garden-center.myshopify.com"></script>

It may be necessary to combine 1) and 2) and there are other ways to fix it, but these would be a bit more time-consuming.

[paulbloomly]

Ah yes!  Thank you Tim.  This is exactly it.  I ended up going a lazy route and just switched apps.  However, long term if I decide to switch back I'll have to implement this fix(es).  Not being a much of a programmer, and in a huge rush to launch this weekend, it was quicker and less error prone to just switch.  Thank you!

[Jamesl2]

Hi Tim,

I've tried to find a similar problem/ fix online and this so far is the most similar to my problem but those codes you posted before don't work. Is there any way to adjust the codes above to that it works for my site? Please see my own disappearing issue here:

https://flexculture.com.au/collections/chains

Thanks!

[tim]

Hi James, 

do you mean that your horizontal menu is hidden and instead there is a hamburger button with word "menu" on the left?

This is by design and I'm pretty sure it was discussed here in the forum multiple times.

Your theme (legacy Venture theme) initially shows the horizontal menu. 

However, to prevent overflow or menu wrapping to a second line, the code checks if entire menu fits inside container on one line and if not, it hides horizontal menu and shows the hamburger button with slide-out menu instead.

Whether it will happen depends on the width of your browser window, font size, padding between menu items and your menu item titles.

Say, you have "Featured designs" menu item. You can rename it to simple "Featured" (even if only to test) and see how it will affect the header behaviour.

See how FAQ is not fully inside the container?

[Jamesl2]

Thanks very much Tim,

Yes that has worked.

Sorry I thought it was this other issue because it showed for a second before disappearing. It also wasn't happening on every page so I was confused.