Minicart emergente cuando agrego un producto al carrito magento 2

15

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.

alexcr
fuente

Respuestas:

36

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.

pinicio
fuente
Funcionó a las mil maravillas. Tks!
medina
Parece una buena solución, ¿por qué esto necesita ser un módulo? ¿Hacer esos cambios en tu tema no tendría el mismo efecto?
Ben Crook
Además de la respuesta anterior de @pinicio: Tenga en cuenta que la solución solo funcionará si se usa ajax para la función de agregar al carrito: magento.stackexchange.com/questions/125681/…
Soeren
1
Funciona en la actualización del carrito, ya que cuando agregamos el producto funciona, pero no debería funcionar cuando eliminamos el artículo del carrito. pero está funcionando en ese momento también.
Ronak Chauhan
Si trato de eliminar un artículo del mini carrito, el artículo no se está eliminando ... es decir, una vez que hago clic en el icono de eliminar, solo después de actualizar la página, el artículo eliminado se refleja
Sushivam
6

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!

Ajendra Panwar
fuente
1
probé este pero no funcionó,
limpié
Asegúrese de no anular este archivo vendor / magento / Magento_Checkout / view / web / js / view / minicart.js bajo su tema.
Ajendra Panwar
Nunca debe cambiar los archivos principales directamente. En cambio, cámbielo dentro de su tema o un módulo personalizado.
pinicio
Me alegro de que te haya ayudado :)
Ajendra Panwar
1
Funcionó de maravilla en Magento 2.2.3. Tks montones!
medina
4

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...}
Jonas Chen
fuente
2

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>
Rafiqul Islam
fuente
Gracias está funcionando ... Quiero aprender el flujo de Magento JS. ¿Cómo funciona la cuota favor algún vínculo
55840
1

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);
            });
        });
Rico S
fuente