Pop-up-Minicart, wenn ich ein Produkt in den Warenkorb legen magento 2

Ich verwende magento 2.0.7 und versuche, den Warenkorb (den Ajax-Minicart-Warenkorb oben rechts) zu öffnen, wenn ich ihm ein Produkt hinzufüge. Ich habe versucht, die "showcart" -Klasse zu meinen "Add to Cart" -Knopfklassen hinzuzufügen, aber wenn ich dies tue, öffnet der Knopf nur den Warenkorb und fügt das Produkt nicht mehr hinzu.

Dies ist meine erste Antwort auf dieser Seite. Ich hatte in den letzten zwei Tagen Mühe, diese Arbeit zum Laufen zu bringen, und konnte sie endlich zum Laufen bringen. Ich denke, es wäre schön, sie zu teilen.

Zunächst müssen Sie ein Modul erstellen:

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

Schritt 1. Sie müssen der Site eine Vorlage hinzufügen. Verwenden Sie dazu die Datei default.xml

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

Schritt 2. Dann müssen wir in minicart_open.phtml unsere js-Datei (Komponente) aufrufen, indem wir sie an das übergeordnete div der minicart anhängen. In diesem Fall [data-block = 'minicart']. Siehe diesen Link für weitere Details.

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

Schritt 3. Und schließlich in minicart_open.js den magischen Code:

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

Grundsätzlich erweitert dieser Code die Funktionalität der Datei vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsund besagt, dass nach Abschluss des AJAX-Aufrufs (contentUpdated) der Minicart geöffnet werden sollte.

Und das war es auch schon, eine einfache Aufgabe mit viel Theorie dahinter. Ich hoffe es hilft.

Sie können dazu einfach die Datei minicart.js ändern.

Navigiere zu vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Unter initialize: function sehen Sie

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

Ersetzen Sie die Funktion durch diesen Code.

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

Sie können das Zeitlimit gemäß Ihren Anforderungen ändern.

Laden Sie die Datei hoch und leeren Sie den Cache, indem Sie den Befehl ausführen

php bin/magento cache:clean

Prost!

alternative lösung: check vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsline: 100

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

Wir könnten eine benutzerdefinierte js-Datei hinzufügen:

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

Im js:

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

Sie können diesen Code einfach in Ihrer minicart.phtml unterhalb Ihres Vorlagencodes verwenden. Ich benutze diesen Code und er funktioniert besser. du kannst es versuchen. Vielen Dank.

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

Die obige Antwort funktioniert, aber die schließende Klammer fehlt:

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