Jak zastąpić plik HTML za pomocą niestandardowego modułu?

20

Tworzę niestandardowy moduł do metody płatności w Magento 2. Obecnie używam cc-form.html z katalogu dostawcy i moduł działa dobrze. Zobacz ścieżkę poniżej:

vendor / magento / module-payment / view / frontend / web / template / payment / cc-form.html

Czy jest jakiś sposób na zastąpienie pliku HTML?

Uwaga: chciałbym to zastąpić przy użyciu niestandardowego rozszerzenia. Zobacz ścieżkę poniżej:

app / code / Namespace / Module / view / frontend / web / template / payment / cc-form.html

Każda pomoc będzie mile widziana. Dziękuję Ci!

Makwana Ketan
źródło
kiedy używałeś tego formularza, pokaż link lub stronę z mapą.
MrTo-Kane

Odpowiedzi:

34

Rozwiązanie robocze

Wystarczy utworzyć lub edytować plik Requjs-config.js z poniższej ścieżki.

/app/code/Namespace/Module/view/frontend/requirejs-config.js

I umieść poniżej kodu w Requjs-config.js

var config = {
    map: {
        '*': {
          'Magento_Payment/template/payment/cc-form.html': 
              'Namespace_Module/template/payment/cc-form.html'
        }
  }
};

Możemy w ten sposób zastąpić dowolny plik HTML.

Makwana Ketan
źródło
nie działa na plik HTML szablonu e-mail w sprzedaży modułów?
fudu
14

Możesz po prostu dodać plik cc-form.html do modułu płatności motywów.

<mage_dir>/app/design/frontend/{Package}/{themename}/Magento_Payment/web/template/payment/cc-form.html

Możesz zmienić zgodnie z własnymi wymaganiami w powyższym miejscu.

Usuń folder var z katalogu głównego i usuń pub/static/frontendfolder.

Musisz mieć polecenie uruchomienia php bin/magento setup:static-content:deploy

Wyczyść pamięć podręczną przeglądarki i sprawdź.

Rakesh Jesadiya
źródło
Wiem, że będzie działać poprawnie, jeśli umieściłem cc-form.html pod moim motywem. ale tworzę rozszerzenie, więc nie mogę umieścić go pod motywem. muszę umieścić ten plik w katalogu modułu.
Makwana Ketan
1
Dziękuję Rakesh. znalazłem rozwiązanie na stackoverflow.com/questions/37430036/…
Makwana Ketan
9

Zaakceptowane rozwiązanie jest słuszne, ale tutaj kopiuję pełną odpowiedź @AntonGuz z „Przepełnienia stosu” (bardzo dobrze wyjaśnione):

Tak jest. Możesz zajrzeć do publikacji statycznej, aby zobaczyć, jak zbudowana jest ścieżka do zasobu statycznego.

Jak to działa

Każdy zasób jest dostępny ze strony przez jego enter code here„RequireJS ID”. Jest podobny do prawdziwej ścieżki, ale zróżnicowany.

Na przykład plik http://magento.vg/static/adminhtml/Magento/backend/en_US/Magento_Theme/favicon.ico.

To prawdziwa ścieżka /app/code/Magento/Theme/view/adminhtml/web/favicon.ico. Wymagany jest identyfikator JS Magento_Theme/favicon.ico. Oznacza to, że plik może być dostępny za pomocą require("text!Magento_Theme/favicon.ico")lub podobnego polecenia.

Można zauważyć, że identyfikator RequireJS składa się z nazwy modułu i przydatnej części ścieżki (po folderze web).

Jak mogę wymienić plik?

Więc masz plik
vendor/magento/module-payment/view/frontend/web/template/payment/cc-form.html

Na stronie załadowano z src as
http://magento.vg/static/frontend/Magento/luma/en_US/Magento_Payment/template/payment/cc-form.html

Więc jego identyfikator RequireJS to
Magento_Payment/template/payment/cc-form.html

Uwaga dodatkowa: Wewnątrz elementów interfejsu użytkownika jest to równe Magento_Payment/payment/cc-form. Słowa „szablon” i „.html” są dodawane automatycznie.

A teraz możesz zastąpić ten plik dla aplikacji za pomocą konfiguracji RequireJS

var config = {
  "map": {
    "*": {
      "Magento_Payment/template/payment/cc-form.html": 
          "<OwnBrand>_<OwnModule>/template/payment/cc-form.html"
    }
  }
};

Ten fragment kodu umieszczasz w requirejs-config.jspliku w swoim module. To wszystko.

Być może pomoże to komuś zrozumieć, jak to się dzieje.

Siarhey Uchukhlebau
źródło
Jak dodajesz i modyfikujesz plik JS dla tego html
jibin George
4

Nie wiem, od której wersji Magento2 jest wymagana, ale jeśli chcesz zastąpić szablon z modułu Magento_Ui, musisz podać ścieżkę w następujący sposób:

var config = {
    map: {
        "*": {
            'ui/template/form/element/select.html':'Vendor_Module/templates/form/element/select.html'
        }
    }
};

Ponieważ w tym pliku:

vendor / magento / module-ui / view / base / Requjs-config.js

Istnieje mapowanie ścieżki:

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    paths: {
        'ui/template': 'Magento_Ui/templates'
    },
    map: {
        '*': {
            uiElement:      'Magento_Ui/js/lib/core/element/element',
            uiCollection:   'Magento_Ui/js/lib/core/collection',
            uiComponent:    'Magento_Ui/js/lib/core/collection',
            uiClass:        'Magento_Ui/js/lib/core/class',
            uiEvents:       'Magento_Ui/js/lib/core/events',
            uiRegistry:     'Magento_Ui/js/lib/registry/registry',
            consoleLogger:  'Magento_Ui/js/lib/logger/console-logger',
            uiLayout:       'Magento_Ui/js/core/renderer/layout',
            buttonAdapter:  'Magento_Ui/js/form/button-adapter'
        }
    }
};
embed0
źródło