カートに商品を追加するとミニカートがポップアップしますmagento 2

私はmagento 2.0.7を使用しています。私がやろうとしているのは、製品を追加するときにカート（右上のカートajaxミニカート）をポップアップし、基本的にトリガーすることです。「カートに追加」ボタンクラスに「showcart」クラスを追加しようとしましたが、追加した場合、ボタンはカートを開くだけで、製品は追加されません。

これがこのサイトでの最初の回答です。過去2日間、この作品を作ろうとして苦労してきましたが、ようやく機能させることができたので、共有したいと思います。

まず、モジュールを作成する必要があります。

• registration.php
• etc / module.xml
• view / frontend / layout / default.xml
• view / frontend / templates / minicart_open.phtml
• view / frontend / web / js / view / 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）、ミニカートを開く必要があることを示しています。

そして、それだけです。多くの理論が裏付けられた単純なタスクです。それが役に立てば幸い。

minicart.jsファイルを変更するだけで実行できます。

案内する vendor/magento/Magento_Checkout/view/web/js/view/minicart.js

initialize：functionの下に表示されます

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

乾杯！

代替ソリューション：チェック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...}

テンプレートコードの下の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>

上記の答えは機能しますが、閉じ括弧がありません：

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