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

19

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.

Alan Storm
la source
Salut @Alan. Pouvez-vous examiner cela? => magento.stackexchange.com/questions/253507/…
Rohan Hapani
1
@RohanHapaniNe pas vraiment faire de développement M2 ces jours-ci, donc je ne peux pas dire haut de la tête.
Alan Storm

Réponses:

10

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

David Verholen
la source
Re: "sous le Magento_Theme" pourriez-vous être plus explicite - il n'est pas clair à 100% à quel dossier d'un thème et / ou d'un module vous vous référez. Signification explicitepath/to/theme/files/[etc/Magento_Theme
Alan Storm
Je voulais dire le remplacement du module acutal dans votre thème. Donc, pour le module Magento / Theme, le require-config.js serait <theme_base_dir> /Magento_Theme/require-config.js où Magento_Theme est le nom réel du module
David Verholen
agréable, a mis à jour la réponse pour la rendre plus claire
David Verholen
Alors, ai-je raison de penser qu'un fichier requirejs-config.js ne fonctionne pas sous app / design / frontend / <Vendor> / <theme> / web / js?
Gareth Daine
Cela dit dans les documents que les ressources JavaScript peuvent être spécifiées au niveau du thème pour toutes les bibliothèques dans app / design / {area} / {Vendor} / {theme} / web.
Gareth Daine
15

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

Gareth Daine
la source
Le {} dans "js / component": {} est utilisé pour passer des options au composant
Vincent Hornikx
2

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>
Justin
la source
1

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.

saiid
la source
J'ai essayé d'ajouter une bibliothèque de requirejs-config.jscette façon. Cependant, RequireJS essaie ensuite de charger à js/some.library.jspartir de la racine au lieu du répertoire de thème.
fritzmg
Ah, vous devez omettre l' .jsextension ... idiot :)
fritzmg