Estendendo / substituindo JS no Magento 2

34

Como o Magento2 está usando o RequireJS para carregar scripts, e não há mais pasta de capa , eu fiquei com um problema:

Como posso substituir o arquivo JS do módulo Magento pela minha versão modificada?

Por exemplo - o opc-checkout-method.js que pertence à extensão Magento_Checkout. Não está definido no arquivo requirejs-config.js, até onde posso ver.

Minha extensão é carregada após o Magento_Checkout , portanto, seus dados requirejs-config.js são anexados no final do arquivo requirejs-config resultante.

Ou devo fazê-lo de outra maneira, sem substituir o script inteiro?

DmitryR
fonte
11
Eu imagino que você não deveria substituir o arquivo, mas substituir as funções no objeto carregado pelo arquivo.
Peter O'Callaghan /

Respostas:

93

Não há mais pasta de capa, mas você ainda pode usar temas.

Como prova de conceito, usei seu exemplo op-checkout-method.jse este.

Condições prévias:

  • Magento2-beta11 instalado
  • Tema padrão ativo (em branco).
  • Nenhum arquivo gerado na pub/staticpasta (remova a pasta pub / static / frontend)

Ações:

  • Copiou o op-checkout-method.jsarquivo do local do módulo app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jspara o tema em branco paraapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • editou o arquivo clone e adicionou um console.log('something')ou alert('something')na _createfunção do mage.opcCheckoutMethodwidget.
  • cache do navegador limpo.

Resultado:

  • Quando a página de checkout é carregada, vejo meu alerta exibido ou o texto registrado no console.

Informações Relacionadas:

Se eu executar a partir do cli php dev/tools/Magento/Tools/View/deploy.php(o script que publica os recursos estáticos), meu novo arquivo js será colocado empub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[EDITAR]

Eu encontrei uma maneira de fazê-lo através de um módulo.

Em [Namespace]/[Module]/view/frontend/requirejs-config.jsacrescentar o seguinte:

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

Em seguida, crie o arquivo [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jscom seu conteúdo.

Para fins de teste, clonei o arquivo original e apenas adicionei novamente a console.logna _createfunção.

Lembre-se também de regenerar os recursos públicos para o frontend.

Marius
fonte
Obrigado Marius! É possível fazer coisas semelhantes dentro da extensão?
DmitryR
Eu não acho que você faça isso a partir de uma extensão. isso não era possível no magento 1, a menos que você alterasse completamente o modelo de checkout. Mas vou procurar uma maneira de fazer isso.
Marius
Mais uma vez obrigado, Marius. Estou tentando implementar o checkout personalizado, que substitui o padrão, e estou com as substituições JS.
DmitryR
11
@DmitryR. Veja minha atualização para a resposta.
Marius
o lugar para RequireJS-config.js é agora de fornecedor / Módulo / view / cliente / RequireJS-config.js
Eugen Bogdanovich
11

Aqui está o documento oficial sobre a extensão / substituição de componentes JS padrão: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Comentários são bem-vindos!

Alex
fonte
3
Bem-vindo ao MagentoSE. Essa resposta seria mais útil para usuários futuros se você adicionasse a resposta aqui, em vez de apenas o link. Se o link quebrar no futuro, os pesquisadores não encontrarão as informações que você está referenciando.
AreDubya
2
Esse é um argumento justo, mas adicionamos redirecionamentos 301 quando os tópicos são movidos, para minimizar o risco de 404s.
9788 Steve