knockout.js - Magento 2 - 向结帐摘要框添加额外的产品属性

标签 knockout.js checkout magento2

如何将产品的额外属性添加到结帐摘要框中?

我必须覆盖:Magento_Catalog/web/template/summary/item/details.html

<div class="product-item-inner">
    <div class="product-item-name-block">
        <strong class="product-item-name" data-bind="text: $parent.name"></strong>
        <strong class="product-item-authors">**Author goes here!**</strong>
        <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>

所以你在哪里看到实际的文本“Author goes here!”我必须调用 $parent.authors 之类的东西。

product[authors] 是后端目录中的多选属性。

Checkout summary box - image

最佳答案

我创建了一个模块,用于在结帐摘要中添加自定义属性“ma​​ster_id”。

我引用了这个链接 https://www.magevision.com/blog/post/get-a-product-attribute-in-checkout-summary-magento-2/

SampWork/ConfigCheckoutDynamicPCB/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'SampWork_ConfigCheckoutDynamicPCB',
    __DIR__
);

SampWork/ConfigCheckoutDynamicPCB/etc/module.xml

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="SampWork_ConfigCheckoutDynamicPCB" setup_version="1.0.0"> </module>
    </config>

SampWork/ConfigCheckoutDynamicPCB/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="master_id"/>
    </group>
</config>

SampWork/ConfigCheckoutDynamicPCB/etc/di.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\DefaultConfigProvider">
        <plugin name="checkout-summary-product-attribute" type="SampWork\ConfigCheckoutDynamicPCB\Plugin\Checkout\Model\DefaultConfigProvider" />
    </type>
</config>

SampWork/ConfigCheckoutDynamicPCB/Plugin/Checkout/Model/DefaultConfigProvider.php

<?php
namespace SampWork\ConfigCheckoutDynamicPCB\Plugin\Checkout\Model;

use Magento\Checkout\Model\Session as CheckoutSession;

class DefaultConfigProvider
{
    /**
     * @var CheckoutSession
     */
    protected $checkoutSession;

    /**
     * Constructor
     *
     * @param CheckoutSession $checkoutSession
     */
    public function __construct(
        CheckoutSession $checkoutSession
    ) {
        $this->checkoutSession = $checkoutSession;
    }

    public function afterGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
        array $result
    ) {
        $items = $result['totalsData']['items'];
        foreach ($items as $index => $item) {
            $quoteItem = $this->checkoutSession->getQuote()->getItemById($item['item_id']);
            $result['quoteItemData'][$index]['master_id'] = $quoteItem->getProduct()->getData('master_id');
        }
        return $result;
    }
}

SampWork/SampWork/ConfigCheckoutDynamicPCB/view/frontend/web/js/view/summary/item/details.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: 'SampWork_ConfigCheckoutDynamicPCB/summary/item/details'
            },
            quoteItemData: quoteItemData,
            getValue: function(quoteItem) {
                return quoteItem.name;
            },
            getMaster: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                if(item.master_id){
                    return 'Master ID'+item.master_id;
                }else{
                    return '';
                }
            },
            getItem: function(item_id) {
                var itemElement = null;
                _.each(this.quoteItemData, function(element, index) {
                    if (element.item_id == item_id) {
                        itemElement = element;
                    }
                });
                return itemElement;
            }
        });
    }
);

SampWork/ConfigCheckoutDynamicPCB/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: (getMaster($parent))-->
                <span class="product-item-pcb-master" data-bind="text: getMaster($parent)"></span>
            <!-- /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>

SampWork/ConfigCheckoutDynamicPCB/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">SampWork_ConfigCheckoutDynamicPCB/js/view/summary/item/details</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

关于knockout.js - Magento 2 - 向结帐摘要框添加额外的产品属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41596680/

相关文章:

paypal - 如何将不需要运送的 PayPal 结账添加到我的网站?

php - 将自定义字段添加到结帐和注册时的 my_account 用户详细信息

pagination - Magento2 分页问题

mysql - 为 Magento 2.0 安装集群 MySQL

Php Magento Api Rest 创建客户密码问题 :

javascript - 扩展 Knockoutjs 对象

javascript - Knockout JS 如何知道要传递的正确参数?

javascript - 正确构建knockoutjs View 模型和服务器调用

javascript - 如何仅使用 Knockout JS 将一个 div 的高度绑定(bind)到另一个 div 的动态高度?

wordpress - 如何使 woocommerce 结账页面中的 'Province' 字段变为非必需字段?