Magento 2: requirejs-config.js en los temas?

19

¿Es posible incluir un requirejs-config.jsarchivo (o configurar RequireJS) a través de un tema de Magento? ¿O la capacidad está reservada para los módulos de Magento? La información de los documentos de desarrollo sobre la estructura del tema es ambigua en este punto.

Dev docs no menciona nada sobre RequireJS; sin embargo, los temas sí incluyen a, lo webque significa que javascript se puede combinar con ellos. Si javascript se puede agrupar con un tema, eso significa que un módulo RequireJS se puede agrupar con un tema, y ​​si un módulo RequireJS se puede agrupar con un tema, ese módulo puede requerir una configuración específica de RequireJS.

Mi ingenua suposición sería que los temas tendrían esta capacidad, pero no he podido encontrar ninguna documentación de esta manera u otra, y no tengo una tarde libre para pasar haciendo el código requerido de espeleología en el requirejs-config.jsarchivo de Magento incluido.

Alan Storm
fuente
Hola @lan ¿Puedes por favor investigar eso? => magento.stackexchange.com/questions/253507/…
Rohan Hapani
1
@RohanHapani Realmente no estoy desarrollando M2 en estos días, así que no puedo decir lo mejor.
Alan Storm

Respuestas:

10

en realidad puede incluir un require-config.js en los directorios del módulo de temas.

El problema es (en realidad para nuestro equipo frontend) que parece que no hay posibilidad de anular la configuración, sino de extenderla.

Entonces, para tomar el módulo Magento_Theme como ejemplo aquí, si agrega require-config.js en <theme_base_dir>/Magento_Themedir, la configuración se agregará al archivo require-config.js generado y también se agregará la configuración del módulo Magento_Theme.

Para responder a su pregunta, también traté de agregar require-config.js bajo el <theme_base_dir>/webdirectorio de temas y también bajo el directorio raíz de temas. Ambos no funcionaron. actualización: en realidad de acuerdo con la respuesta a continuación, es posible colocándolo en el directorio base del tema

Entonces, la respuesta sería básicamente sí, ya que podría agregar cualquier requisito js en cualquier módulo (los archivos js relacionados con el tema pueden colocarse mejor bajo el <theme_base_dir>/Magento_Themedirectorio)

Aunque diría que debería existir la posibilidad de agregar un tema relacionado con require-config.js fuera de cualquier módulo (tal vez desactive el módulo dado) y también debería ser posible anular un módulo require-config.js.

Ambos parecen no ser posibles cajeros automáticos.

=== ACTUALIZACIÓN ===

En realidad, parece posible tener un tema específico require-config.js. Ver la respuesta de @Gareth Daine a continuación

David Verholen
fuente
Re: "bajo el Magento_Theme" podría ser más explícito: no está 100% claro a qué carpeta de un tema y / o módulo se refiere. Significado explícitopath/to/theme/files/[etc/Magento_Theme
Alan Storm
Me refería a la anulación del módulo acutal en su tema. Entonces, para el módulo Magento / Theme, require-config.js sería <theme_base_dir> /Magento_Theme/require-config.js donde Magento_Theme es el nombre real del módulo
David Verholen
agradable, actualicé la respuesta para hacerlo más claro
David Verholen
Entonces, ¿estoy en lo cierto al pensar que un archivo requirejs-config.js no funciona en app / design / frontend / <Vendor> / <theme> / web / js?
Gareth Daine
Dice en los documentos que los recursos de JavaScript se pueden especificar a nivel de tema para todas las bibliotecas en app / design / {area} / {Vendor} / {theme} / web.
Gareth Daine
15

OK, creo que lo resolví y creo que la documentación es ambigua y necesita actualizarse para aclarar el proceso.

Moví mi requirejs-config.jsdesde dentro de los directorios web/jsy webrespectivamente para ambos Magento_Themey la raíz de mi tema en <Vendor>/<theme>y ahora mi configuración de RequireJS se fusionó en la principal requirejs-config.jscon todas las demás inclusiones .

Por lo tanto, parece que debe incluir el requirejs-config.jsarchivo en las siguientes ubicaciones según los requisitos del tema / módulo.

Nivel de tema

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

Nivel de módulo

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

Entonces, en su requirejs-config.jstema, debe asignar su componente a una ruta y luego usarlo shimpara declarar cualquier dependencia:

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

Luego, deberá crear una plantilla para mantener la inicialización de los componentes a través de una <script>etiqueta (a menos que la adjunte directamente a un elemento dentro de un archivo .phtml) si esta es la ruta que desea seguir, incluya el siguiente contenido:

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

Alternativamente, vincúlelo a un elemento:

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

A continuación, basta con incluir la plantilla .phtml en sus instrucciones de diseño, por ejemplo, coloqué la mina dentro de la default.xmlubicada en app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutbajo el nodo del cuerpo y se hace referencia:

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

Gareth Daine
fuente
El {} en "js / component": {} se usa para pasar opciones al componente
Vincent Hornikx
2

No tuve suficiente representante para hacer de esto un comentario, pero solo para notar que la respuesta de Gareth no funcionó para mí.

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

Envolviendo el 'componente': 'js / component' con '*':{}hizo el truco.

Además, en lugar de crear un archivo de plantilla, agregué el siguiente código en la parte superior de 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>
Justin
fuente
1

si requirejs-config.js se puede agregar al tema de la siguiente manera. 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
Intenté agregar una biblioteca de requirejs-config.jsesta manera. Sin embargo, RequireJS intenta cargar js/some.library.jsdesde la raíz en lugar de desde el directorio del tema.
fritzmg
Ah, tienes que omitir la .jsextensión ... tonto :)
fritzmg