加入购物车后如何触发小型购物车更新


10

我使用以下课程来测试以自定义方式添加到购物车;

use Magento\Framework\App\Action;
use Magento\Checkout\Model\Cart;

class Add extends Action\Action
{
    protected $cart;

    public function __construct(
        Action\Context $context,
        Cart $cart
    ){
        $this->cart = $cart;
        parent::__construct($context);
    }

    public function execute()
    {
        $this->cart->addProductsByIds([1])
            ->save();
    }
}

这很好。当您查看购物车时,它显示了我的物品,在数据库等中所有物品看起来都很酷。但是,微型购物车仍然显示好像在篮子里没有物品。

如果我随后使用产品或列表页面上的“添加到购物车”按钮将其他产品添加到购物车,则它将添加到购物车并更新微型购物车以显示两个商品。

它会在哪里触发迷你车进行自我更新,或者迷你车如何知道需要刷新?

Answers:


36

谢谢你的帮助 :)

我已经找到了触发它的方法,您需要sections.xml在模块的内部etc / frontend中告诉Magento为给定的Ajax调用更新哪些部分。这是一个例子;

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <action name="[frontName]/[ActionPath]/[ActionName]">
        <section name="cart"/>
    </action>
</config>

在我的Ajax调用完成之后,[frontName]/[ActionPath]/[ActionName]Magento再次调用/ customer / section / load,以传递要加载的部分。

默认情况下,它会请求任何消息,但是如果您正确设置了sections.xml,那么您还将看到在其中定义的部分名称。


@smartic,很好的信息,我从这里得到了信息
阿米特·贝拉


太棒了,我正在通过ajax来更新其他块,这使我到了那里。感谢您发布解决方案。
Eirik

@Smartie有什么方法可以在magento api调用后更新购物车部分吗?
ND17

1
@Smartie对于添加的多个产品,它仅更新第一个产品的数量,其余产品数量未显示在微型购物车中。我们是否需要在这里添加更多内容?
DEEP JOSHI

6

这与问题没有直接关系,但是,如果要通过常规Magento require.js文件中的AJAX调用更新购物车,则可以要求该Magento_Customer/js/customer-data对象并要求微型购物车以这种方式刷新:

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

资料来源:https : //github.com/magento/magento2/issues/5621


所以我在这里为我的自定义page_layout寻找解决方案。每当我转到任何自定义页面时,我的微型购物车计数始终为0。我最终不得不跑步customerData.invalidate(sections);,然后Magento能够完成其余的工作。
James Harrington

2

在店面中,如果您在微型购物车区域中潜入货源

<div data-block="minicart" class="minicart-wrapper">
  <a class="action showcart" 
   data-bind="scope: 'minicart_content'">
     ... 
  </a>

   <script type="text/x-magento-init">
   {
    "[data-block='minicart']": {
        "Magento_Ui/js/core/app": {"components":{....}
     }
   }
</script>
</div>

如您所见,magento2执行脚本标签和动态绑定数据中的组件以阻止minicart使用敲除

我发现一些有趣的东西

\vendor\magento\module-checkout\view\frontend\layout\default.xml

从Checkout布局。它component为minicart-content 定义了一个getdata继续,Magento_Checkout/js/view/minicart您将看到

.....
$('[data-block="minicart"]').on('contentLoading', function(event) {
      addToCartCalls++;
      self.isLoading(true);
});
.....
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.