Estensione / sostituzione di JS in Magento 2

Dato che Magento2 sta usando RequireJS per caricare gli script e non c'è più cartella skin , mi sono bloccato con un problema:

Come posso sostituire il file JS del modulo Magento con la mia versione modificata?

Ad esempio: opc-checkout-method.js che appartiene all'estensione Magento_Checkout. Per quanto posso vedere, non è definito nel file requirejs-config.js.

La mia estensione viene caricata dopo Magento_Checkout , quindi i suoi dati requirejs-config.js vengono aggiunti alla fine del risultante file requestjs-config.

O dovrei farlo in qualche altro modo, senza sostituire l'intero script?

— DmitryR
fonte

Immagino che non dovresti sostituire il file tanto quanto sostituire le funzioni sull'oggetto caricato dal file.

— Peter O'Callaghan,

Risposte:

Non esiste più la cartella skin ma è comunque possibile utilizzare i temi.

Come prova del concetto ho usato il tuo esempio con op-checkout-method.jsquesto e questo.

presupposti:

Magento2-beta11 installato
Tema predefinito attivo (vuoto).
Nessun file generato nella pub/staticcartella (rimuovere la cartella pub / static / frontend)

Azioni:

Copiato il op-checkout-method.jsfile dalla posizione del modulo app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jsal tema vuoto inapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
modificato il file clone e aggiunto un console.log('something')o alert('something')nella _createfunzione del mage.opcCheckoutMethodwidget.
svuotare la cache del browser.

Risultato:

Quando viene caricata la pagina di checkout vedo il mio avviso visualizzato o il testo registrato nella console.

Informazioni correlate:

Se corro da cli php dev/tools/Magento/Tools/View/deploy.php(lo script che pubblica le risorse statiche) il mio nuovo file js viene inseritopub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[MODIFICARE]

Ho trovato un modo per farlo tramite un modulo.

In [Namespace]/[Module]/view/frontend/requirejs-config.jsaggiungi questo:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Quindi crea il file [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jscon il tuo contenuto.

A scopo di test ho clonato il file originale e l'ho appena aggiunto a console.lognella _createfunzione.

Ricorda anche di rigenerare le risorse pubbliche per il frontend.

— Marius
fonte

Grazie Marius! È possibile fare cose simili all'interno dell'estensione?

— Dmitry R

Non penso che tu lo faccia da un'estensione. ciò non è stato possibile in Magento 1 a meno che non sia stato modificato completamente il modello di pagamento. Ma cercherò un modo per farlo.

— Marius

Grazie ancora, Marius. Sto cercando di implementare il checkout personalizzato, che ha la precedenza su quello predefinito e sono bloccato con le sostituzioni JS.

— Dmitry R

@DmitryR. Vedi il mio aggiornamento alla risposta.

— Marius

il posto per requirejs-config.js è ora Vendor / Module / view / frontend / requirejs-config.js

— Eugen Bogdanovich

Ecco il documento ufficiale sull'estensione / sostituzione dei componenti JS predefiniti: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Il feedback è il benvenuto!

— alex
fonte

Benvenuto in MagentoSE. Questa risposta sarebbe più utile per gli utenti futuri se hai aggiunto la risposta qui, anziché solo il link. Se il collegamento si interrompe in futuro, gli utenti non troveranno le informazioni a cui fai riferimento.

— AreDubya,

Questo è un punto giusto, ma aggiungiamo 301 reindirizzamenti quando gli argomenti si spostano in modo da ridurre al minimo il rischio di 404 secondi.

— Steve Johnson,