Como passar variável para js externos no magento 2


9

No magento 1

podemos chamar essa função protótipo em phtml, por exemplo

function ABC(){
     var a = '<?php echo $a;?>'
    alert(a);
 }

mas no magento 2 não podemos adicionar esse tipo de função em phtml, por isso temos que criar requirejs-config.js

var config = {
map: {
    '*': {
        'exam': 'js/example',
    }
}
};

como este e example.js

 function ABC(){

    alert(a);
 }

em phtml

require(['jquery','exam'], function($){
    var a= <?php echo $a; ?>;
});

Estou tentando passar variável assim, mas não está funcionando, como passar variável de phtml para js externos no magento 2

Respostas:


19

Existem duas maneiras de incluir javascript do modelo no Magento 2: o <script type="text/x-magento-init">e o data-mage-initatributo. De qualquer forma, pode ser usado para passar dados para o script dentro da definição json. Por exemplo, usando a tag de script x-magento-init, no modelo você tem:

<script type="text/x-magento-init">
    {
        "*": {
            "js/example": {
                "a": "<?php echo 'Hello from template' ?>"
            }
        }
    }
</script>

E no arquivo JS, você tem:

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

    return function (config) {
        console.log(config); // will output {a: "Hello from template"}
        alert(config.a); // would be equal to alert("Hello from template");
    }
});

Estou usando esse código, mas meu alerta está sendo exibido duas vezes; no entanto, se eu escrever um alerta antes de "return function (config) {", ele aparece apenas um, não consigo encontrar por que os alertas dentro de "return function (config) {"estão chegando duas vezes.
Deepika Janiyani

Ótimas informações, mas como eu obteria acesso aos dados no objeto de configuração de outro arquivo js? Por exemplo, se eu enviasse os dados acima - '"a": "<? Php echo' Hello from template '?>" Para um arquivo js / model / example.js, como eu colocaria esses dados em uma view / arquivo sample.js? Muito Obrigado!
precisa

Tentar transmitir dados entre diferentes arquivos .js parece que provavelmente não funcionaria. Você pode simplesmente passar os dados para as configurações de ambos os arquivos no modelo. Ou, se você tiver alguns dados que deseja que sejam acessíveis a vários arquivos js, poderá usar o mecanismo de 'conteúdo privado' do Magento: devdocs.magento.com/guides/v2.0/config-guide/cache/…, que é o que é usado internamente para o minicarrinho, dados do cliente, comparar produtos etc.
Aaron Allen

2
Como observação, se você tentar isso e não funcionar, verifique se está usando defineou não require. Isso não funciona ao usar require.
Ben Crook

@ Aaron Allen Resposta muito boa
Pandurang
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.