Cómo activar una actualización de minicart después de agregar al carrito


10

Tengo la siguiente clase que estoy usando para probar agregar al carrito de forma personalizada;

use Magento\Framework\App\Action;
use Magento\Checkout\Model\Cart;

class Add extends Action\Action
{
    protected $cart;

    public function __construct(
        Action\Context $context,
        Cart $cart
    ){
        $this->cart = $cart;
        parent::__construct($context);
    }

    public function execute()
    {
        $this->cart->addProductsByIds([1])
            ->save();
    }
}

Esto funciona muy bien. Cuando ve el carrito, muestra mi artículo, todo se ve bien en la base de datos, etc. Sin embargo, el minicart todavía se muestra como si no hubiera artículos en la cesta.

Si luego agrego otro producto al carrito usando el botón "agregar al carrito" en el producto o en las páginas de listado, se agrega al carrito y actualiza el minicart para mostrar ambos artículos.

¿Dónde activa el minicart para actualizarse o cómo sabe el minicart que necesita actualizarse?

Respuestas:


36

Gracias por tu ayuda :)

He encontrado cómo activarlo, debe configurar un sections.xmletc / frontend interno de su módulo que le dice a Magento qué secciones actualizar para una llamada Ajax dada. Aquí hay un ejemplo;

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="[frontName]/[ActionPath]/[ActionName]">
        <section name="cart"/>
    </action>
</config>

Una vez que mi llamada Ajax ha finalizado, [frontName]/[ActionPath]/[ActionName]Magento realiza otra llamada a / customer / section / load pasando las secciones para cargar.

De manera predeterminada, solicita cualquier mensaje, pero si ha configurado sus secciones.xml correctamente, también verá los nombres de sección que ha definido allí.


@ smartic, buena información que obtuve de aquí
Amit Bera


Impresionante, estaba trabajando en actualizar otros bloques a través de ajax y esto me llevó allí. Gracias por postear tu solución.
Eirik

@Smartie, ¿hay alguna forma de actualizar la sección del carrito después de una llamada a la API de Magento?
ND17

1
@Smartie Para agregar múltiples productos, solo se actualiza la cantidad del primer producto y el recuento de productos restantes no se muestra en el mini carrito. ¿Necesitamos agregar algo más aquí?
JOSHI PROFUNDO

6

Esto no está directamente relacionado con la pregunta, pero si está actualizando el carrito a través de llamadas AJAX en require.jsarchivos Magento normales , puede Magento_Customer/js/customer-datasolicitar el objeto y pedirle al minicart que también se actualice de esta manera:

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

Fuente: https://github.com/magento/magento2/issues/5621


Así que lo hice aquí buscando una solución para mi page_layout personalizada. Mi recuento de mini carritos siempre fue 0 cuando fui a cualquiera de mis páginas personalizadas. Terminé teniendo que correr customerData.invalidate(sections);y luego Magento pudo hacer el resto.
James Harrington

2

En el escaparate si bucea en la fuente en el área de minicart

<div data-block="minicart" class="minicart-wrapper">
  <a class="action showcart" 
   data-bind="scope: 'minicart_content'">
     ... 
  </a>

   <script type="text/x-magento-init">
   {
    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": {"components":{....}
     }
   }
</script>
</div>

Como puede ver aquí, magento2 ejecuta componentes dentro de la etiqueta de script y datos de enlace dinámico para bloquear el uso de minicart knockoutJs

Algo interesante que descubro

\vendor\magento\module-checkout\view\frontend\layout\default.xml

Desde el diseño de pago. Define un componentcontenido de minicart para obtener datos Continuar ver Magento_Checkout/js/view/minicartverá

.....
$('[data-block="minicart"]').on('contentLoading', function(event) {
      addToCartCalls++;
      self.isLoading(true);
});
.....
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.