如何在结帐的magento摘要中添加一些自定义字段和元素。据我所知,我需要覆盖一些基因敲除模板和html,完成它的正确方法是什么,以及如何覆盖这些文件? (magento 2.3)
答案 0 :(得分:0)
您需要为此编写一个插件。创建一个模块,然后添加
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像使用选项一样对其进行解析。