Clicking on thumbnail opens full page in Supply theme

Solved
Tourist
5 0 2

Clicking on an image thumbnail opens a full page with no way to close it other than the back button.

 

Have copied the product-template from another website where behaviour is as expected (Modal), but has made no difference.

 

https://sat-phone-sales.myshopify.com/products/thuraya-xt-lite-save-129-with-free-silicon-case?

 

pw SPS

0 Likes
Shopify Expert
9965 84 1469

Your storefront is locked so the forum members won't be able to see the issue. However, if the image is opening in it's own browser tab/window I would be very confident that you've got a JavaScript error happening in your theme. The theme code will be failing gracefully so it's still letting the image open, but that JS error will be stopping it happening in the prettier way.

 

If you don't want to share the storefront password (NOT the Admin password) then take a look at the browser debug console logs. You might find some errors showing there that give you some clues into what might be going wrong.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
5 0 2

The password was supplied above where it says pw SPS

0 Likes
Highlighted
Tourist
5 0 2

It's easy to say it's a Javascript error, but how to find it. Shopify is a LOT of code! Tried looking for errors on Google Chrome - inspect element, but did not reveal anything.

0 Likes

Success.

Shopify Expert
9965 84 1469

If you found the inspect tool, you're close. The debug tools is found in most browsers and will fall under developer tool menu (or something like it).

Using Chrome, I can see some issue with the JavaScript is indeed the problem.

 

There's a couple possible of reasons here but let's start with the first one. You have looked to have added JotForm into your shop (or some app has) and it's loading another version of jQuery. Multiple versions can be ok, but not if they are loading incorrectly. Looks like this is the case here so some connections to the first version is lost as this one loads.

 

See what happens when you don't have that code load.

 

If you're only getting started with JS debugging in a browser, here's a link that you might find interesting:
https://developers.google.com/web/tools/chrome-devtools/javascript/

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Tourist
5 0 2

HI Jason, very impressed with how you narrowed it down. I have removed the jotform code and now the lightbox works as it should. Now the challenge to figure out how to get these co-existing!

0 Likes