在Checkout Summary中获取产品属性

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.js

m下。并建立自己的文件 :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  文件来声明插件。