Спливаю на міні-картці, коли я додаю продукт у кошик magento 2

Я використовую magento 2.0.7, і те, що я намагаюся зробити, - це спливати кошик (верхній правий кошик ajax minicart), коли я додаю до нього продукт, в основному запускаю його. Я спробував додати клас "showcart" до мого класу додавання до кошика, але якщо я це зробив, кнопка просто відкриває кошик і більше не додає товар.

Це моя перша відповідь на цьому сайті. Я намагаюся зробити цю роботу останні два дні, і, нарешті, мені вдалося змусити її працювати, тому мені хотілося б поділитися нею.

Перш за все вам потрібно створити модуль:

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

Крок 1. Вам потрібно додати шаблон на сайт. Це можна зробити за допомогою default.xml

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

Крок 2. Потім всередині minicart_open.phtml нам потрібно викликати наш js файл (компонент), приєднавши його до батьківського діви minicart. У цьому випадку [data-block = 'minicart']. Дивіться це посилання для отримання більш детальної інформації.

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

Крок 3. І, нарешті, всередині minicart_open.js магічний код:

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

В основному цей код розширює функціональність файлу vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js, і він говорить про те, що після завершення виклику AJAX (contentUpdated) міні-картка повинна бути відкрита.

І це все, просте завдання з великою кількістю теорії. Сподіваюся, це допомагає.

Це можна зробити, просто змінивши файл minicart.js.

Перейдіть до vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Під ініціалізацією: функція, ви побачите

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

Замініть функцію цим кодом.

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

Ви можете змінити час очікування відповідно до вашої вимоги.

завантажте файл та очистіть кеш, запустивши команду

php bin/magento cache:clean

Ура!

альтернативне рішення: контрольна vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsлінія: 100

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

Ми можемо додати спеціальний js-файл:

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

У js:

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

Просто ви можете використовувати цей код у minicart.phtml нижче коду шаблону. Я використовую цей код, і він працює на краще. ви можете спробувати. Спасибі.

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

Ця вище відповідь спрацьовує, але відсутня фіксація:

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