Munculkan minicart ketika saya menambahkan produk ke keranjang magento 2

Saya menggunakan magento 2.0.7, dan apa yang saya coba lakukan adalah mem-popup gerobak (gerobak kanan atas ajax minicart) ketika saya menambahkan produk ke dalamnya, pada dasarnya memicu itu. Saya telah mencoba menambahkan kelas "showcart" ke kelas tombol tambah ke keranjang saya, tetapi jika saya melakukannya, tombol tersebut hanya membuka keranjang, dan tidak menambahkan produk lagi ..

Ini jawaban pertama saya di situs ini. Saya telah berjuang keras untuk membuat ini berhasil selama dua hari terakhir dan akhirnya saya bisa membuatnya bekerja, jadi saya pikir akan lebih baik untuk membaginya.

Pertama-tama Anda perlu membuat modul:

• registrasi.php
• etc / module.xml
• view / frontend / layout / default.xml
• lihat / tampilan depan / templat / minicart_open.phtml
• view / frontend / web / js / view / minicart_open.js

Langkah 1. Anda perlu menambahkan templat ke situs. Cara untuk melakukannya adalah dengan menggunakan default.xml

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

Langkah 2. Kemudian di dalam minicart_open.phtml kita perlu memanggil file js (komponen) kita dengan melampirkannya ke div induk dari minicart. Dalam hal ini, [data-block = 'minicart']. Lihat tautan ini untuk lebih jelasnya.

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

Langkah 3. Dan akhirnya, di dalam minicart_open.js, kode ajaib:

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

Pada dasarnya kode ini memperluas fungsionalitas file vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js, dan mengatakan bahwa begitu panggilan AJAX selesai (contentUpdated), minicart harus dibuka.

Dan itu saja, tugas sederhana dengan banyak teori di belakang. Semoga ini bisa membantu.

Ini dapat dilakukan dengan hanya memodifikasi file minicart.js.

Navigasi ke vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Di bawah inisialisasi: fungsi, Anda akan melihat

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

Ganti fungsi dengan kode ini.

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

Anda dapat mengubah batas waktu sesuai kebutuhan Anda.

unggah file dan bersihkan cache dengan menjalankan perintah

php bin/magento cache:clean

Bersulang!

solusi alternatif: periksa vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jsbaris: 100

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

Kita dapat menambahkan file js khusus:

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

Di js:

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

Cukup Anda dapat menggunakan kode ini di minicart.phtml Anda di bawah kode templating Anda. Saya menggunakan kode ini dan berfungsi lebih baik. kamu bisa mencobanya. Terima kasih.

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

Jawaban di atas berfungsi tetapi tidak ada tanda kurung penutup:

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