Agregar una biblioteca jQuery a Magento 2

¿Cómo puede un desarrollador externo agregar una biblioteca jQuery a Magento 2?

Si bien Magento 2 incluye una versión de jQuery en sus temas frontend, el objeto jQuery no está disponible de inmediato en el espacio de nombres global. Creo que esto se debe a que Magento 2 usa RequireJS para extraer jQuery, y RequireJS no cargará un archivo de módulo hasta que sea necesario.

Esto presenta un problema para los complementos jQuery. Normalmente, incluiría un complemento con HTML que se parece a esto

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

Sin embargo, esto no es posible con Magento 2. Debido a que el jquery.cookie.jsarchivo define el complemento jQuery utilizando el objeto global jQuery, fallará en Magento 2 con un jQuery is not definederror.

¿Cómo debería un desarrollador front-end incluir una biblioteca estándar de complementos jquery en la aplicación front-end de Magento 2?

Crear requirejs-config.js Companyname \ Modulename \ view \ frontend \ requirejs-config.js add

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

Su archivo Js en su módulo Nombre de compañía \ Nombre de módulo \ view \ frontend \ web \ js \ flexslider.js
Simplemente agrega jquery lib usando la siguiente sintaxis

<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 ejemplo

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

Cito los documentos de Magento .

Para crear una dependencia en el complemento de terceros, especifique una cuña en los siguientes archivos de configuración:

En su requirejs-config.js:

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

Luego incluya su código de complemento de terceros en su Tema o Módulo: "web / js / 3-rd-party-plugin.js" de esta manera:

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

Esta solución es favorable porque está incluyendo su archivo de complemento sin ningún tipo de modificación. Simplemente reemplace el archivo js cuando el autor del complemento se actualice o incluso use un cdn.

Lo mejor es usar un Módulo Magento 2 o un Tema para incluir dichos complementos / bibliotecas. Es la forma recomendada y la mejor práctica .

Método 1> TEMA : Si la biblioteca javascript / jquery está relacionada con el tema (para cambiar la apariencia del sistema).

• Coloque el archivo fuente del componente personalizado en una de las siguientes ubicaciones
  [theme_dir] / web / js /
• Coloque su archivo requirejs-config.js en
  [theme_dir]

Método 2> MÓDULO : si la biblioteca javascript / jquery está relacionada con una función comercial particular o maneja una característica de Magento. Debería ir dentro de un módulo.

• Coloque el archivo fuente del componente personalizado en una de las siguientes ubicaciones
  [dir_módulo] / view / frontend / web / js /

• Coloque su archivo requirejs-config.js en
  [module_dir] / view / frontend /

Magento 2 recomienda encarecidamente no cambiar el código fuente de los componentes y widgets predeterminados de Magento. Todas las personalizaciones deben implementarse en módulos o temas personalizados.

Alan, la fábrica de widgets de jQuery UI tiene un caso especial. Para que AMD sea compatible, consulte el siguiente enlace.

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