Magento 2: requirejs-config.js nei temi?

È possibile includere un requirejs-config.jsfile (o altrimenti configurare RequireJS) tramite un tema Magento? Oppure la funzionalità è riservata ai moduli Magento? Le informazioni sui documenti di sviluppo sulla struttura del tema sono ambigue a questo punto.

I documenti di sviluppo non menzionano nulla su RequireJS, tuttavia i temi includono un webche significa che javascript può essere associato a loro. Se javascript può essere abbinato a un tema, ciò significa che un modulo RequireJS può essere abbinato a un tema e se un modulo RequireJS può essere abbinato a un tema tale modulo potrebbe richiedere una specifica configurazione RequireJS.

La mia ipotesi ingenua sarebbe che i temi avrebbero questa capacità, ma non sono stato in grado di trovare alcuna documentazione in questo modo o nell'altro, e non ho un pomeriggio libero da spendere facendo il codice richiesto spelunking sul requirejs-config.jsfile di Magento incluso.

puoi effettivamente includere un request-config.js nelle directory dei moduli dei temi.

Il problema è (in realtà per il nostro team di frontend) che non sembra esserci alcuna possibilità, di ignorare la configurazione, ma di estenderla.

Quindi, per prendere qui il modulo Magento_Theme per un esempio, se aggiungi un request-config.js sotto <theme_base_dir>/Magento_Themedir, la configurazione verrà aggiunta al file Require-config.js generato e anche la configurazione dal modulo Magento_Theme.

Per rispondere alla tua domanda ho anche provato ad aggiungere un request-config.js sotto la directory dei temi <theme_base_dir>/webe anche nella directory dei temi . Entrambi non hanno funzionato. aggiornamento: in realtà in base alla risposta di seguito, è possibile posizionandolo nella directory base del tema

Quindi la risposta sarebbe sostanzialmente sì, dal momento che potresti aggiungere qualsiasi requisito js sotto qualsiasi modulo (i file js relativi al tema possono essere posizionati meglio sotto la directory <theme_base_dir>/Magento_Theme)

Anche se direi, dovrebbe esserci la possibilità di aggiungere un tema relativo a request-config.js al di fuori di qualsiasi modulo (forse si disattiva il modulo dato) e dovrebbe anche essere possibile sovrascrivere un modulo request-config.js.

Entrambi sembrano impossibile.

=== === UPDATE

in realtà sembra possibile avere un tema specifico request-config.js. Vedi la risposta di @Gareth Daine di seguito

OK, penso di averlo risolto e credo che la documentazione sia ambigua e debba essere aggiornata per chiarire il processo.

Ho spostato il mio requirejs-config.jsda dentro le directory web/jse webrispettivamente per entrambi Magento_Themee la radice del mio tema su <Vendor>/<theme>e ora la mia configurazione RequireJS è fusa nella principale requirejs-config.jscon tutte le altre inclusioni .

Quindi, sembra che devi includere il requirejs-config.jsfile nelle seguenti posizioni in base ai requisiti del tema / modulo.

Livello del tema

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

Livello del modulo

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

Quindi, nel tuo requirejs-config.jstema devi mappare il componente su un percorso e quindi utilizzare shimper dichiarare eventuali dipendenze:

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

Quindi dovrai creare un modello per contenere l'inizializzazione dei componenti tramite un <script>tag (a meno che non lo colleghi direttamente a un elemento all'interno di un file .phtml) se questo è il percorso che vuoi percorrere, includi il seguente contenuto:

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

In alternativa, associarlo a un elemento:

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

Quindi includi semplicemente il modello .phtml nelle istruzioni del layout, ad esempio, ho inserito il mio all'interno del nodo corpo default.xmlsituato app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutsotto e fatto riferimento:

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

Non avevo un rappresentante sufficiente per rendere questo un commento, ma solo per notare che la risposta di Gareth non ha funzionato del tutto per me.

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

Avvolgere il 'componente': 'js / component' con ha '*':{}fatto il trucco.

Inoltre, anziché creare un file modello, ho aggiunto il codice in basso nella parte superiore di 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>

Sì requirejs-config.jspuò essere aggiunto al tema come segue. Ecco come aggiungo la libreria dotdotdot nel mio tema personalizzato magento2.

1. Scarica e aggiungi Js Library nel tuo tema seguendo il percorso:

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

2. Creare il file requestjs di un tema come segue e far conoscere ai necessjs la libreria appena aggiunta.

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

3. Usa la libreria aggiunta nel file js principale del tuo tema come segue:

// 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 includi il file js del tuo tema nella testa del tuo sito come segue:

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

Puoi aggiungere qualsiasi libreria JS esterna e file personalizzato su ogni pagina in magento2.