Munculkan minicart ketika saya menambahkan produk ke keranjang magento 2


15

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

Jawaban:


36

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.


Itu bekerja seperti pesona. Tks!
medina

Tampak perbaikan yang baik, mengapa ini perlu modul? Tidakkah membuat perubahan itu di tema Anda memiliki efek yang sama?
Ben Crook

Selain jawaban di atas dari @pinicio: Perhatikan bahwa solusinya hanya akan berfungsi jika ajax digunakan untuk fungsi add to cart: magento.stackexchange.com/questions/125681/…
Soeren

1
Ini berfungsi pada pembaruan keranjang seperti ketika kita menambahkan produk berfungsi tetapi itu tidak akan berfungsi ketika kita menghapus item dari keranjang. tetapi itu bekerja pada waktu itu juga.
Ronak Chauhan

Jika saya mencoba menghapus item dari kereta mini, item tersebut tidak menghapus..yaitu) setelah saya mengklik ikon hapus, hanya setelah refresh halaman, item yang dihapus semakin penuh
Sushivam

6

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!


1
saya mencoba yang satu ini tetapi tidak berhasil, saya
membersihkan

Pastikan Anda tidak menimpa vendor file ini / magento / Magento_Checkout / view / web / js / view / minicart.js di bawah tema Anda.
Ajendra Panwar

Anda tidak boleh mengubah file inti secara langsung. Sebagai gantinya, ubah dalam tema atau modul khusus Anda.
pinicio

Senang itu membantu Anda :)
Ajendra Panwar

1
Itu bekerja seperti pesona di Magento 2.2.3. Tks tumpukan!
medina

4

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

2

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>

Terima kasih Bekerja ... Saya ingin belajar aliran Magento JS. Cara kerjanya, silakan bagikan beberapa tautan
55840

1

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);
            });
        });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.