Woocommerce single product image gallery - Javascript not loading

[enraptured]

Greetings guys,

I’m currently having an issue where it seems as though Javascript is not loading for my single product image gallery. I even installed a plugin to execute lightbox and other features for the single product image gallery and nada… Woocommerce is outputting the images but they’re not executing any animated behaviours.

It’s a theme that I built myself, on the base of ‘Underscores’ from Automattic. And I have created some custom php templates to display Woocommerce, by editing their own templates. I may have neglected to connect a dependecy or something…not sure…

Has anyone ever experienced this, or know a way to test this further or resolve it altogether?

Please help.

[mark334]

@enraptured

Has anyone ever experienced this, or know a way to test this further or resolve it altogether?

If you haven’t yet, I would turn on PHP debugging and check for error messages or put debug statements if you don’t see any errors in the logs.

Then, for the JavaScript, look in your browser dev tools console for JavaScript errors when you bring up the page. Again, add debug statements if you don’t see errors.

You might need to check your CSS if your using CSS for your animations.

Good luck!

[enraptured]

Thank you Mark…it’s bugging me. I turned on debugging and it said that few js files weren’t loaded, but then when I turned them off, still nothing.

I’ve turned off plugins, nothing…

I’ve commented out js and css file inclusions, nothing. [I’m using bootstrap and js libraries for this theme.]

I tried using a custom Woocommerce template file for product image gallery, but it requires js also, and is not working either.

Now, I’m using a lightbox lpugin and am going to directly add the css classes into the woocommerce template and see if that helps.

The troubleshooting continues…

[mark334]

Hello @enraptured,

How are you including your JS libraries? If you aren’t following the WordPress enqueue method, that might be your main culprit.

It also seems you’ve got a long going on at the same time. I’d try to enqueue 1 library at a time with 0 plugins installed at first. Once you have all your libraries loaded and got your tests working, then start adding plugins one at a time carefully watching the console and making sure your regression tests are still completing successfully.

Furthermore, the JS errors should help you narrow down the issue. You should examine them. For example, If the console or network tab says that your libraires aren’t loading, then something could be blocking them, the URL is correct/outdated, or they aren’t enqueued properly.

Further reading: https://developer.wordpress.org/themes/basics/including-css-javascript/

Lastly, if you need more help and plan to post to any forum, the more specifc you are (i.e., provide code samples, page links, or minimal repro example, what specific steps you’ve already done) the more helpful replies you’ll get.

Cheers

[enraptured]

Mark, you’re right… Let me expand on what I’ve done.

So, I used the Automattic base theme, Underscores, and from there, began editing templates, enqueued Bootstrap, Google Fonts and other js scripts that could enable animated function, but really most of these functions I don’t need, because I really only used animations for the menu header.

The rest of the website is very basic…deliberately… I wanted this theme to be simple and clean, and use as few plugins as possible.

I’ve attached a screenshot of the scripts and css that I’ve enqueued. I’ve recently commented some of them out to troubleshoot what is blocking the.

I’ve installed a plugin to animate the image gallery and it did not work, it output the images but they did not form into a gallery, just images output onto the page.

I also tried installing a lightbox plugin and still, whenever I click on the images, they open in the browser, but not in a lightbox, and there is no animated behaviour on the image gallery.

I first troubleshooted by turning on debug and looking at the errors. There weren’t any. The only error is a deprecated create_function() in one of the widget plugins.

I then began turning off plugins and still the issue persisted.

I then commented out most of the enqueued scripts/stylesheets.

I sent a screenshot of what the single product image gallery area looks like…don’t worry about the variations, they look crazy, I’m still styling those…but have been more focused on troubleshooting the image gallery.

It’s just not behaving the way a normal single product image gallery would behave. And the error console isn’t producing anything helpful. I took a screenshot of that too and attached.

Cheers…I hope this gives more insight to you or anyone who might want to help.

I’m not frustrated yet, but I can’t think of what could possibly be causing this… I feel like I’ve done everything right as far as the theme goes. I mean, it’s pretty simple.

The site is behind a splash screen so even if I send the link, it won’t be viewable…but would be happy to provide more info to anyone privately to get some help on it…

[Erik_J]

@enraptured

The site is behind a splash screen

Then disable the splash screen til you’ve got everything working.

Those user annoyances seldom benefit the site anyway.

[enraptured]

It’s not live yet, so I have a ‘maintenance mode’ plugin installed. I see the site normally once I’m logged in as an administrative user.

You were kidding though Erik? lol…phew, this thing is driving me nuts, thank you for the comic relief

[Erik_J]

@enraptured

thank you for the comic relief

You’re welcome! Couldn’t resist.

(Usually I’m serious in opposing “fancy spinning wheel” loading covers.)

[enraptured]

[enraptured]

The problem was:

main.js (had function calls for parent js files) but I had removed parent js files (when I had uncommented some files) so all the child/function got broken.

[Erik_J]

Simple is never easy.

Thank you for explaining what caused the issue.