Extension attributes to add product attribute to the order summary on checkout?

Question

I am trying to display a custom product attribute under the order summary list of items on checkout. I think it is fed by the TotalsItemExtensionInterface. I have the following trying to add the custom attribute to the collection exposed on the front end.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Quote\Api\Data\TotalsItemExtensionInterface">
    <attribute code="product" type="string">
        <join reference_table="catalog_product" reference_field="product_id" join_on_field="entity_id">
            <field>custom_attribute</field>
        </join>
    </attribute>
</extension_attributes>
</config>

Any ideas on how this is done to attach a product attribute to a quote item in Magento 2?

EDIT: Attached is the screenshot of where I would like to get the attribute to show:

Also I am taking a different route, but have the same problem. I brought the attribute to the quote item through a migration so is now part of the quote_item table. But not part of the collection coming through. Any idea on how I get that attribute as part of the quoteItem object?

Answer 1

1) The flow of cart summary in checkout page

We can get the totalsData from:

vendor/magento/module-checkout/view/frontend/web/js/model/quote.js

var totalsData = window.checkoutConfig.totalsData;

return {
    totals: totals,
    ......
}

If we try to format the Json from window.checkoutConfig, we can see the totalsData. And, we can get the items from it.

Now, at look the checkout xml layout:

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

<item name="cart_items" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/cart-items</item>
    <item name="children" xsi:type="array">
        <item name="details" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details</item>
            <item name="children" xsi:type="array">
                <item name="thumbnail" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                    <item name="displayArea" xsi:type="string">before_details</item>
                </item>
                <item name="subtotal" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                    <item name="displayArea" xsi:type="string">after_details</item>
                </item>
            </item>
        </item>

    </item>
</item>

In the front page:

2) Add custom attribute

Where is the totalsData from the PHP side?

vendor/magento/module-checkout/Model/DefaultConfigProvider.php

public function getConfig()
{ 
    ......
    $output['postCodes'] = $this->postCodesConfig->getPostCodes();
    $output['imageData'] = $this->imageProvider->getImages($quoteId);
    $output['totalsData'] = $this->getTotalsData();
    ......
}

So, we need to override this method, I think we should use Plugin to override this method.

Vendor\Module\etc\di.xml

<type name="Magento\Checkout\Model\DefaultConfigProvider">
        <plugin name="add_custom_product_attribute" type="Vendor\Module\Model\Checkout\ConfigProviderPlugin" />
</type>

Vendor\Module\Model\Checkout\ConfigProviderPlugin.php

public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
{
    $items = $result['totalsData']['items'];
    foreach($items as $item) {
        //Your code here
    }

    return $result;
}

And then, we need to create your own js and html template files or override the exist files.

[EDIT]

We should try with:

The proper way is to use TotalsItemExtensionInterface and add all these via it

Create extension attributes:

app/code/Vendor/Module/etc/extension_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Quote\Api\Data\TotalsItemExtensionInterface">
        <attribute code="reward_points" type="int" />
    </extension_attributes>
</config>

app/code/Vendor/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\Quote\Model\Cart\Totals\ItemConverter">
        <plugin name="show-points-item" type="Vendor\Module\Plugin\Cart\Totals\ItemConverterPlugin" sortOrder="10"/>
    </type>
</config>

app/code/Vendor/Module/Plugin/Cart/Totals/ItemConverterPlugin.php

<?php

namespace Vendor\Module\Plugin\Cart\Totals;

use Magento\Quote\Model\Cart\Totals\ItemConverter;
use Magento\Quote\Api\Data\TotalsItemExtensionFactory;

class ItemConverterPlugin
{
    /**
     * @var TotalsItemExtensionFactory
     */
    protected $totalsItemExtensionFactory;

    /**
     * ItemConverterPlugin constructor.
     *
     * @param TotalsItemExtensionFactory $totalsItemExtensionFactory
     */
    public function __construct(
        TotalsItemExtensionFactory $totalsItemExtensionFactory
    ) {
        $this->totalsItemExtensionFactory = $totalsItemExtensionFactory;
    }

    /**
     * @param ItemConverter $subject
     *
     * @param $result
     * @return mixed
     */
    public function afterModelToDataObject(
        ItemConverter $subject,
        $result
    ) {
        $extensionAttributes = $result->getExtensionAttributes();
        if ($extensionAttributes === null) {
            $extensionAttributes = $this->totalsItemExtensionFactory->create();
        }
        $pointsDelta = 24;
        $extensionAttributes->setRewardPoints($pointsDelta);
        $result->setExtensionAttributes($extensionAttributes);
        return $result;
    }
}

On the checkout page, we can check on Browser console: window.checkoutConfig.totalsData.items