Here is solution for checkout summary extension. I have tested this module with Magento 2.3.5 version. It is working fine with multiple custom options.
Step1 : app/code/Namespace/Module/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="atribute1"/>
<attribute name="atribute2"/>
<attribute name="atribute3"/>
<attribute name="atribute4"/>
<attribute name="atribute5"/>
</group>
</config>
Step2 : app/code/Namespace/Module/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">Namespace_Module/js/view/summary/item/details</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step3 : app/code/Namespace/Module/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: 'Namespace_Module/summary/item/details'
},
quoteItemData: quoteItemData,
getValue: function(quoteItem) {
return quoteItem.name;
},
getAttribute1: function(quoteItem){
var item = this.getItem(quoteItem.item_id);
return item.aattribute1;
},
getAttribute2: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute2;
},
getAttribute3: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute3;
},
getAttribute4: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute4;
},
getAttribute5: function(quoteItem) {
var item = this.getItem(quoteItem.item_id);
return item.attribute5;
},
getItem: function(item_id)
{
var itemElement = null;
_.each(this.quoteItemData, function(element, index)
{
if (element.item_id == item_id)
{
itemElement = element;
}
});
return itemElement;
}
});
}
);
Step4: app/code/Namespace/Module/view/frontend/web/template/summary/item/details.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<!-- 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="html: $parent.name"></strong>
<div class="anyclass">
<!-- ko if: (getAttribute1($parent))-->
<div><strong data-bind="text: getAttribute1($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute2($parent))-->
<div>Attribute2: <strong data-bind="text: getAttribute2($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute3($parent))-->
<div>Attribute3: <strong data-bind="text: getAttribute3($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute4($parent))-->
<div>Attribute4: <strong data-bind="text: getAttribute4($parent)"></strong></div>
<!-- /ko -->
<!-- ko if: (getAttribute5($parent))-->
<div>Attribute5: <strong data-bind="text: getAttribute5($parent)"></strong></div>
<!-- /ko -->
</div>
<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>
<!-- ko foreach: getRegion('item_message') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
Step5 : app/code/Namespace/Module/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="checkout-summary-product-attribute" type="Namespace\Module\Plugin\Checkout\Model\DefaultConfigProvider" />
</type>
</config>
Step6 : app/code/Namespace/Module/Plugin/Checkout/Model/DefaultConfigProvider.php
<?php
namespace Namespace\Module\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]['attribute1'] = $atts['product_attribute1'];
$result['quoteItemData'][$index]['attribute2'] = $atts['product_attribute2'];
$result['quoteItemData'][$index]['attribute3'] = $atts['product_attribute3'];
$result['quoteItemData'][$index]['attribute4'] = $atts['product_attribute4'];
$result['quoteItemData'][$index]['attribute5'] = $atts['product_attribute5'];
}
return $result;
}
}
No clear all cache and refresh Checkout page and enjoy!
Thumbs up for this solution.
Thank You!