Site logo

[Resolved] WooCommerce 3.0 Missing Lightbox

Home Forums Support [Resolved] WooCommerce 3.0 Missing Lightbox

Home Forums Support WooCommerce 3.0 Missing Lightbox

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #311350
    Tom
    Lead Developer
    Lead Developer

    This code definitely does it: https://gist.github.com/generatepress/0d81e87b1ec4494023121f3ecc753ccd

    Maybe try the Code Snippets plugin.

    #467641
    Jessica

    I’ve been having the same issue but only on a newly created site with Woo installed. The older sites that I had Woo installed on are still working fine, ie: the product images still have lightbox working but now, no matter which of the code I add to the functions file, nothing changes. I am only able to get the zoom and sliding images. Lightbox will not work.

    After looking high and wide elsewhere to see what might be causing it, I’m finally here to see if this is something that may have gotten resolved and I missed/overlooked the solution.

    What I have done:
    Disabled plugins that may have interfered = no change.
    Added the theme support code to my functions file = no change.
    Scrubbed Woo’s settings area and not seeing anything that allows the lightbox to work.
    Changed to the TwentySeventeen to test and still = no change

    The biggest issue is that the “zoom” feature isn’t mobile friendly so it results in a poor UX since it is wonky looking when someone tries to click the image, the experience diminishes. I don’t want to have to add “another” plugin since I’m enough to edit the functions file, but nothing seems to work or fix this.

    Is there something core in the parent theme that would be interfering with Woo’s lightbox? Even when I don’t add that snippet to the functions file, the hover zoom & slider function work, but not the lightbox.

    Note: everything is up to date and current and suspected plugins have been disabled so I’m guessing there’s a javascript conflict.

    Any new info that might help? Thanks.

    #468082
    Tom
    Lead Developer
    Lead Developer

    You shouldn’t even need to add that code now, it’s added by default: https://github.com/tomusborne/generatepress/blob/2.0.1/inc/plugin-compat.php#L23-L26

    Are you experiencing something other than what’s happening here?: http://demo.generatepress.com/product/flying-ninja/

    #468294
    Jessica

    Yeah. I do not get that at all. The zoom effect is the only thing and it doesn’t even really work well. Lightbox will not work and even after I disable plugins, it’s still not working.

    I also reinstalled WooCommerce and it’s not working. What is strange is that the other sites I have which use woo, are working fine but those were nogvbult wit GP so I suspect there’s a conflict or extra scripts.

    How can I disable certain features so there scripts aren’t loading unnecessarily?

    Also, here’s a link to the live site – still working on some styling and other stuff so it’s not really “done” but you can see it live.
    SASSandCHIC

    #468751
    Jessica

    I pulled a copy into my local dev environment so I don’t disrupt the live site but still can’t seem to get the inherent functionality to work there either.

    I’ll try again to disable all he plugins and reactivate one by one to identify the issue. Ultimately, I would really love to reduce the number of scripts that have to run as that is usually what causes this sort of thing to [break] as it were. If there’s a way I can disable something (and I’ll be digging and probably deconstructing a few things) as I try as much as possible to eliminate erroneous javascripts. Most of the effects I want/need can be accomplished using css so the extra plugins just reverse all of that.

    The biggest problem is that if I choose to totally go without an extra lightbox plugin, any gallery I have in other places (pages or posts) stop working with the lightbox effect and either do nothing or open the image in a new window, so I’m kind of stuck. On a mobile device, the lack of a lightbox feature makes the experience really icky.

    The only other thing I can think of is to re-install GP to see if something I have is wonky and needs a fresh copy. Otherwise, I’m still stumped and have been working on this issue for a whole week with no resolve.

    #468772
    Jessica

    Okay! I found the issue. I re-installed a fresh copy of woocommerce, generatepress, and gppremium. afternothing changed, I started to disable the plugins one by one. I also changed to TwentySeventeen. Then back to the core GP theme before the child theme.

    Bottom line: It worked great until I activated the GP Plugin. Before activating that that, the lightbox function in Woo was finally working. As soon as I activated GP Premium plugin, it stopped working.

    While I’m happy I was able to isolate what triggered the issues, I was actively using the premium plugin so that will cause a bit of a delay. I can get around it and just hand-code a little more and style things myself (not that I really want to re-style everything), I wanted to let you know what was causing it to see if there’s a way to see if there are any updates coming soon?

    #468776
    Tom
    Lead Developer
    Lead Developer

    If you open up developer tools (right click + inspect in Chrome), you’ll see a javascript error in the Console. That could be causing the issue.

    I searched the error and found this: https://github.com/woocommerce/woocommerce/issues/15531

    Unfortunately he doesn’t remember the solution.. very helpful.

    I did notice your resources are missing the version numbers (query strings), which can cause caching issues. You likely have a plugin or code snippet doing that.

    In your HTML markup, you’re missing the HTML element that shows the magnifying glass for the lightbox. I’m not sure if WC inserts this using javascript. If it does, then the error above would prevent that from happening.

    If not, then there’s something disabling that feature.

    Our demo (http://demo.generatepress.com/product/flying-ninja/) shows the default setup using the WooCommerce module in GP Premium. So if you’re using the default setup with the module, then you have something else (plugin or code snippet) manipulating the code.

    #468777
    Tom
    Lead Developer
    Lead Developer

    Just saw your latest reply.

    Our demo (linked above) is using the latest premium version, so the error shouldn’t be within the default premium plugin.

    Do you have anything in GP Hooks? Perhaps the error is somewhere in there?

    You can debug further by deactivating GPP modules one by one until the issue goes away.

    #468783
    Jessica

    I did only have 1 thing in the hooks part. I removed that one script/line of code for my mailing list signup and BAM… you nailed it. Now it’s working right but… This is odd and now a little problematic since I have nowhere to put that code now. It was code I grabbed from MailChimp which triggered the signup box. I’d rather hand-code another one than to add a plugin and VERY VERY HAPPY to have gotten this nailed down (thanks to your pinpointing it).

    The code for the mailchimp I added was:
    <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"xxxxxxxxx","lid":"xxxxxxxxxx"}) })</script>

    (removed my keys and other identifiers but left the rest exactly as it was so you could see).

    You’d probably know better than me if this is outdated or simply incompatible but… it doens’t look all that complicated or unusual, right?

    #468785
    Tom
    Lead Developer
    Lead Developer

    Hmm, nothing crazy looking in there at all. Perhaps try grabbing some updated code from the source? Perhaps it’s conflicting with the jQuery Cookie code being used in WooCommerce?

    #468787
    Jessica

    Will do! I feel 100x better having finally isolated this. Thank you b/c I was THIS CLOSE to jumping out the window!

    #468910
    Tom
    Lead Developer
    Lead Developer

    No problem! 🙂

Viewing 12 posts - 16 through 27 (of 27 total)
  • You must be logged in to reply to this topic.