Bật lên minicart khi tôi thêm một sản phẩm vào giỏ hàng magento 2

Tôi đang sử dụng magento 2.0.7, và những gì tôi đang cố gắng làm là bật lên giỏ hàng (giỏ hàng trên cùng bên phải ajax minicart) khi tôi thêm một sản phẩm vào đó, về cơ bản kích hoạt nó. Tôi đã cố gắng thêm lớp "showcart" vào các lớp nút thêm vào giỏ hàng của mình, nhưng nếu tôi làm như vậy, nút chỉ mở giỏ hàng và không thêm sản phẩm nữa ..

Đây là câu trả lời đầu tiên của tôi trên trang web này. Tôi đã vật lộn để cố gắng làm cho công việc này trong hai ngày qua và cuối cùng tôi đã có thể làm cho nó hoạt động, vì vậy tôi mặc dù sẽ rất tốt để chia sẻ nó.

Trước hết bạn cần tạo một mô-đun:

• đăng ký.php
• vv / module.xml
• xem / frontend / layout / default.xml
• xem / frontend / samples / minicart_open.phtml
• xem / frontend / web / js / view / minicart_open.js

Bước 1. Bạn cần thêm một mẫu vào trang web. Cách để làm điều đó là bằng cách sử dụng default.xml

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

Bước 2. Sau đó, bên trong minicart_open.phtml, chúng ta cần gọi tệp js (thành phần) bằng cách gắn nó vào div cha của minicart. Trong trường hợp này, [data-block = 'minicart']. Xem liên kết này để biết thêm chi tiết.

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

Bước 3. Và cuối cùng, bên trong minicart_open.js, mã ma thuật:

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

Về cơ bản mã này mở rộng chức năng của tệp vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsvà nó nói rằng một khi cuộc gọi AJAX được hoàn thành (contentUpdated), minicart sẽ được mở.

Và đó là nó, một nhiệm vụ đơn giản với rất nhiều lý thuyết đằng sau. Hy vọng nó giúp.

Nó có thể được thực hiện bằng cách sửa đổi tệp minicart.js.

Hướng đến vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Trong phần khởi tạo: function, bạn sẽ thấy

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

Thay thế chức năng với mã này.

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

Bạn có thể thay đổi thời gian chờ theo yêu cầu của bạn.

tải tập tin lên và dọn dẹp bộ đệm bằng cách chạy lệnh

php bin/magento cache:clean

Chúc mừng!

giải pháp thay thế: kiểm tra vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsdòng: 100

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

Chúng tôi có thể thêm một tệp js tùy chỉnh:

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

Trong js:

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

Đơn giản là bạn có thể sử dụng mã này trong minicart.phtml bên dưới mã templating của bạn. Tôi đang sử dụng mã này và nó hoạt động tốt hơn. bạn có thể thử nó Cảm ơn.

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

Câu trả lời trên có tác dụng nhưng thiếu dấu ngoặc kép:

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