Cómo agregar un archivo JS en la interfaz para todas las páginas

38

He leído 3 páginas de Resultados de Google sobre cómo cargar un archivo JS para todas las páginas y todavía no puedo hacerlo.

Tengo algunas dudas, espero que alguien pueda aclararlas.

¿Necesito crear un módulo dentro app/codecon el requirejs-config.js? ¿O puedo poner un requirejs-config.jsdentro de mi tema en su lugar?
¿Qué debo poner adentro requirejs-config.js?
¿Cómo debería verse el código dentro de mi .jsarchivo? Vi que no puedes usar jQuery's document.readyy debes tener undefine([
¿Qué debo poner adentro define([?
Si tengo módulos jQuery de terceros, ¿tengo que editarlos para que funcionen?
¿Necesito poner xml en algún lugar para decirle a magento que mi archivo my.js existe?
Si creo un módulo dentro app/codecon todo el código js allí, ¿incluiría todo el material en todas las páginas? ¿Cómo puedo lograr eso?

magento2 javascript requirejs Prashant Akash
fuente

65

Para cargar un main.jsarchivo personalizado en todas las páginas (en el modo RequireJS), esta es una buena manera:

1) Crear main.js

Crear main.jsdentro de la carpeta del tema

<theme_dir>/web/js/main.js

con este contenido:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

En resumen : declaramos dependencias al inicio, por ejemplo "jquery". Definimos como parámetro de la función el nombre de la variable para usar la dependencia dentro de la función, por ejemplo "jquery" --> $. Ponemos todo nuestro código personalizado dentro function($) { ... }.

2) Declarar main.jscon un requirejs-config.jsarchivo

Cree un requirejs-config.jsarchivo dentro de la carpeta del tema:

<theme_dir>/requirejs-config.js

con este contenido:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"Es el camino a nuestra costumbre main.js. La extensión ".js" no es necesaria.

Nuestro requirejs-config.jsse fusionará con otro requirejs-config.jsdefinido en Magento.

RequireJS cargará nuestro main.jsarchivo, en cada página, resolviendo dependencias y cargando archivos de forma asíncrona.

Opcional: incluye biblioteca de terceros

Esta es la forma de incluir bibliotecas de terceros.

1) Agregue la biblioteca en web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Abra requirejs-config.jsy agregue este contenido:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

Parece más complicado de lo que realmente es.

3) Agregue la dependencia dentro de main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

Andrea
fuente

Hola, ¿Puedes decir si tengo que incluir bootstrap.js aquí? ¿Cómo puedo agregarlo para que bootstrap funcione bien en mi tema? ¡Gracias!

Anujeet

1

@anujeet Puede incluir bootstrap.jsde la misma manera que incluí slick.jsen el ejemplo anterior. Para el valor de cuña, puede intentar usar esto: 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }como se explica aquí: stackoverflow.com/a/13556882/3763649

Andrea

Vea mi require-config.js

var config = {  	deps: [ 		"js/animate", 		"js/incase", 		"js/confetti" 	],     paths: { 		"jquery.bootstrap":"js/bootstrap.min"     },     shim:{       'jquery.bootstrap':{ 		'deps':['jquery']       }     } };   require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']);

Mi minicart deja de funcionar con esto

anujeet

@anujeet Es mejor que abras otra pregunta con este problema, informando sobre require-config.js y si tienes algunos errores en la consola de JavaScript. Si vincula su pregunta aquí, con gusto lo ayudaré :)

Andrea

cuando incluyo más js tengo los errores "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

7

Duplicar el archivo:

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

A

app / code / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

Para más información:

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

¡Buena suerte!

Por cierto, lea el frontend devdocs oficial de magento para obtener el básico :)

Goldy
fuente

Debido a que el script de Bootstrap requiere que se inicialice JQuery, incluirlo en la cabeza no funcionará. Lea este documento oficial. para más información. :)

VS

6

Puede agregar archivos JS usando xml como se muestra a continuación. Esto agregará js en todas las páginas.

Con módulo personalizado:

Crea un default.xmlarchivo en tu módulo.

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

SCC
fuente

2

El método de agregar js usando el default_head_blocks.xmlarchivo no funcionará para los complementos JQuery de terceros. Por lo tanto, si desea agregar complementos JQuery personalizados y usarlos, deberá usar el requirejs-config.jsarchivo.

Para responder a sus preguntas una por una:

1) y 2) No necesita crear un módulo para agregar el requirejs-config.jsarchivo. Simplemente puede agregarlo en esta ubicación:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Consulte esta respuesta para crear un requirejs-config.jsarchivo adecuado .

3) Deberá enumerar las dependencias de su archivo js antes de escribir sus scripts.

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

El código anterior dice que necesitará jquery y jquery ui para sus scripts.

4) No necesita usar el a define([menos que esté creando un complemento de JavaScript.

5) No, no necesita editarlos, pero deberá especificar su dependencia utilizando el requirejs-config.jsarchivo. Si usted tiene owl.carousel.min.jsen <vendor>/<theme>/web/js/owl.carousel.min.js, el requirejs-config.jsarchivo se vería así:

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

En el código anterior, recuerde que no hay ningún .jsarchivo. Y ahora para usarlo en tu js

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

Si todo funciona bien, debe tener sus enlaces de pie de página en un control deslizante.

6) y 7) Simplemente use el método sugerido por @Goldy para agregar su js. Agregará su archivo js a todas las páginas.

Para leer más, puedes mirar esta publicación

Espero que esto ayude.

VS
fuente

1

Así es como agrego la biblioteca dotdotdot en mi tema personalizado magento2.

1. Descargue y agregue Js Library en su tema siguiendo la ruta:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Cree el archivo requirejs de un tema de la siguiente manera y permita que los requirejs conozcan la biblioteca recién agregada.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Use la biblioteca agregada en el archivo js principal de su tema de la siguiente manera:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. e incluya el archivo js de su tema en la cabeza de su sitio de la siguiente manera:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Puede agregar cualquier biblioteca JS externa y archivo personalizado en cada página en magento2.

dicho
fuente

He intentado esto es parte de administración, js está llegando correctamente, pero resultado esperado no viene

Naveenbos

Buena respuesta. Voy a intentarlo ¿Hay alguna manera de especificar una determinada página donde se necesita el archivo js?

Mohammed Joraid

Para una página específica, mueva el contenido "default_head_blocks.xml" en el ejemplo anterior a su archivo de diseño específico. Por ejemplo, en el caso de la página de detalles del producto, agregue ese xml en app / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml

dicho

Cómo agregar un archivo JS en la interfaz para todas las páginas

Respuestas:

Opcional: incluye biblioteca de terceros