WordPress off canvas generating this issue

  • zeeshan283

    (@zeeshan283)


    1 year, 4 months ago

    Hi everyone,

    I’m experiencing a frustrating issue with JavaScript on my WordPress e-commerce website, and I’m hoping someone can offer some guidance.

    Problem Description:

    I’ve written a custom JavaScript script to dynamically group and display color attributes as categories, using a filter interface. This script works perfectly fine on the desktop version of my site. However, when viewing the site on mobile, I’m using an off-canvas menu to display these color categories. This is where the problem occurs.

    When the off-canvas menu is opened, I get the following JavaScript error in the console:

    Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#elementor-action%3Aaction%3Doff_canvas%3Aopen%26settings%3DeyJpZCI6Ijk0YmIyYWUiLCJkaXNwbGF5TW9kZSI6Im9wZW4ifQ%3D%3D' is not a valid selector.

    content_copydownloadUse code with caution.

    This error appears to be related to how Elementor handles off-canvas menus. It seems that Elementor’s code is trying to use an Elementor action URL as a CSS selector, which is causing the script to fail. As a result, my color category groupings aren’t working as expected on mobile.

    What I’ve Tried So Far:

    • I’ve made my selectors more specific to target only elements within the filter container.
    • I’m using a MutationObserver to make sure my script runs after the off-canvas content has loaded.
    • I’ve wrapped my code in a try…catch block to prevent errors from breaking the whole script.
    • I’ve added a timeout and specific checks to try and circumvent the elementor bug.

    Additional Information:

    • My site is a WordPress e-commerce site using WooCommerce.
    • I’m using Elementor to build the pages, and am using the off canvas function from elementor.
    • The specific JavaScript code I’m using is a custom script that is being rendered inside a code block.

    Link to the page:

    https://sleepify.tikfollowers.uk/

    I’m not sure how to proceed from here. I suspect there is a conflict with Elementor, but not sure how to fix the bug. Any help or advice would be greatly appreciated!

The topic ‘WordPress off canvas generating this issue’ is closed to new replies.