系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在Magento 2的迷你车中添加自定义按钮的步骤：
第1步： 首先，我们需要在扩展名中以以下路径创建一个“默认.xml”文件。
app\code\Vendor\Extension\view\frontend\layout\
现在添加以下代码
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header-wrapper"> <referenceBlock name="minicart"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="minicart_content" xsi:type="array"> <item name="config" xsi:type="array"> <item name="template" xsi:type="string">Vendor_Extension/minicart/content</item> </item> </item> </item> </argument> </arguments> </referenceBlock> </referenceContainer> </body> </page>
第2步：之后，我们需要在扩展名中在以下路径创建一个“requirejs-config.js”文件。
app\code\Vendor\Extension\view\frontend\
并添加如下所述的代码
var config = {
config: {
mixins: {
'Magento_Checkout/js/view/minicart': {
'Vendor_Extension/js/view/minicart-mixin': true
}
}
}
};第 3 步：之后，我们需要 在下面的路径中创建一个“minicart-mixin.js”文件
app\code\Vendor\Extension\view\frontend\web\js\view\
然后，添加下面提到的代码
define([
'uiComponent',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'sidebar',
'mage/translate',
'mage/dropdown'
], function (Component, customerData, $, ko, _) {
'use strict';
var mixin = {
isButtonEnable: function () {
/* you need to add your custom code here */
return true;
}
};
return function (target) {
return target.extend(mixin);
};
});步骤4：之后，我们需要 在以下路径内创建一个“content.html”文件
app\code\Vendor\Extension\view\frontend\web\template\minicart\
之后，包括如下代码
<div class="block-title">
<strong>
<span class="text" translate="'My Cart'"/>
<span
class="qty empty"
text="getCartParam('summary_count')"
data-bind="css: { empty: !!getCartParam('summary_count') == false },
attr: { title: $t('Items in Cart') }">
</span>
</strong>
</div>
<div class="block-content">
<button type="button"
id="btn-minicart-close"
class="action close"
data-action="close"
data-bind="attr: { title: $t('Close') }">
<span translate="'Close'"/>
</button>
<if args="getCartParam('summary_count')">
<div class="items-total">
<span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"/>
<translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"/>
<span class="count" text="getCartParam('summary_count')"/>
<!-- ko if: (getCartLineItemsCount() === 1) -->
<span translate="'Item in Cart'"/>
<!--/ko-->
<!-- ko if: (getCartLineItemsCount() > 1) -->
<span translate="'Items in Cart'"/>
<!--/ko-->
</div>
<each args="getRegion('subtotalContainer')" render=""/>
<each args="getRegion('extraInfo')" render=""/>
<if args="isButtonEnable()">
<div class="actions">
<div class="primary">
<button type="button"
class="action primary checkout custombutton"
data-action="close"
translate="'Send Quote'"/>
</div>
</div>
</if>
<div class="actions" if="getCartParam('possible_onepage_checkout')">
<div class="primary">
<button
id="top-cart-btn-checkout"
type="button"
class="action primary checkout"
data-action="close"
data-bind="
attr: {
title: $t('Proceed to Checkout')
},
click: closeMinicart()
"
translate="'Proceed to Checkout'"
/>
<div data-bind="html: getCartParam('extra_actions')"></div>
</div>
</div>
</if>
<if args="getCartParam('summary_count')">
<strong class="subtitle" translate="'Recently added item(s)'"/>
<div data-action="scroll" class="minicart-items-wrapper">
<ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartItems(), as: 'item' }">
<each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"
/>
</ol>
</div>
</if>
<ifnot args="getCartParam('summary_count')">
<strong class="subtitle empty"
data-bind="visible: closeSidebar()"
translate="'You have no items in your shopping cart.'"
/>
<if args="getCartParam('cart_empty_message')">
<p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
<div class="actions">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
<span translate="'View and Edit Cart'"/>
</a>
</div>
</div>
</if>
</ifnot>
<div class="actions" if="getCartParam('summary_count')">
<div class="secondary">
<a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
<span translate="'View and Edit Cart'"/>
</a>
</div>
</div>
<div id="minicart-widgets" class="minicart-widgets" if="getRegion('promotion').length">
<each args="getRegion('promotion')" render=""/>
</div>
</div>
<each args="getRegion('sign-in-popup')" render=""/>步骤5：最后，添加代码后，您需要运行Magento升级和部署命令。
实施上述步骤后，您的自定义按钮将成功添加到Magento 2商店的迷你购物车中。
结论：
这样，您就可以在Magento 2的迷你车中成功添加自定义按钮。您还可以使用迷你购物车实施其他自定义，以增加客户体验。