2

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?

8

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

  • removing the static folder removed .htaccess which breaks the whole thing. – Calvintwr May 1 '17 at 11:56
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!

1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.