将产品添加到购物车magento 2时弹出微型购物车

我正在使用magento 2.0.7，我想做的是在向其中添加产品时弹出购物车（右上方的ajax minicart购物车），基本上是触发它。我试图将“ showcart”类添加到“添加到购物车”按钮类中，但是如果这样做，则该按钮只是打开购物车，不再添加产品了。

这是我在此站点上的第一个答案。在过去的两天里，我一直在努力使它起作用，我终于能够使它起作用，因此我很乐意分享它。

首先，您需要创建一个模块：

• registration.php
• 等/ module.xml
• 查看/前端/布局/ default.xml
• 查看/前端/模板/minicart_open.phtml
• 查看/前端/网站/ js /视图/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中，我们需要通过将其附加到minicart的父div来调用js文件（组件）。在这种情况下，[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：函数下，您将看到

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