Adicionando uma biblioteca jQuery ao Magento 2

Como um desenvolvedor de terceiros pode adicionar uma biblioteca jQuery ao Magento 2?

Enquanto o Magento 2 inclui uma versão do jQuery em seus temas de interface, o objeto jQuery não está disponível imediatamente no espaço de nomes global. Eu acredito que isso ocorre porque o Magento 2 usa o RequireJS para extrair o jQuery, e o RequireJS não carrega um arquivo de módulo até que seja necessário.

Isso apresenta um problema para plugins jQuery. Normalmente, eu incluía um plugin com HTML parecido com este

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

Isso, no entanto, não é possível com o Magento 2. Porque o jquery.cookie.js arquivo define o plug-in jQuery usando o objeto jQuery global, ele falhará no Magento 2 com um jQuery is not definederro.

Como um desenvolvedor front-end deve incluir uma biblioteca padrão de plugins jquery no aplicativo front-end do Magento 2?

Crie o nome da empresa requirejs-config.js \ Nome do módulo \ exibição \ front-end \ requirejs-config.js

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

Seu arquivo Js no seu módulo Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Você acabou de adicionar o jquery lib usando a seguinte sintaxe

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

segundo exemplo

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Cito o Magento Docs .

Para criar uma dependência no plug-in de terceiros, especifique um calço nos seguintes arquivos de configuração:

No seu requirejs-config.js:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Em seguida, inclua seu código de plug-in de terceiros em seu tema ou módulo: "web / js / 3-rd-party-plugin.js", como segue:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

Esta solução é favorável porque você está incluindo o arquivo do plug-in sem nenhum tipo de modificação. Simplesmente substitua o arquivo js quando o autor do plug-in for atualizado ou usar um CDN!

A melhor coisa a fazer é usar um módulo Magento 2 ou um tema para incluir esses plugins / bibliotecas. É a maneira recomendada e a melhor prática .

Método 1> TEMA : Se o javascript / jquery biblioteca estiver relacionada ao tema (para alterar a aparência do sistema).

• Coloque o arquivo de origem do componente personalizado em um dos seguintes locais
  [theme_dir] / web / js /
• Coloque seu arquivo requirejs-config.js em
  [theme_dir]

Método 2> MÓDULO : Se a biblioteca javascript / jquery estiver relacionada a uma função comercial específica ou manipular um recurso Magento. Deve entrar dentro de um módulo.

• Coloque o arquivo de origem do componente personalizado em um dos seguintes locais
  [module_dir] / view / frontend / web / js /

• Coloque seu arquivo requirejs-config.js em
  [module_dir] / view / frontend /

O Magento 2 recomenda enfaticamente não alterar o código fonte dos componentes e widgets padrão do Magento. Todas as personalizações devem ser implementadas em módulos ou temas customizados.

Alan, a fábrica de jQuery UI Widget tem um caso especial. Para tornar a AMD compatível, verifique o seguinte link.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/