Pop-up minicart quando aggiungo un prodotto al carrello magento 2

Sto usando Magento 2.0.7, e quello che sto cercando di fare è di far apparire il carrello (il carrello a destra in alto a destra) quando aggiungo un prodotto, fondamentalmente lo innesco. Ho provato ad aggiungere la classe "showcart" alle mie classi di pulsanti Aggiungi al carrello, ma se lo faccio, il pulsante apre il carrello e non aggiunge più il prodotto.

Questa è la mia prima risposta su questo sito. Ho faticato a cercare di far funzionare questo lavoro negli ultimi due giorni e sono stato finalmente in grado di farlo funzionare, quindi ho pensato che sarebbe stato bello condividerlo.

Prima di tutto devi creare un modulo:

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

Passaggio 1. È necessario aggiungere un modello al sito. Il modo per farlo è utilizzando il default.xml

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

Passaggio 2. Quindi all'interno di minicart_open.phtml dobbiamo chiamare il nostro file js (componente) collegandolo al div padre della minicart. In questo caso, [data-block = 'minicart']. Vedi questo link per maggiori dettagli.

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

Passaggio 3. E infine, all'interno di minicart_open.js, il codice magico:

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

Fondamentalmente questo codice estende la funzionalità del file vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jse dice che una volta completata la chiamata AJAX (contentUpdated), la minicart dovrebbe essere aperta.

E questo è tutto, un compito semplice con molta teoria alle spalle. Spero che sia d'aiuto.

Può essere fatto semplicemente modificando il file minicart.js.

Navigare verso vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Sotto inizializza: funzione, vedrai

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

Sostituisci la funzione con questo codice.

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

È possibile modificare il timeout in base alle proprie esigenze.

caricare il file e pulire la cache eseguendo il comando

php bin/magento cache:clean

Saluti!

soluzione alternativa: check vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsline: 100

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

Potremmo aggiungere un file js personalizzato:

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

Nel js:

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

Semplicemente puoi usare questo codice nel tuo minicart.phtml sotto il tuo codice di modello. Sto usando questo codice e funziona meglio. Puoi provarlo. Grazie.

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

Questa risposta sopra funziona ma manca la parentesi graffa di chiusura:

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