16

I am trying to add a custom product attribute to the list of items on the summary section in the checkout in Magento 2. The template file is at Magento_Checkout/web/template/summary/item/details.html and looking to display the value of the custom attribute before the product name. Any idea on how this value is added to the ko template? Looks like there is another question for this here but was never answered.

Improve this question
3
  • magento.stackexchange.com/questions/116642/…
    – Arjun
    Aug 24, 2016 at 5:14
  • 1
    @Arjun This is different. This referenced article really shows the cart page not checkout. The cart is a simple phtml template. The checkout is a ko page and is getting its source from somewhere else than the mini-cart. Not sure why all cart items displayed in mini cart, cart, and checkout all are built in different ways. But the actual checkout summary is where I need to see how to add the custom attribute.
    – sudopratt
    Aug 24, 2016 at 7:09
  • @sudopratt, Have you get idea about that, How to add a custom product attribute to the list of items on the summary section in the checkout in Magento 2 ?
    – Sarfaraj Sipai
    Dec 20, 2017 at 9:35

4 Answers 4

Reset to default
22

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!

Improve this answer
7
4

if you want to add your custom attribute in order summary you need to override: (Layouts) 1) checkout_cart_index :

<referenceBlock name="checkout.cart.totals">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="block-totals" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="processingfee" xsi:type="array">
                                <item name="component"  xsi:type="string">Dedicated_Processingfee/js/view/checkout/cart/totals/processingfee</item>
                                <item name="sortOrder" xsi:type="string">20</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Dedicated_Processingfee/checkout/cart/totals/processingfee</item>
                                    <item name="title" xsi:type="string" translate="true">Processing Fee</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>

2) checkout_index_index :

<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="totals" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="processingfee" xsi:type="array">
                                                        <item name="component"  xsi:type="string">Dedicated_Processingfee/js/view/checkout/cart/totals/processingfee</item>
                                                        <item name="sortOrder" xsi:type="string">20</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="template" xsi:type="string">Dedicated_Processingfee/checkout/cart/totals/processingfee</item>
                                                            <item name="title" xsi:type="string" translate="true">Processing Fee</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                            <item name="cart_items" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="details" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="subtotal" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Tax/js/view/checkout/summary/item/details/subtotal</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>

3) sales_order_view :

<referenceContainer name="order_totals">
        <block class="Dedicated\Processingfee\Block\Sales\Order\ProcessingFee" name="processingfee"/>
    </referenceContainer>

then add custom js to get your custom attribute value like this in your module : at /view/frontend/web/js/view/checkout/cart/totals/processingfee.js:

define(
[
    'Dedicated_Processingfee/js/view/checkout/summary/processingfee'
],
function (Component) {
    'use strict';

    return Component.extend({

        /**
        * @override
        */
        isDisplayed: function () {
            return true;
        }
    });
}

);

add another js to calculate value with total billing amount in : /view/frontend/web/js/view/checkout/summary/processingfee.js

define(
[
    'Magento_Checkout/js/view/summary/abstract-total',
    'Magento_Checkout/js/model/quote',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/totals'
],
function (Component, quote, priceUtils, totals) {
    "use strict";
    return Component.extend({
        defaults: {
            isFullTaxSummaryDisplayed: window.checkoutConfig.isFullTaxSummaryDisplayed || false,
            template: 'Dedicated_Processingfee/checkout/summary/processingfee'
        },
        totals: quote.getTotals(),
        isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
        isDisplayed: function() {
            return this.isFullMode();
        },
        getValue: function() {
            var price = 0;
            if (this.totals()) {
                price = totals.getSegment('processingfee').value;
            }
            return this.getFormattedPrice(price);
        },
        getBaseValue: function() {
            var price = 0;
            if (this.totals()) {
                price = this.totals().base_fee;
            }
            return priceUtils.formatPrice(price, quote.getBasePriceFormat());
        }
    });
}

);

That set you will find you attribute with value Thanks :)

enter image description here

Improve this answer
4
  • 1
    I dont think @sudopratt wants to add a row in totals coumn rather a product attribute below product name like short description.
    – Sunil Verma
    Nov 21, 2016 at 12:21
  • @ Sunil Verma have you got a solution for this . I need to do exactly same but cant get any reference
    – Rohit Goel
    Mar 6, 2017 at 7:59
  • Yes, its show custom attribute but when move to next step for #payment then custom attribute disappear. why?
    – HaFiz Umer
    Mar 6, 2020 at 6:06
  • Could you please check this stackoverflow.com/questions/59243164/…
    – Abilash Erikson
    Jun 14, 2020 at 12:45
1

For me was $result['totalsData']['items'] empty. I have used following implementation instead: 

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

) {
    foreach ($result['quoteItemData'] as $index => $itemData) {
        $product = $this->productRepository->getById($itemData['product_id']);
        $result['quoteItemData'][$index]['flavor'] = $product->getFlavor();
    }
    return $result;
}
Improve this answer
0
0

I need to display simple product name of the configurable. So I used code as below. But same simple name is displaying when I choose same configurable options in the checkout order summary. So How I display correct simple product names?

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);
        $productTypeInstance = $product->getTypeInstance();
        $usedProducts = $productTypeInstance->getUsedProducts($product);

        foreach ($usedProducts  as $child) {
            $childName = $child->getName(); //Child Product Name
        }           

        $items[$i]['childname'] = $childName;
    }
    $result['totalsData']['items'] = $items;
    return $result;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.