“DHL for WooCommerce”‘s Bootstrap causes JS TypeError with bootstrap based heme
-
When using DHL for WooCommerce together with our theme (Kadenece Pinnacle) it causes a TypeError on the checkout page.
I reported this error to the Theme author first, but the root cause is in DHL for WooCommerce. Here’s my first report:
As for the createDocumentFragment TypeError JavaScript error on the checkout page: I played with activating/deactivating plugins. And the culprit seems to be DHL for WooCommerce. Having only WooCommerce and “DHL for WooCommerce” activated: The error is reproducable. When deactivating is, then the error is also gone.
When reproducing one needs to scroll a bit or leave/enter with the mouse the browser window. After all, I think, this has something to do with a tooltip being shown or not when entering/leaving a DOM element
The reply by the theme author was:
I dug into this a little and it’s an issue/conflict with bootstrap tooltips and jqueryUI tooltips. Not that they both can’t run and really they would run together just fine if DHL plugin wasn’t using just a broad selector to init their tooltips, but they may have some reason for that beyond what I can see. Regardless this conflict between the two main frameworks is the issue.
Worth noting that any bootstrap based theme would have this conflict.
Maybe could you give me a mail address of yours? Then I could give you more information like site or stacktrace that I do not want to post here publically.
Thanks!
-
I think we don’t need email, it’s easy to reproduce:
- Install and activate https://wordpress.org/themes/pinnacle/
- Add a product to cart
- Go to checkout page
- Scroll the page, move mouse in the browser window and outside the browser page, so that there are some mouseleave/mouseenter events (sometimes takes 20sec or so)
- See the
Uncaught TypeError: Cannot read property 'createDocumentFragment' of nulljs Error the browser Console.
As said above this could be prevented if not such generic CSS selector would be used to init the DHL for WooCommcerce tooltips. Normally, its a good habit to use a specfic CSS class prefix to avoid such conflicts, e.g. you might want to prefix “your” js/css handles with
dfw-*(the initials of this plugin) like other plugins like WooCommcere havewc-*or Germanized plugin hasgzd-*and so on:
- The topic ‘“DHL for WooCommerce”‘s Bootstrap causes JS TypeError with bootstrap based heme’ is closed to new replies.
