Magento2 - How can I display a product attribute value in Order Summary block?

Question

I am trying to display a product attribute value instead of the product name.

I have found the tempplate where it is displayed: vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html, on line 15.

e.g. Changing $parent.name to $parent.[any-attribute-code] outputs an empty string.

How can I get the value for an attribute to display ?

Answer 1

You will have to create a plugin for that. I wanted to add product flavor to order summary. This is the way I created a plugin and achieved what I wanted.

Vendor = Sejal

Files you need to create:

1. Registration.php : app\code\Sejal\Flavor\registration.php
2. di.xml : app\code\Sejal\Flavor\etc\di.xml
3. module.xml : app\code\Sejal\Flavor\etc\module.xml
4. ConfigProviderPlugin.php : app\code\Sejal\Flavor\Plugin\ConfigProviderPlugin.php
5. details.html : copy of vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html

you can override this file in your theme like this

app\design\frontend\Vendor\themename\Magento_Checkout\web\template\summary\item\details.html

Code: registration.php

<?php

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

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="AddAttPlug" type="Sejal\Flavor\Plugin\ConfigProviderPlugin" />
    </type>
</config>

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="Sejal_Flavor" setup_version="1.0.0">
    </module>
</config>

ConfigProviderPlugin.php

<?php

namespace Sejal\Flavor\Plugin;

class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{

    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {

        $items = $result['totalsData']['items'];

        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        for($i=0;$i<count($items);$i++){

            $quoteId = $items[$i]['item_id'];
            $quote = $objectManager->create('\Magento\Quote\Model\Quote\Item')->load($quoteId);
            $productId = $quote->getProductId();
            $product = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);
            $productFlavours = $product->getResource()->getAttribute('flavors')->getFrontend()->getValue($product);         
            if($productFlavours == 'No' || $productFlavours == 'NA'){
                $productFlavours = '';
            }
            $items[$i]['flavor'] = $productFlavours;
        }
        $result['totalsData']['items'] = $items;
        return $result;
    }

}

details.html

Copy vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html in theme and add

<div class="product-item-flavor" data-bind="text: $parent.flavor"></div>

below

<strong class="product-item-name" data-bind="text: $parent.name"></strong>

That's it! Hope it helps!

UPDATE

Replace the code in ConfigProviderPlugin.php

<?php

namespace Sejal\Flavor\Plugin;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Quote\Api\CartItemRepositoryInterface as QuoteItemRepository;


class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
    private $checkoutSession;
    private $quoteItemRepository;
    protected $scopeConfig;

    public function __construct(
        CheckoutSession $checkoutSession,
        QuoteItemRepository $quoteItemRepository,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->_scopeConfig = $scopeConfig;
        $this->checkoutSession = $checkoutSession;
        $this->quoteItemRepository = $quoteItemRepository;
    }


    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {
            $quoteId = $this->checkoutSession->getQuote()->getId();            
            if ($quoteId) {            
                $itemOptionCount = count($result['totalsData']['items']);
                $quoteItems = $this->quoteItemRepository->getList($quoteId);
                $isbnOptions = array();
                foreach ($quoteItems as $index => $quoteItem) {
                    $quoteItemId = $quoteItem['item_id'];
                    $isbnOptions[$quoteItemId] = $quoteItem['isbn'];               
                }

                for ($i=0; $i < $itemOptionCount; $i++) {
                $quoteParentId = $result['totalsData']['items'][$i]['item_id'];
                $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $productId = $result['quoteItemData'][$i]['product']['entity_id'];
                $productObj = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);

                $productFlavours = $productObj->getResource()->getAttribute('flavors')->getFrontend()->getValue($productObj);         
                if($productFlavours == 'No' || $productFlavours == 'NA'){
                   $productFlavours = '';
                }
                $result['quoteItemData'][$i]['flavor'] = $productFlavours;
                json_encode($result);
                }
        }
        return $result;
        }

}

Then override the details.js(vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js) file and add below code

define(
[
    'uiComponent'
],
function (Component) {
    "use strict";
    var quoteItemData = window.checkoutConfig.quoteItemData;
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/item/details'
        },
        quoteItemData: quoteItemData,
        getValue: function(quoteItem) {
            return quoteItem.name;
        },
        getItemFlavor: function(quoteItem) {
            var itemProduct = this.getItemProduct(quoteItem.item_id);
            return itemProduct.flavor;
        },
        getItemProduct: function(item_id) {
            var itemElement = null;
            _.each(this.quoteItemData, function(element, index) {
                if (element.item_id == item_id) {
                    itemElement = element;
                }
            });
            return itemElement;
        }

    });
}

);

In details.html add below code

<span class="product-item-new" data-bind="text: getItemFlavor($parent)"></span>