Magento 2: requirejs-config.js dans les thèmes?

Est-il possible d'inclure un requirejs-config.jsfichier (ou de configurer autrement RequireJS) via un thème Magento? Ou la capacité est-elle réservée aux modules Magento? Les informations dev docs sur la structure du thème sont ambiguës à ce point.

Les documents de développement ne mentionnent rien à propos de RequireJS - cependant, les thèmes incluent un webqui signifie que javascript peut être fourni avec eux. Si javascript peut être groupé avec un thème, cela signifie qu'un module RequireJS peut être groupé avec un thème, et si un module RequireJS peut être groupé avec un thème, ce module peut nécessiter une configuration RequireJS spécifique.

Mon hypothèse naïve serait que les thèmes auraient cette capacité, mais je n'ai pas pu trouver de documentation sur l'un ou l'autre, et je n'ai pas un après-midi libre pour passer à faire la spéléologie de code requise sur le requirejs-config.jsfichier de Magento, y compris.

vous pouvez réellement inclure un require-config.js dans vos répertoires de modules de thèmes.

Le problème est (en fait pour notre équipe frontend) qu'il ne semble pas y avoir de possibilité de remplacer la configuration, mais d'étendre la configuration.

Donc, pour prendre le module Magento_Theme comme exemple ici, si vous ajoutez un require-config.js sous <theme_base_dir>/Magento_Themedir, la config sera ajoutée au fichier require-config.js généré et aussi la config du module Magento_Theme sera ajoutée.

Pour répondre à votre question, j'ai également essayé d'ajouter un require-config.js sous le répertoire de thèmes <theme_base_dir>/webet également sous le répertoire racine de thèmes. Les deux n'ont pas fonctionné. mise à jour: en fait selon la réponse ci-dessous, c'est possible en le plaçant dans le répertoire de base du thème

Donc, la réponse serait essentiellement oui, car vous pouvez ajouter n'importe quelle exigence js sous n'importe quel module (les fichiers js liés au thème peuvent être mieux placés sous le <theme_base_dir>/Magento_Themedir)

Bien que je dirais, il devrait y avoir la possibilité d'ajouter un thème lié à require-config.js en dehors de n'importe quel module (peut-être que vous désactivez le module donné) et il devrait également être possible de remplacer un module require-config.js.

Les deux ne semblent pas possibles atm.

=== MISE À JOUR ===

en fait, il semble possible d'avoir un thème spécifique require-config.js. Voir la réponse de @Gareth Daine ci-dessous

OK, je pense que je l'ai résolu et je pense que la documentation est ambiguë et doit être mise à jour pour clarifier le processus.

J'ai déplacé mon requirejs-config.jsdepuis les répertoires web/jset webrespectivement pour les deux Magento_Themeet la racine de mon thème dans <Vendor>/<theme>et maintenant ma configuration RequireJS est fusionnée dans le principal requirejs-config.jsavec toutes les autres inclusions .

Il semble donc que vous devez inclure le requirejs-config.jsfichier dans les emplacements suivants en fonction des exigences du thème / module.

Niveau du thème

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

Niveau du module

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

Donc, dans votre requirejs-config.jspour votre thème, vous devez mapper votre composant sur un chemin, puis utiliser shimpour déclarer les dépendances:

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

Ensuite, vous devrez créer un modèle pour contenir l'initialisation des composants via une <script>balise (à moins que vous ne l'attachiez directement à un élément dans un fichier .phtml) si c'est la route que vous souhaitez descendre, incluez le contenu suivant:

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

Vous pouvez également le lier à un élément:

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

Ensuite, incluez simplement le modèle .phtml dans vos instructions de mise en page, par exemple, j'ai placé le mien dans le default.xmlsitué app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutsous le nœud du corps et référencé:

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

N'avait pas suffisamment de représentants pour en faire un commentaire, mais juste pour noter que la réponse de Gareth ne fonctionnait pas tout à fait pour moi.

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

Envelopper le «composant»: «js / composant» avec '*':{}fait l'affaire.

Aussi, plutôt que de créer un fichier modèle, j'ai ajouté le code ci-dessous en haut 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>

Oui requirejs-config.jspeut être ajouté au thème comme suit. C'est ainsi que j'ajoute la bibliothèque dotdotdot dans mon thème personnalisé magento2.

1. Téléchargez et ajoutez la bibliothèque Js dans votre thème en suivant le chemin:

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

2. Créez le fichier requirejs d'un thème comme suit et informez-en la bibliothèque nouvellement ajoutée.

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

3. Utilisez la bibliothèque ajoutée dans le fichier js principal de votre thème comme suit:

// 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. et incluez le fichier js de votre thème dans la tête de votre site comme suit:

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

Vous pouvez ajouter n'importe quelle bibliothèque JS externe et fichier personnalisé sur chaque page de magento2.