Get a Product Attribute in Checkout Summary:在结帐摘要中获取产品属性
您想在结帐摘要中显示另一个产品属性还是自定义属性?让我们一起来看看你是怎么做到的!
在我们的示例中，我们将显示在产品名称的下面，即产品的制造商（ manufacturer）。首先，我们必须在购物车中包括制造商属性，默认情况下不包括。因此，为了实现这一点，我们必须在app/code/MageVision/Blog16/etc/catalog_attributes.xml下面创建一个文件，并添加以下代码。
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
<group name="quote_item">
<attribute name="manufacturer"/>
</group>
</config>众所周知，Magento 2 checkout 由一系列Knockout JS组件构建而成，然后使用Knockout JS模板系统进行渲染。 Magento 2在大型XML文件中定义了这些组件的每个组件及其父/子关系，可以在您自己的主题或模块中对其进行扩展或覆盖。对于Magento 2 checkout，可以在以下位置找到该大XML文件
vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml
以下是负责checkout summary中项目详细信息的组件项目的定义 。
<item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>因此，要覆盖此组件，我们将必须在我们的模块下创建一个新的 checkout_index_index.xml 。
app/code/MageVision/Blog/view/frontend/layout/checkout_index_index.xml添加以下代码，该代码仅定义了我们需要覆盖的该组件的路径。
<?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>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="cart_items" xsi:type="array">
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component"
xsi:type="string">MageVision_Blog16/js/view/summary/item/details</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>正如我们在下面的代码中看到的那样，组件项目的值是JS文件的路径，其中还声明了该组件的模板文件。由于我们需要覆盖此模板文件，因此该值在我们的模块中具有JS文件的路径。这样您就可以轻松。
vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.jsm下。并建立自己的文件 ：app / code / MageVision / Blog / view / frontend / web / js / view / summary / item / details.js 复制下面的js代码。
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'uiComponent'
], function (Component) {
'use strict';
var quoteItemData = window.checkoutConfig.quoteItemData;
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/item/details'
},
quoteItemData: quoteItemData,
/**
* @param {Object} quoteItem
* @return {String}
*/
getValue: function (quoteItem) {
return quoteItem.name;
}
getManfacturer:function(quoteItem){
var item = this.getItem(quoteItem.item_id);
return item.manufacturer;
}
getItem:function(item_id) {
var itemElement = null;
_.each(this.quoteItemData, function(element, index) {
if (element.item_id == item_id) {
itemElement = element;
}
});
return itemElement;
}
});
});
然后，创建一个html文件，并在下面将其命名为 details.html。
app / code / MageVision / Blog /view/frontend/web/template/summary/item/details.html
编写如下代码：
<!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">
<div class="product-item-inner">
<div class="product-item-name-block">
<strong class="product-item-name" data-bind="text: $parent.name"></strong>
<!-- ko if: (getManufacturer($parent))-->
<strong class="product-item-manufacturer" data-bind="text: getManufacturer($parent)"></strong>
<!-- /ko -->
<div class="details-qty">
<span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
<span class="value" data-bind="text: $parent.qty"></span>
</div>
</div>
<!-- ko foreach: getRegion('after_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
</div>
<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
<span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="item-options">
<!--ko foreach: JSON.parse($parent.options)-->
<dt class="label" data-bind="text: label"></dt>
<!-- ko if: ($data.full_view)-->
<dd class="values" data-bind="html: full_view"></dd>
<!-- /ko -->
<!-- ko ifnot: ($data.full_view)-->
<dd class="values" data-bind="html: value"></dd>
<!-- /ko -->
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
</div>原始文件代码，可以在这里面找到：vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html
新增加的文件是我们添加的，以便在产品名称下方显示产品的制造商。
vendor/magento/module-checkout/Model/DefaultConfigProvider.php 类文件是用于在checkout结账检索数据。在此类中，方法getConfig（）返回一个数据数组，该数据数组将在结帐的不同位置使用。针对checkout summary template 是totalsData 输出数组字段 。
如我们所见，该阵列中不包含产品的制造商数据。因此，我们必须通过创建插件来扩展此功能，并将产品的制造商添加到 totalsData中。经过更深入的研究，我们发现这仅适用于发货步骤，如付款步骤中的totalData仅使用Magento的默认报价总计值再次设置数组。因此，要在两个步骤的结帐订单摘要中显示产品的制造商，我们需要将产品的制造商添加到quoteItemData数组中。
创建一个 di.xml 文件来声明插件。