Estendendo / substituindo JS no Magento 2

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

Eu imagino que você não deveria substituir o arquivo, mas substituir as funções no objeto carregado pelo arquivo.

— Peter O'Callaghan /

Respostas:

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

@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

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

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

Esse é um argumento justo, mas adicionamos redirecionamentos 301 quando os tópicos são movidos, para minimizar o risco de 404s.

— 9788 Steve