Wyskakuj minicart, gdy dodam produkt do koszyka magento 2

Korzystam z Magento 2.0.7, a to, co próbuję zrobić, to wyskakować koszyk (prawy górny koszyk ajax minicart), gdy dodam do niego produkt, Zasadniczo go uruchom. Próbowałem dodać klasę „showcart” do moich klas przycisków „dodaj do koszyka”, ale jeśli to zrobię, przycisk po prostu otworzy koszyk i nie doda już produktu.

To jest moja pierwsza odpowiedź na tej stronie. Przez ostatnie dwa dni walczyłem o to, by to zadziałało i w końcu udało mi się go uruchomić, więc pomyślałem, że miło byłoby się nim podzielić.

Przede wszystkim musisz utworzyć moduł:

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

Krok 1. Musisz dodać szablon do witryny. Można to zrobić za pomocą pliku default.xml

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

Krok 2. Następnie wewnątrz minicart_open.phtml musimy wywołać nasz plik js (komponent), dołączając go do nadrzędnego div minicart. W tym przypadku [data-block = 'minicart']. Zobacz ten link, aby uzyskać więcej informacji.

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

Krok 3. I wreszcie, w minicart_open.js, magiczny kod:

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

Zasadniczo ten kod rozszerza funkcjonalność pliku vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js i mówi, że po zakończeniu wywołania AJAX (contentUpdated) minicart powinien zostać otwarty.

I to wszystko, proste zadanie z dużą ilością teorii. Mam nadzieję, że to pomoże.

Można to zrobić po prostu modyfikując plik minicart.js.

Nawigować do vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

W funkcji inicjalizacji: zobaczysz

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

Zamień funkcję na ten kod.

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

Możesz zmienić limit czasu zgodnie ze swoimi wymaganiami.

prześlij plik i wyczyść pamięć podręczną, uruchamiając polecenie

php bin/magento cache:clean

Twoje zdrowie!

alternatywne rozwiązanie: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jslinia kontrolna : 100

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

Możemy dodać niestandardowy plik js:

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

W js:

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

Po prostu możesz użyć tego kodu w swoim minicart.phtml poniżej swojego kodu szablonu. Używam tego kodu i działa on lepiej. możesz tego spróbować. Dzięki.

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

Powyższa odpowiedź działa, ale brakuje nawiasu zamykającego:

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