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


15

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.

Respostas:


36

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.


Funcionou como um encanto. Tks!
medina

Parece uma boa solução, por que isso precisa ser um módulo? Fazer essas alterações no seu tema não teria o mesmo efeito?
Ben Crook

Além da resposta acima de @pinicio: Note-se que a solução só funcionará se ajax é usado para o suplemento ao carrinho função: magento.stackexchange.com/questions/125681/...
Soeren

1
Funciona na atualização do carrinho, como quando adicionamos o produto, mas não deve funcionar quando removemos o item do carrinho. mas está funcionando naquele momento também.
Ronak Chauhan 12/04/19

Se eu tentar excluir um item do mini carrinho, item não é deleting..ie) uma vez que eu clique no ícone de exclusão, somente após a atualização da página, o item excluído está sendo refleted
Sushivam

6

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!


1
i tentou um presente, mas não funcionou, eu corou o cache
inrsaurabh

Verifique se você não substituiu este fornecedor de arquivos / magento / Magento_Checkout / view / web / js / view / minicart.js no seu tema.
precisa saber é o seguinte

Você nunca deve alterar os arquivos principais diretamente. Em vez disso, altere-o no seu tema ou em um módulo personalizado.
pinicio 29/11

Ainda bem que ajudou você :)
Ajendra Panwar

1
Funcionou como um encanto no Magento 2.2.3. Tks montões!
medina

4

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...}

2

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>

Graças ao seu trabalho ... Eu quero aprender o fluxo do Magento JS. Como funciona, por favor, compartilhe algum link
55840 8/19

1

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);
            });
        });
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.