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

15

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

alexcr
источник

Ответы:

36

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

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

  • 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) необходимо открыть миникарту.

И это все, простая задача с большим количеством теории позади. Надеюсь, это поможет.

pinicio
источник
Оно работало завораживающе. Tks!
Медина
Кажется хорошим решением, почему это должен быть модуль? Разве эти изменения в вашей теме не будут иметь такой же эффект?
Бен Крук
В дополнение к ответу выше от @pinicio: обратите внимание, что решение будет работать, только если для функции добавления в корзину используется ajax: magento.stackexchange.com/questions/125681/…
Soeren
1
Он работает при обновлении корзины, как и при добавлении товара, но не должен работать при удалении товара из корзины. но это работает и в то время.
Ронак Чаухан
Если я пытаюсь удалить элемент из мини-корзины, элемент не удаляется .. то есть), как только я нажимаю на значок удаления, только после обновления страницы отражается удаленный элемент
Сушивам
6

Это можно сделать, просто изменив файл 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

Ура!

Аджендра Панвар
источник
1
я попробовал это, но не сработало, я
очистил
Убедитесь, что у вас нет переопределения этого файла vendor / magento / Magento_Checkout / view / web / js / view / minicart.js в вашей теме.
Аджендра Панвар
1
Вы никогда не должны изменять основные файлы напрямую. Вместо этого измените его в своей теме или в пользовательском модуле.
Pinicio
Рад, что это помогло вам :)
Аджендра Панвар
1
Это работало как шарм на Magento 2.2.3. Ткс кучи!
Медина
4

альтернативное решение: 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...}
Джонас Чен
источник
2

Просто вы можете использовать этот код в вашем 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>
Рафик Ислам
источник
Благодаря его работе ... Я хочу изучить поток Magento JS. Как это работает, поделитесь ссылкой
55840
1

Этот ответ выше работает, но отсутствует закрывающая скобка:

            $('[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);
            });
        });
Rich S
источник