How to add a jQuery plugin in theme?

Question

I have been looking into RequireJS for a while, but till now, I still can not figure out how to add the TouchSwipe plugin into my theme.

Would somebody take the time to give me a step by step?

Answer 1

copy js file jquery.touchSwipe.min.js into your custom theme web/js folder.

app/design/frontend/Vendor/themename/web/js/jquery.touchSwipe.min.js

Now you have to use inside your template file,

just create requirejs-config.js file inside your theme template,

app/code/Vendor/Module/view/frontend/requirejs-config.js

code for js file,

var config = {
    paths: {            
            'touchswipe': "js/jquery.touchSwipe.min"
        },   
    shim: {
        'touchswipe': {
            deps: ['jquery']
        }
    }
};

Now you can use inside your template like this,

<div id="touchme">Touch me to see effect</div>

<script>
    require([
        'jquery',
        'touchswipe'
    ], function($, swipe){
        $(function() {
            $("#touchme").swipe({
                    //keep your code here
            });
        });
    });
</script>

Now

Remove var folder from root
Remove pub/static folder contents.

Run deploy command,

php bin/magento setup:static-content:deploy

Answer 2

Copy jquery.touchSwipe.js following location

Vendor/Module/view/frontend/web/js/jquery.touchSwipe.js

Now inside phtml template you just add following line. This is the basic example.

<div id="test" class="box">Swipe me</div>
<script>
    require([
        'jquery',
        'Vendor_Module/js/jquery.touchSwipe'
    ], function($, swipe){
        $(function() {
            //Enable swiping...
            $("#test").swipe({
                //Generic swipe handler for all directions
                swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                    $(this).text("You swiped " + direction);
                },
                //Default is 75px, set to 0 for demo so any distance triggers swipe
                threshold: 0
            });
        });
    });
</script>

Answer 3

Step 1: Create requirejs-config.js under CompanyName\Custom\view\frontend\ folder with the following code -:

var config = {
    map: {
        '*': {
            jquery_cookie:           'CompanyName_Custom/js/jquery_cookie',
        }
    }
};

Step 2: Add jquery_cookie.js or any other jquery plugin under CompanyName\Custom\view\frontend\web\js\

Step 3: Now the jquery plugin has been added, now you can call jquery cookie plugin from any of your template files

<script>
        //<![CDATA[
        require(['jquery','jquery_cookie'], function($){
            $(window).load(function() {
                $.cookie.json = true;
                var customCookie = $.cookie("customCookie");

                if (customCookie != undefined) {
                    console.log(customCookie);
                    $.removeCookie("customCookie", {path: '/', domain: document.domain});
                }
            });
        });
        //]]>
</script>

The key thing to notice here is that we are using require JS as part of the first line require([‘jquery’,’jquery_cookie’] and declaring to use jquery and our newly added jquery plugin i.e. jquery_cookie.

Hope this helps!