Sepetime bir ürün eklediğimde minicart'ı aç magento 2

Magento 2.0.7 kullanıyorum ve yapmaya çalıştığım şey, bir ürün eklediğimde sepeti (sağ üst sepet ajax minicart) açmak. Sepet düğmesi sınıflarıma eklemek için "showcart" sınıfını eklemeye çalıştım, ancak bunu yaparsam, düğme sadece sepeti açar ve ürünü artık eklemez ..

Bu sitedeki ilk cevabım. Son iki gündür bu işi yapmaya çalışıyorum ve sonunda çalıştırabildim, bu yüzden paylaşmak güzel olurdu.

Her şeyden önce bir modül oluşturmanız gerekir:

• registration.php
• etc / module.xml
• / Kullanıcı arayüzü / düzeni / default.xml görüntülemek
• / Kullanıcı arayüzü / templates / minicart_open.phtml görüntülemek
• görünümü / kullanıcı arayüzü / web / js / görünüm / minicart_open.js

Adım 1. Siteye bir şablon eklemeniz gerekir. Bunu yapmanın yolu default.xml kullanmaktır

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

Adım 2. Sonra minicart_open.phtml içinde js dosyamızı (bileşen) minicart'ın üst div öğesine takarak çağırmamız gerekir. Bu durumda, [data-block = 'minicart']. Daha fazla ayrıntı için bu bağlantıya bakın.

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

Adım 3. Ve son olarak, minicart_open.js içinde sihirli kod:

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

Temel olarak bu kod dosyanın işlevselliğini vendor/magento/module-checkout/view/frontend/web/js/view/minicart.jsarttırır ve AJAX çağrısı tamamlandığında (contentUpdated) mini bölümün açılması gerektiğini söyler.

Ve işte bu, arkasında çok fazla teori bulunan basit bir görev. Umarım yardımcı olur.

Minicart.js dosyasını değiştirerek yapılabilir.

Şu yöne rotayı ayarla vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

Başlat: işlevi altında,

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

İşlevi bu kodla değiştirin.

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

Zaman aşımı gereksiniminize göre değiştirebilirsiniz.

dosyayı yükleyin ve komutu çalıştırarak önbelleği temizleyin

php bin/magento cache:clean

Şerefe!

alternatif çözüm: kontrol vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.jshattı: 100

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

Özel bir js dosyası ekleyebiliriz:

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

Js'de:

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

Bu kodu, şablon kodunuzun altındaki minicart.phtml dosyasında kullanabilirsiniz. Bu kodu kullanıyorum ve daha iyi için çalışıyor. deneyebilirsin. Teşekkürler.

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

Yukarıdaki cevap işe yarıyor ancak kapanış ayracı eksik:

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