Magento 2: requirejs-config.js em temas?


19

É possível incluir um requirejs-config.jsarquivo (ou configurar o RequireJS) através de um tema Magento? Ou o recurso está reservado para os módulos Magento? As informações do desenvolvedor sobre a estrutura do tema são ambíguas a este ponto.

Os documentos do desenvolvedor não mencionam nada sobre o RequireJS - no entanto, os temas incluem um, o webque significa que o javascript pode ser empacotado com eles. Se o javascript puder ser empacotado com um tema, isso significa que um módulo RequireJS pode ser empacotado com um tema e se um módulo RequireJS puder ser empacotado com um tema, esse módulo poderá exigir uma configuração específica do RequireJS.

Minha suposição ingênua de que os temas teriam essa capacidade, mas não consegui encontrar nenhuma documentação dessa maneira ou de outra, e não tenho uma tarde livre para gastar fazendo o spelunking de código necessário no requirejs-config.jsarquivo do Magento, inclusive.


Olá, Alan. Você pode, por favor, investigar isso? => magento.stackexchange.com/questions/253507/…
Rohan Hapani

11
@RohanHapaniNão estou realmente desenvolvendo o M2 hoje em dia, então não posso dizer o que há de melhor.
Alan Storm

Respostas:


10

você pode incluir um require-config.js nos diretórios do módulo de temas.

O problema é (na verdade para a nossa equipe de front-end) que parece não haver possibilidade de substituir a configuração, mas estendê-la.

Portanto, para pegar o módulo Magento_Theme como exemplo aqui, se você adicionar um require-config.js no <theme_base_dir>/Magento_Themediretório, a configuração será adicionada ao arquivo require-config.js gerado e também a configuração do módulo Magento_Theme.

Para responder sua pergunta, também tentei adicionar um require-config.js no <theme_base_dir>/webdiretório de temas e também no diretório raiz de temas. Ambos não funcionaram. update: na verdade, de acordo com a resposta abaixo, é possível colocando-o no diretório base do tema

Portanto, a resposta seria basicamente sim, já que você pode adicionar qualquer requisito js em qualquer módulo (os arquivos js relacionados ao tema podem ser melhor colocados sob o <theme_base_dir>/Magento_Themedir)

Embora eu diria, deve haver a possibilidade de adicionar um tema relacionado a require-config.js fora de qualquer módulo (talvez você desative o módulo fornecido) e também deve ser possível substituir um dos módulos require-config.js.

Ambos parecem não ser possíveis.

=== ATUALIZAÇÃO ===

na verdade, parece possível ter um tema específico require-config.js. Veja a resposta de @Gareth Daine abaixo


Re: "sob o Magento_Theme" você poderia ser mais explícito - não é 100% claro qual pasta em um tema e / ou módulo você está se referindo. Significado explícitopath/to/theme/files/[etc/Magento_Theme
Alan Storm

Eu quis dizer a substituição acutal do módulo em seu tema. Assim, para o módulo Magento / Tema os requerem-config.js seria <theme_base_dir> /Magento_Theme/require-config.js onde Magento_Theme é o nome do módulo real
David Verholen

bom, atualizei a resposta para torná-lo mais claro
David Verholen

Então, estou certo ao pensar que um arquivo requirejs-config.js não funciona em app / design / frontend / <Vendor> / <theme> / web / js?
Gareth Daine 23/02

Diz nos documentos que os recursos JavaScript podem ser especificados no nível do tema para todas as bibliotecas em app / design / {area} / {Vendor} / {theme} / web.
Gareth Daine 23/02

15

OK, acho que posso ter resolvido e acredito que a documentação é ambígua e precisa ser atualizada para esclarecer o processo.

Mudei meu requirejs-config.jsde dentro dos diretórios web/jse webrespectivamente para ambos Magento_Themee a raiz do meu tema em<Vendor>/<theme> e agora minha configuração do RequireJS é mesclada no principal requirejs-config.jscom todas as outras inclusões.

Portanto, parece que você precisa incluir o requirejs-config.js arquivo nos seguintes locais, com base nos requisitos do tema / módulo.

Nível do tema

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

Nível do módulo

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

Portanto, no seu requirejs-config.jstema, você deve mapear seu componente para um caminho e depois usar shimpara declarar quaisquer dependências:

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

Em seguida, você precisará criar um modelo para manter a inicialização dos componentes por meio de uma <script>tag (a menos que você o anexe diretamente a um elemento dentro de um arquivo .phtml). Se esse for o caminho que você deseja seguir, inclua o seguinte conteúdo:

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Como alternativa, vincule-o a um elemento:

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

Em seguida, basta incluir o modelo .phtml nas instruções de layout, por exemplo, coloquei o meu no local default.xmllocalizado app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutabaixo do nó do corpo e referenciei:

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />


O {} no "js / component": {} é usado para passar opções para o componente
Vincent Hornikx

2

Não tinha representante suficiente para fazer disso um comentário, mas apenas para observar que a resposta de Gareth não funcionou muito para mim.

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

O empacotamento do 'component': 'js / component' '*':{}fez o truque.

Além disso, em vez de criar um arquivo de modelo, adicionei o código abaixo na parte superior app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

1

Sim requirejs-config.jspode ser adicionado ao tema da seguinte forma. É 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 da seguinte maneira 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.


Tentei adicionar uma biblioteca requirejs-config.jsdessa maneira. No entanto, o RequireJS tenta carregar a js/some.library.jspartir da raiz e não do diretório do tema.
Fritzmg 12/0218

Ah, você tem que omitir a .jsextensão ... bobo :)
fritzmg
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.