Minicart pop-up quando adiciono um produto ao carrinho magento 2

Estou usando o magento 2.0.7, e o que estou tentando fazer é abrir o carrinho (o carrinho superior direito do ajax) quando adiciono um produto a ele, basicamente o aciono. Tentei adicionar a classe "showcart" às minhas classes de botão adicionar ao carrinho, mas, se o fizer, o botão abre o carrinho e não adiciona mais o produto.

Esta é a minha primeira resposta neste site. Eu tenho tentado fazer isso funcionar nos últimos dois dias e finalmente consegui fazê-lo funcionar, então achei que seria bom compartilhá-lo.

Primeiro de tudo você precisa criar um módulo:

• registration.php
• etc / module.xml
• view / frontend / layout / default.xml
• view / frontend / templates / minicart_open.phtml
• view / frontend / web / js / view / minicart_open.js

Etapa 1. Você precisa adicionar um modelo ao site. A maneira de fazer isso é usando o default.xml

<referenceContainer name="content">
  <block class="Magento\Framework\View\Element\Template" name="minicart.autoopen" template="Company_ModuleName::minicart_open.phtml"/>
</referenceContainer>

Etapa 2. Então, dentro do minicart_open.phtml, precisamos chamar nosso arquivo js (componente), anexando-o à div pai do minicart. Nesse caso, [data-block = 'minicart']. Veja este link para mais detalhes.

<script type="text/x-magento-init">
{
     "[data-block='minicart']" : {
        "Company_ModuleName/js/view/minicart_open" : {}
     }
}
</script>

Etapa 3. E, finalmente, dentro de minicart_open.js, o código mágico:

define(["jquery/ui","jquery"], function(Component, $){
    return function(config, element){
        var minicart = $(element);
        minicart.on('contentLoading', function () {
            minicart.on('contentUpdated', function () {
                minicart.find('[data-role="dropdownDialog"]').dropdownDialog("open");
            });
        });
    }
});

Basicamente, esse código estende a funcionalidade do arquivo vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jse diz que quando a chamada AJAX for concluída (contentUpdated), o minicart deverá ser aberto.

E é isso, uma tarefa simples com muita teoria por trás. Espero que ajude.

Isso pode ser feito simplesmente modificando o arquivo minicart.js.

Navegar para vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Sob initialize: function, você verá

$('[data-block="minicart"]').on('contentLoading', function (event) {

Substitua a função por este código.

$('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
            $('[data-block="minicart"]').on('contentUpdated', function ()  {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");       
                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
            }, 4000);
            });
        });

Você pode alterar o tempo limite conforme sua exigência.

faça upload do arquivo e limpe o cache executando o comando

php bin/magento cache:clean

Felicidades!

solução alternativa: check vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsline: 100

$(document).trigger('ajax:addToCart', form.data().productSku);

Poderíamos adicionar um arquivo js personalizado:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Catalog/js/view/minicart-open": {}
    }
}

Nos js:

$(document).on('ajax:addToCart', function () {#code here...}

Simplesmente, você pode usar esse código no minicart.phtml abaixo do seu código de modelo. Estou usando esse código e ele está trabalhando para melhor. você pode experimentá-lo. Obrigado.

<script type="text/javascript">
    require(['jquery'], function ($) {
        $('.minicart-wrapper').on('contentLoading', function (event) {
            $('[data-block="minicart"]').on('contentUpdated', function () {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
                setTimeout(function () {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });
    });
</script>

Esta resposta acima funciona, mas está faltando a chave de fechamento:

            $('[data-block="minicart"]').on('contentLoading', function (event) {
            addToCartCalls++;
            self.isLoading(true);
                $('[data-block="minicart"]').on('contentUpdated', function ()  {
                    $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");

                setTimeout(function() {
                $('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("close");
                }, 4000);
            });
        });