Magento 2: Wymagany-config.js w motywach?

19

Czy można dołączyć requirejs-config.jsplik (lub inaczej skonfigurować RequireJS) za pomocą motywu Magento? A może funkcja jest zarezerwowana dla modułów Magento? Informacje deweloperów na temat struktury motywu są niejednoznaczne w tym punkcie.

Dokumenty deweloperów nie wspominają nic o RequireJS - jednak motywy zawierają takie, webco oznacza, że ​​javascript można z nimi łączyć. Jeśli skrypt javascript można powiązać z kompozycją, oznacza to, że moduł RequireJS można połączyć z kompozycją, a jeśli moduł RequireJS można połączyć z kompozycją, moduł ten może wymagać określonej konfiguracji RequireJS.

Moim naiwnym założeniem byłoby, że motywy miałyby taką możliwość, ale nie byłem w stanie znaleźć żadnej dokumentacji na ten czy inny sposób i nie mam wolnego popołudnia, aby spędzić wymaganą pisownię kodu w requirejs-config.jspliku Magento, w tym.

Alan Storm
źródło
Cześć @Alan. Czy możesz spojrzeć na to? => magento.stackexchange.com/questions/253507/…
Rohan Hapani
1
@RohanHapani W dzisiejszych czasach nie robię naprawdę rozwoju M2, więc nie mogę powiedzieć, że jest na czele.
Alan Storm,

Odpowiedzi:

10

możesz faktycznie dołączyć plik config-config.js do katalogów modułów motywu.

Problemem jest (tak naprawdę dla naszego zespołu frontendowego), że wydaje się, że nie ma możliwości przesłonięcia konfiguracji, ale rozszerzenia konfiguracji.

Tak więc, aby wziąć przykład Magento_Theme na przykład tutaj, jeśli dodasz plik wymaga-config.js w katalogu <theme_base_dir>/Magento_Theme, konfiguracja zostanie dodana do wygenerowanego pliku wymagania-config.js, a także konfiguracja z modułu Magento_Theme.

Aby odpowiedzieć na twoje pytanie, próbowałem również dodać plik config-config.js w katalogu motywów, <theme_base_dir>/weba także w katalogu głównym motywów. Oba nie działały. aktualizacja: właściwie zgodnie z odpowiedzią poniżej, jest to możliwe poprzez umieszczenie go w bazie motywu reż

Tak więc odpowiedź byłaby w zasadzie tak, ponieważ można dodać dowolne wymagania js w dowolnym module (pliki js związane z tematem najlepiej umieścić w katalogu <theme_base_dir>/Magento_Theme)

Chociaż powiedziałbym, powinna istnieć możliwość dodania związanego z kompozycją pliku wymagań-config.js poza dowolnym modułem (być może dezaktywujesz dany moduł), a także powinna istnieć możliwość zastąpienia modułów wymagań-config.js.

Oba wydają się niemożliwe bankomat.

=== AKTUALIZACJA ===

w rzeczywistości wydaje się, że możliwe jest posiadanie pliku config-config.js specyficznego dla tematu. Zobacz odpowiedź @Garetha Daine'a poniżej

David Verholen
źródło
Re: „Pod Magento_Theme” możesz być bardziej wyraźny - nie jest w 100% jasne, do którego folderu w motywie i / lub module się odnosisz. Wyraźne znaczeniepath/to/theme/files/[etc/Magento_Theme
Alan Storm,
Miałem na myśli zastąpienie modułu acutal w twoim motywie. Tak więc dla modułu Magento / Theme wymagany plik config-config.js byłby <katalog_tematowy_theme> /Magento_Theme/require-config.js, gdzie Magento_Theme to rzeczywista nazwa modułu
David Verholen
fajnie, zaktualizowałem odpowiedź, aby była bardziej przejrzysta
David Verholen
Czy mam rację, że plik Requjs-config.js nie działa w app / design / frontend / <Vendor> / <theme> / web / js?
Gareth Daine
Mówi w dokumentach, że zasoby JavaScript można określić na poziomie kompozycji dla wszystkich bibliotek w app / design / {area} / {Vendor} / {theme} / web.
Gareth Daine
15

OK, myślę, że mogłem to rozwiązać i uważam, że dokumentacja jest niejednoznaczna i wymaga aktualizacji w celu wyjaśnienia procesu.

Przeniosłem moje requirejs-config.jsz wewnątrz web/jsi webkatalogów odpowiednio dla obu Magento_Themei katalogu głównego mojej kompozycji w, <Vendor>/<theme>a teraz moja konfiguracja RequireJS jest scalona z głównym requirejs-config.jsze wszystkimi innymi włącznikami .

Wygląda więc na to, że musisz dołączyć requirejs-config.jsplik w następujących lokalizacjach w zależności od wymagań motywu / modułu.

Poziom motywu

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

Poziom modułu

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

Tak więc w swoim requirejs-config.jsmotywie powinieneś odwzorować komponent na ścieżkę, a następnie użyć shimdo zadeklarowania zależności:

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

Następnie musisz utworzyć szablon do przechowywania inicjalizacji komponentów za pomocą <script>znacznika (chyba że podłączysz go bezpośrednio do elementu w pliku .phtml), jeśli jest to trasa, którą chcesz zejść, dołącz następującą treść:

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

Alternatywnie, powiąż go z elementem:

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

Następnie po prostu dołącz szablon .phtml do instrukcji układu, na przykład umieściłem mój w obszarze default.xmlznajdującym się app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutpod węzłem body i wspomniałem:

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

Gareth Daine
źródło
{} W „js / component”: {} służy do przekazywania opcji do komponentu
Vincent Hornikx
2

Nie miałem wystarczającej liczby przedstawicieli, aby skomentować ten komentarz, ale tylko zauważyć, że odpowiedź Garetha nie do końca działała dla mnie.

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

Owijanie „komponentu”: „js / komponent” '*':{}załatwiło sprawę.

Zamiast tworzyć plik szablonu, dodałem poniższy kod na górze 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
źródło
1

Tak requirejs-config.jsmożna dodać do motywu w następujący sposób. W ten sposób dodaję bibliotekę dotdotdot do niestandardowego motywu magento2.

1. Pobierz i dodaj bibliotekę Js do swojego motywu, postępując zgodnie ze ścieżką:

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

2. Utwórz plik wymagań dla motywu w następujący sposób i powiadom go o nowo dodanej bibliotece.

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

3. Użyj dodanej biblioteki w głównym pliku js kompozycji w następujący sposób:

// 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. i dołącz plik js motywu do głowy witryny w następujący sposób:

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

Możesz dodać dowolną zewnętrzną bibliotekę JS i niestandardowy plik na każdej stronie w magento2.

saiid
źródło
W requirejs-config.jsten sposób próbowałem dodać bibliotekę . Jednak RequireJS następnie próbuje załadować js/some.library.jsz katalogu głównego zamiast z katalogu kompozycji.
fritzmg
Ach, musisz pominąć .jsrozszerzenie ... głupie :)
fritzmg