search

rafaelbotazini / floating-whatsapp

This is a simple floating WhatsApp button plugin for jQuery.
MIT License
268 stars 218 forks source link

Does not work with normal Jquery #6

Closed 3sade closed 6 years ago

3sade commented 6 years ago

Hello, looks awesome!

One question; how can I make it work for normal Jquery (https://code.jquery.com/jquery-3.3.1.js) and not only for the minified version of Jquery (https://code.jquery.com/jquery-3.3.1.min.js)?

My site runs on the uncompiled version of Jquery and I cannot get it to work.

Thanking you in advance!

rafaelbotazini commented 6 years ago

Hello, many thanks!

There should not be any difference when using the debug version of jQuery, since the minified version is just the original one compressed, so it can be shipped in a smaller size. I tested the plugin with the links you provided and it is working just fine.

What exactly doesn't work? Is it just a feature you are trying to use? What have you tried so far? Could you please provide some details and, if possible, the code you are trying to run (that would help a lot actually)?

3sade commented 6 years ago

Thanks for your reply. I see my websites uses the bundled version of jQuery (v1.12.4) trough wp-includes. Can you make this script work with this older version of jQuery? Thanking you in advance!

rafaelbotazini commented 6 years ago

I tested the plugin with the jQuery version you mentioned and didn't find any issue.

I would need some more details about the problem to help you any better.

This is what I tried:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Floating WhatsApp demo file</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="floating-wpp.css">
    <script type="text/javascript" src="floating-wpp.js"></script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif
        }
    </style>
</head>

<body>
    <div class="floating-wpp"></div>
</body>
<script type="text/javascript">
    $('.floating-wpp').floatingWhatsApp({
        phone: '5491133359850',
        popupMessage: 'Hello, how can we help you?',
        showPopup: true,
    });
</script>
</html>
3sade commented 6 years ago

Hmm, you are right. I am using exact the same code. Except my Wordpress loads the minified version (sorry I was wrong) of jQuery 1.12.4, see attached file. With this version of jQuery the button will not show. Thanks again for your great assistance.

jquery.js.zip

rafaelbotazini commented 6 years ago

Oh, I see. Well, this has nothing to do with the jQuery version at all.

The thing is that Wordpress uses jQuery noconflict, which disables the $ variable for jQuery, in order to prevent conflicts between another libraries that also rely on the $ variable.

What you can do is call jQuery functions using the jQuery variable instead of $:

jQuery('.floating-wpp').floatingWhatsApp();

Here's a tip:

If you are using a lot of jQuery functions in your scripts, you might want to not write "jQuery" all the time (the code would become kinda messy too). You can restore the dollar sign variable wrapping the whole script within a IIFE that takes a $ parameter, and pass the jQueryvariable to it:

(function ($) {
    $('.floating-wpp').floatingWhatsApp();
})(jQuery)
3sade commented 6 years ago

Great, got it working now. Thanks for your detailed reply!