Cleverreach plugin kills event handler

  • Environment:
    WordPress: 6.4.3
    Avada Theme: 7.11.4
    Plugin WooCommerce: 8.5.2
    Plugin CleverReach? WooCommerce Integration: 3.3.1

    When Cleverreach plugin is activated, the event handler on the web site is no longer working. Error message in browser debugger:

    Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
    at cleverreach.checkout-8-3-0.js?ver=13:6:15
    at dispatch (jquery-3.7.1.min.js?ver=3.7.1:2:40035)
    at v.handle (jquery-3.7.1.min.js?ver=3.7.1:2:38006)

    As a result, no dynamic content is working further more. E. g. the WooCommerce product carousel. So we have to disable Cleverreach.

    How to fix the problem? Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hallo,

    mit der Verwendung von unserem Plugin und React JS kann es zu Fehlern kommen. Leider k?nnen wir aktuell keine L?sung anbieten, damit man das JavaScript in unserem Plugin deaktivieren kann.

    Da das Problem in Verbindung mit dem genutzten Template auftritt, k?nnen wir leider keine Option für einen Workaround anbieten.

    Wir haben den Fehler aufgenommen, k?nnen diesen jedoch ohne den Umbau der API und der Anpassung in allen Schnittstellen nicht schnell umsetzen.  

    Wann eine Korrektur des Fehlers erfolgen kann, kann ich Ihnen derzeit nicht mitteilen.

    Grü?e
    Alex

    zollillo

    (@zollillo)

    Hi,

    we also run into the exact same error that broke the functionality of some custom filter buttons on a page of our website. So far, I don’t quite understand from the answer how the error might be related to the template in use.

    In our case, if you open the linked source file from the error message in the browser console you can see that the element which is registered to the event listener is null , thus registering the event listener fails. So, for some reason, registering any additional event listeners also fail.

    If I try to access the email element from the console using the code from the source file:

    const email = document.getElementById("email");

    the return value is always null. Where does the element with the id “email” suppose to be present in the DOM?

    All that being said, we were able to fix our problem by wrapping our custom code in a window.onload() function and our event listeners do now work again, but the error is still being logged on every page you navigate to.

    • This reply was modified 9 months ago by zollillo.
    AlexCleverReach

    (@cleverreachakr)

    Hello.

    The message

    document.getElementById("email");

    is usually output if the interface cannot pass the ID for using the Connect link extension.

    Has the check-out been adapted, or does it not comply to the standard?

    You are welcome to make a request via: https://support.cleverreach.de/hc/de/requests/new

    Hey @rb285,
    when investigating a very weird behavior where the line 416 in the class-plugin.php is loading HTML code into the <head> of the page – i stumbled across this post..

    Although this is not future safe – for me it just feels the plugin is in general just “not good” in terms of quality. What if you just add the following lines to the file resources/js/cleverreach.checkout-8-3-0.js after the “const listener_URL”?

    For me it seems anyway wrong, in my Woocommerce there is also no field with ID “email” and it fails as well – seems WC only uses the billing_email field.

    if(!email) {
   return;
 }

    So the method like below – I would also add the additional ternary operator to the listener_url constant then you also don’t get those ugly errors out of the checkout pages where this just does not exist.

    const email = document.getElementById("email");
        const listener_url = (document.querySelector("#cr-billing-email-listener")) ? document.querySelector("#cr-billing-email-listener").value : null;
        if(!email) {
          return;
        }
        email.addEventListener('focusout', function (event) {
            jQuery.post(listener_url,
                {'billing_email': event.target.value});
        });

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.