Magento2 - Como estender o widget jQuery (configurable.js)


15

Estou criando uma extensão que substitui o rótulo de opções configuráveis ​​padrão 'Escolha uma opção ...' pelo nome do atributo, por exemplo 'Escolha uma cor ...'.

Como posso estender (não substituir!) O widget jQuery configurable.js e modificar apenas esta linha?

Sei pela documentação que posso substituir um widget jQuery, então fiz:

define([
    'jquery',
    'jquery/ui',
    'configurable' // usually widget can be found in /lib/web/mage dir
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {

    });

    return $.silvan.configurable;
});

Como posso inicializar este arquivo? Devo carregá-lo via requirejs-config? A função de mapa é apenas para substituir, certo?

É possível modificar apenas esta linha? É chamado a partir desta função:

_fillSelect: function (element) {}

Respostas:


26

Primeiramente, você precisa ter certeza de que seu módulo possui uma Magento_ConfigurableProductsequência em module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
        </sequence>
    </module>
</config>

Certifique-se de gerar novamente a lista de componentes config.php, caso contrário a sequência será ignorada ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Em seguida, adicione o requirejs-config.jsarquivo no view/frontenddiretório com o código:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_ModuleName/js/configurable'
        }
    }
};

Por fim, adicione o configurable.jsarquivo no view/frontend/web/jsdiretório com:

define([
    'jquery',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {
        //code you want to override
    });

    return $.silvan.configurable;
});

Você não pode modificar uma única linha, mas pode modificar uma única função dentro.


Como funciona a modificação de uma função? Como ligar para os pais?
— Alex

Você pode chamar outras funções que não sejam modificadas, como se fizessem parte do seu widget. Seu silvan.configurableherda automaticamente tudo do pai.
— Bartłomiej Szubert 18/08/16

2
Isso funciona muito bem, obrigado @Ideo! A recompensa será dada em 7 horas (limite de troca de pilha). @ Alex, você pode chamar o pai usando o this._super (); função. Veja: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
— Silvan

há mais alguma coisa para fazer? Porque meu arquivo de costume não vai ficar carregado ... fez exatamente como está descrito acima :-(
— roman204

11
Isso funciona muito bem! @ roman204 Eu tenho o mesmo problema: verifique se você tem o nó "sequence" no seu arquivo module.xml. Então é importante recarregar a ordem do módulo. A única maneira de fazer isso no momento é desativar e reativar o módulo em que você coloca a "sequência" no arquivo module.xml. (Mais informações: veja a parte azul desta página: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
— Stijn Duynslaeger - Echron
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.