0

如何在结帐时在 magento 摘要中添加一些自定义字段和元素。据我所知，我需要覆盖一些 knockout.js 模板和 html，完成它的正确方法是什么，以及如何覆盖这些文件？(magento 2.3)

4

1 回答 1

2

你需要为此编写一个插件。创建一个模块，然后添加

etc/di.xml有内容

<?xml version="1.0"?>
<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="checkoutAttribute" type="Vendor\Module\Plugin\Checkout\Model\DefaultConfigProvider" />
    </type>
</config>

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

view/frontend/web/js/view/summary/item/details.js有内容

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/item/details'
        },

        /**
         * @param {Object} quoteItem
         * @return {String}
         */
        getValue: function (quoteItem) {
            return quoteItem.name;
        },
        getCustomAttributes: function(parent) {
                var item = _.find(products, function (product) {
                    return product.item_id == parent.item_id;
                });
                return item.items.custom_attributes;
            },
    });
});

Plugin/Checkout/Model/DefaultConfigProvider.php有内容

<?php
namespace Vendor\Module\Plugin\Checkout\Model;
use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Quote\Api\CartItemRepositoryInterface as QuoteItemRepository;

class DefaultConfigProvider
{
    /**
     * @var CheckoutSession
     */
    protected $checkoutSession;
    protected $logger;
    /**
     * Constructor
     *
     * @param CheckoutSession $checkoutSession
     */
    public function __construct(
        CheckoutSession $checkoutSession,
        QuoteItemRepository $quoteItemRepository,
        \Psr\Log\LoggerInterface $logger,
        \Magento\Catalog\Model\ProductRepository $productRepository
    ) {
        $this->checkoutSession = $checkoutSession;
        $this->quoteItemRepository = $quoteItemRepository;
        $this->_productRepository = $productRepository;
        $this->logger = $logger;
    }

    public function afterGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
        array $result
    ) {
        $items = $this->getQuoteItemData();
        foreach ($items as $index => $item) {
            $product = $objectManager->create('Magento\Catalog\Model\Product')->load($item->getProductId());

            //your definition of the attributes

            $result['quoteItemData'][$index]['items']['custom_attributes'] = $attributes;
        }
        return $result;
    }
    private function getQuoteItemData()
    {
        $quoteItemData = [];
        $quoteId = $this->checkoutSession->getQuote()->getId();
        if ($quoteId) {
            return $quoteItems = $this->quoteItemRepository->getList($quoteId);
        }
        else{
            return;
        }
    }
}

你要做的最后一件事就是把它敲出来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>
            <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>

    <!-- your new content -->
    <!-- ko if: getCustomAttributes($parent)-->
    <div class="yourclass" data-bind="text: getCustomAttributes($parent)">
    <!-- /ko -->
    <!-- /your new content -->

    <!-- 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>

需要考虑的两个想法： databind 属性必须适合输出，这意味着您可能必须替换“文本”。如果您查看下面的元素，则会解析一个 json。如果您像我必须的那样想要输出自定义产品属性，最好将其格式化为 json 并让 KO 像使用选项一样解析它。

于 2019-07-26T09:43:16.123 回答