Всплывающая мини-карта, когда я добавляю товар в корзину magento 2

Я использую magento 2.0.7, и я пытаюсь открыть корзину (верхняя правая корзина ajax minicart), когда я добавляю в нее товар. По сути, запускаю его. Я пытался добавить класс «showcart» в классы кнопок «Добавить в корзину», но если я это сделаю, кнопка просто открывает корзину и больше не добавляет продукт ..

Это мой первый ответ на этом сайте. Я изо всех сил пытался сделать эту работу в течение последних двух дней, и я наконец-то смог заставить ее работать, поэтому я подумал, что было бы неплохо поделиться ею.

Прежде всего вам нужно создать модуль:

• registration.php
• и т.д. / module.xml
• просмотреть / интерфейс / макет / default.xml
• просмотреть / интерфейс / шаблоны / minicart_open.phtml
• вид / интерфейс / веб / JS / просмотр / 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-файл (компонент), прикрепив его к родительскому div мини-карты. В этом случае [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

Под Initialize: функция, вы увидите

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