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.

  1. ¿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?

  2. ¿Qué debo poner adentro requirejs-config.js?

  3. ¿Cómo debería verse el código dentro de mi .jsarchivo? Vi que no puedes usar jQuery's document.readyy debes tener undefine([

  4. ¿Qué debo poner adentro define([?

  5. Si tengo módulos jQuery de terceros, ¿tengo que editarlos para que funcionen?

  6. ¿Necesito poner xml en algún lugar para decirle a magento que mi archivo my.js existe?

  7. 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?

Prashant Akash
fuente

Respuestas:

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