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.