Como carregar o arquivo js do módulo personalizado no magento 2?

9

Eu criei o módulo slider do banner para o magento 2. Chamei o arquivo JS usando as seguintes maneiras e funcionando bem. Na classe de bloco, criei a seguinte função

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

e essa função é chamada no bannerslider.phtmlarquivo da seguinte maneira.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

Mas, de acordo com o mecanismo de dependência do jQuery de require.jsComo posso fazer isso?

Praful Rajput
fonte

Respostas:

29

Finalmente, consegui a solução para minha consulta. Gostaria de compartilhá-lo em detalhes como abaixo.

insira a descrição da imagem aqui

Etapa 1: adicione o arquivo js do módulo em<Vendor>/<Module_Name>/view/<area>/web/js/

por exemplo <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Etapa 2: criar requirejs-config.jsarquivo em<Vendor>/<Module_Name>/view/<area>/

por exemplo <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Adicione o seguinte código a requirejs-config.js

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

Nota: você pode definir o nome do seu objeto conforme sua escolha. No meu caso, defini como bannerslidere não adiciono a extensão .js ao nome do arquivo emVendorName_ModuleName/js/flexslider

Etapa 3: chame o functionjs do seu módulo no .phtmlarquivo da seguinte maneira.

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

Está funcionando bem para mim.

Rastreio: use a Netguia para ver o URL solicitado do arquivo js carregado ou não.

insira a descrição da imagem aqui

Praful Rajput
fonte
4
melhor usar 'domReady!' plugin em vez de $ (window) .load (), por exemplo, require (['jquery', 'bannerslider', 'domReady!], function ($) {... código executado somente após dom load})
KAndy
Sim, será muito útil.
Praful Rajput 10/10
@ KAndy depende, se você deseja que o script seja executado por último, não é melhor usar $ (window)? isso não faz com que o script seja executado não apenas quando o DOM é lido, mas quando todos os scripts são executados?
Lachezar Raychev
E dessa maneira não está funcionando para mim ... diz static / adminhtml / Magento / back-end / pt_BR / gift.js 404 (Não encontrado) Limpei o cache e o pub / static ... bot nope .. não está funcionando
Lachezar Raychev
risque isso, está funcionando ... domReady! embora não funcione ... como posso dizer para um script ser executado depois que todos os outros scripts foram carregados ou que não existem na metodologia atual do magent2?
Lachezar Raychev
4

Meu jeito é:

Passo 1

Inclua o arquivo javascript básico de uma extensão usando instruções de layout.

Passo 2

Exija os outros arquivos javascript da extensão do arquivo base com RequireJS:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});
Mage2.PRO
fonte
11
obtive um erro de exigência não está definido, porque meu js é carregado antes de requirejs
simple guy