Minicart emergente cuando agrego un producto al carrito magento 2

Estoy usando magento 2.0.7, y lo que estoy tratando de hacer es abrir el carrito (el minicart ajax del carrito superior derecho) cuando le agrego un producto, básicamente lo activa. Intenté agregar la clase "showcart" a mis clases de botones de agregar al carrito, pero si lo hago, el botón simplemente abre el carrito y ya no agrega el producto.

Esta es mi primera respuesta en este sitio. He estado luchando tratando de hacer que esto funcione durante los últimos dos días y finalmente pude hacerlo funcionar, así que pensé que sería bueno compartirlo.

Primero que nada necesitas crear un módulo:

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

Paso 1. Necesita agregar una plantilla al sitio. La forma de hacerlo es utilizando default.xml

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

Paso 2. Luego, dentro de minicart_open.phtml necesitamos llamar a nuestro archivo js (componente) adjuntándolo al div padre del minicart. En este caso, [bloque de datos = 'minicart']. Vea este enlace para más detalles.

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

Paso 3. Y finalmente, dentro de minicart_open.js, el 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");
            });
        });
    }
});

Básicamente, este código extiende la funcionalidad del archivo vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsy dice que una vez que se completa la llamada AJAX (contentUpdated), se debe abrir el minicart.

Y eso es todo, una tarea simple con mucha teoría detrás. Espero eso ayude.

Se puede hacer simplemente modificando el archivo minicart.js.

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

En initialize: function, verá

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

Reemplace la función con 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);
            });
        });

Puede cambiar el tiempo de espera según sus necesidades.

cargue el archivo y limpie el caché ejecutando el comando

php bin/magento cache:clean

¡Salud!

solución alternativa: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jslínea de verificación : 100

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

Podríamos agregar un archivo js personalizado:

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

En el js:

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

Simplemente puede usar este código en su minicart.phtml debajo de su código de plantilla. Estoy usando este código y funciona para mejor. puedes probarlo. Gracias.

<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 respuesta anterior funciona pero le falta la llave de cierre:

            $('[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);
            });
        });