Magento 2 – How to Load Latest Version of jQuery in Custom Module

jquerymagento-2.1.7

I want to load the latest version (v3.2.1) jquery in my Magento 2 custom module.

Actually, I want to use materializes in luma theme but for that jquery version must be 3.2.1. I tried to replace the current version with the new one but I got other jquery errors.

So I want to load the latest version only in my custom module.

Anyone know how to do it?

Best Answer

Method 1: JS override

You can override the original jQuery file to the one you desired. If you have an own theme, you can put the latest jquery.js file into app\design\frontend\Vendor\Theme\web\js\. The system will use your jQuery file instead.

Ref: How to change jQuery version in Magento2

Method 2: Use CDN

It also override the original theme JS file, and using your theme files. But this time, we don't download the jquery.js file. We always get the latest one.

Go to app\design\frontend\Vendor\Theme\Magento_Theme\layout\default_head_blocks.xml. You can create this file if you don't have.

Add the following code on the file

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <!--Remove default jquery, or it will cause conflict-->
    <remove src="lib\web\jquery.js"/>
    <!--Include CDN-->
    <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous" src_type="url"></script>
</head>

You can change to any jQuery versions as you want. For the <script> part, you can refer to https://code.jquery.com/ . And, remember to add src_type="url" before closing tag.

If you have enabled cache, clear the cache.

Ref: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

Related Solutions

JavaScript – Fix Function Not Defined in Custom jQuery with href=javascript

Try following way:

<a href="javascript:void(0);" onclick="slide('right');">LEFT</a>

<script>
    require([ 'jquery', 'jquery/ui'], function ($){

        slide=function(direction) {
            var slider_full_width = $('.slides_box li').outerWidth() + 28;


            if (direction == 'left') {
                var left_sliding = parseInt($('.slides_box').css('left')) + slider_full_width;
            } else {
                var left_sliding = parseInt($('.slides_box').css('left')) - slider_full_width;

            }

            $('.slides_box:not(:animated)').animate({'left': left_sliding}, 350, function () {
                if (direction == 'left') {
                    $('.slides_box li:first').before($('.slides_box li:last'));
                }
                else {
                    $('.slides_box li:last').after($('.slides_box li:first'));
                }
                $('.slides_box').css({'left': '0'});
            });
        }
    });
</script>

Magento – How to call custom jQuery slider in magento 2

For example to call custom jQuery slider in home page of Magento you need to follow this steps

Step 1: Call you custom slider's CSS and JS in home page layout

Override cms_index_index.xml to your custom theme

app/code/Vendor/theme/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Magento_Cms/js/myslider.js"/>
        <css src="Magento_Cms/css/myslider.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="index.home" template="Magento_Cms::slider.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 2: Define your custom JS in requirejs-config.js

app/code/Vendor/theme/Magento_Cms/requirejs-config.js

var config = {
    map: {
        '*': {
            mySlider: 'Magento_Cms/js/myslider'
        }
    },
    shim: {
        magnificPopup: {
            deps: ['jquery']
        }
    }
};

Step 3: create phtml file which we called in layout for your slider html and js

app/code/Vendor/theme/Magento_Cms/templates/slider.phtml

  <!-- Your Custom Slider HTML -->

  <script type="text/javascript">
    requirejs(['jquery', 'myslider' ],
      function ($, myslider) {
          $(document).ready(function(){

              // Custom Slider JS

          });
      });
  </script>

I have created popup manager module with custom jQuery popup you can take reference from here:

https://github.com/mageprince/Magento2-PopupManager

Best Answer

Related Solutions

JavaScript – Fix Function Not Defined in Custom jQuery with href=javascript

Magento – How to call custom jQuery slider in magento 2

Related Topic