Como adicionar arquivo JS no front-end para todas as páginas

38

Eu li três páginas dos Resultados do Google sobre como carregar um arquivo JS para todas as páginas e ainda não consigo fazer isso.

Eu tenho algumas dúvidas, espero que alguém possa esclarecê-las.

Preciso criar um módulo dentro app/codecom o requirejs-config.js? Ou posso colocar um requirejs-config.jstema dentro do meu tema?
O que devo colocar dentro requirejs-config.js?
Como deve ser o código dentro do meu .jsarquivo? Vi que você não pode usar o jQuery document.readye deve ter umdefine([
O que devo colocar dentro define([?
Se eu tenho módulos jQuery de terceiros, preciso editá-los para fazê-los funcionar?
Preciso colocar o xml em algum lugar para informar ao magento que o arquivo my.js existe?
Se eu criar um módulo dentro app/codecom todo o código js, ele incluiria todas as coisas em todas as páginas? Como posso conseguir isso?

magento2 javascript requirejs Prashant Akash
fonte

65

Para carregar um main.jsarquivo personalizado em todas as páginas (no modo RequireJS), é uma boa maneira:

1) Criar main.js

Criar main.jsdentro da pasta do tema

<theme_dir>/web/js/main.js

com este conteúdo:

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

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

});

Em resumo : declaramos dependências no início, por exemplo "jquery". Definimos como parâmetro da função o nome da variável para usar a dependência dentro da função, por exemplo "jquery" --> $. Colocamos todo o nosso código personalizado dentro function($) { ... }.

2) Declarar main.jscom um requirejs-config.jsarquivo

Crie um requirejs-config.jsarquivo dentro da pasta do tema:

<theme_dir>/requirejs-config.js

com este conteúdo:

var config = {

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

};

"js/main"é o caminho para o nosso costume main.js. A extensão ".js" não é necessária.

Nosso requirejs-config.jsserá fundido com outro requirejs-config.jsdefinido no Magento.

O RequireJS carregará nosso main.jsarquivo, em cada página, resolvendo dependências e carregando arquivos de maneira assíncrona.

Opcional: Incluindo biblioteca de terceiros

Essa é a maneira de incluir bibliotecas de terceiros.

1) Adicione a biblioteca em web/js:

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

2) Abra requirejs-config.jse adicione este conteúdo:

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 mais complicado do que realmente é.

3) Adicione a dependência em main.js:

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

  // ...

});

Andrea
fonte

Oi, você pode dizer se eu tenho que incluir o bootstrap.js aqui. Como posso adicioná-lo para que o bootstrap funcione bem no meu tema. Obrigado!

anujeet 27/02

1

@anujeet Você pode incluir bootstrap.jsda mesma maneira que incluí slick.jsno exemplo acima. Para o valor do shim, você pode tentar usar isso 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }:, conforme explicado aqui: stackoverflow.com/a/13556882/3763649

Andrea

Veja meu 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!']);

Meu minicart para de trabalhar com isso

anujeet 28/17/17

@anujeet É melhor abrir outra pergunta com esse problema, relatando o require-config.js e se houver alguns erros no console javascript. Se você ligar a sua pergunta aqui eu vou ser feliz para ajudá-lo :)

Andrea

quando incluir mais js eu tenho erros "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

7

Duplique o arquivo:

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

Para

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 maiores informações:

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

Boa sorte!

BTW leia o funcionário devdocs frontend do magento para obter o básico :)

Goldy
fonte

Como o script do Bootstrap requer que o JQuery seja inicializado, incluí-lo na cabeça não funcionará. Leia este documento oficial. para mais informações. :)

VS

6

Você pode adicionar arquivos JS usando xml como abaixo. Isso adicionará js em todas as páginas.

Com módulo personalizado:

Crie um default.xmlarquivo no seu 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
fonte

2

O método de adicionar js usando o default_head_blocks.xmlarquivo não funcionará para plug-ins JQuery de terceiros. Portanto, se você deseja adicionar plugins JQuery personalizados e usá-los, precisará usar o requirejs-config.jsarquivo

Para responder suas perguntas uma a uma:

1) e 2) Você não precisa criar um módulo para adicionar o requirejs-config.jsarquivo. Você pode simplesmente adicioná-lo neste local:

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

Consulte esta resposta para criar um requirejs-config.jsarquivo adequado .

3) Você precisará listar as dependências do seu arquivo js antes de escrever seus scripts.

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

O código acima diz que você precisará de jquery e jquery ui para seus scripts.

4) Você não precisa usar o define([, a menos que esteja criando um plugin javascript.

5) Não, você não precisa editá-los, mas precisará especificar a dependência deles usando o requirejs-config.jsarquivo. Se você tem owl.carousel.min.jsem <vendor>/<theme>/web/js/owl.carousel.min.js, seu requirejs-config.jsarquivo será parecido com este:

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

No código acima, lembre-se de que não existe .jso arquivo. E agora para usá-lo em seus js

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

Se tudo funcionar bem, você deverá colocar os links do rodapé em um controle deslizante.

6) e 7) Basta usar o método sugerido por @Goldy para adicionar seus js. Ele adicionará seu arquivo js a todas as páginas.

Para ler mais, você pode ver esta postagem

Espero que isto ajude.

VS
fonte

1

É assim que adiciono a biblioteca dotdotdot no meu tema personalizado magento2.

1. Faça o download e adicione a Biblioteca Js ao seu tema, seguindo o caminho:

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

2. Crie o arquivo requirejs de um tema, conforme a seguir, e informe à requirejs a biblioteca recém-adicionada.

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

3. Use a biblioteca adicionada no arquivo js principal do seu tema da seguinte maneira:

// 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 inclua o arquivo js do seu tema na cabeça do seu site da seguinte maneira:

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

Você pode adicionar qualquer biblioteca JS externa e arquivo personalizado em todas as páginas do magento2.

saiid
fonte

Eu tentei isso é o lado admin, js está chegando corretamente, mas resultado esperado não vem

Naveenbos

Boa resposta. Vou tentar. Existe uma maneira de especificar uma determinada página onde o arquivo js é necessário.?

Mohammed Joraid 14/03

Para uma página específica, mova o conteúdo "default_head_blocks.xml" no exemplo acima para o seu arquivo de layout específico. Por exemplo, no caso da página de detalhes do produto, adicione esse xml em app / design / frontend / Namespace / themename / Magento_Catalog / layout /

catalog_product_view.xml

Como adicionar arquivo JS no front-end para todas as páginas

Respostas:

Opcional: Incluindo biblioteca de terceiros