11

I want to display sku in order summmary after product name.

I've created pluging which will called afterGetConfig to modified totalsData you can see below code for it.

class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {
        $items = $result['totalsData']['items'];

        for($i=0;$i<count($items);$i++){
        $items[$i]['sku'] = "dgd";

        }


        return $result;
    }
}

Then in detail.html i've added

<div class="details-sku">
                <span class="label"><!-- ko i18n: 'Sku' --><!-- /ko --></span>
                <span class="value" data-bind="text: $parent.sku"></span>
            </div>

But i can't see sku value there. i can only see lable. see below screenshot. enter image description here

6
  • have you seen in console, window.checkoutconfig.totalsData ? This contain value of all item Commented Apr 18, 2017 at 12:18
  • @RakeshJesadiya No i've not check in console. but i've print it in pluging and i can see value there. I dont know where can i see in console. i can see lots of ajax response there.
    – Kul
    Commented Apr 18, 2017 at 12:26
  • can I get sku without creating a plugin?
    – Joey
    Commented Oct 4, 2017 at 12:18
  • @Joey Thanks I want additional attribute as well. this was just an example. appreciate your effort.
    – Kul
    Commented Nov 2, 2017 at 7:42
  • @Kul glad to be a help
    – Joey
    Commented Nov 2, 2017 at 7:55

5 Answers 5

19

Override one template (simplification of Joey's answer). Bind directly to window object.checkoutConfig.quoteItemData object.

app/design/frontend/MyCustomTheme/default/Magento_Checkout/web/template/summary/item/details.html

<!-- ko foreach: window.checkoutConfig.quoteItemData -->
    <!-- ko if: item_id == $parents[1].item_id -->
        <span class="label" data-bind="i18n: 'SKU:'"></span>
        <!-- ko text: sku --><!-- /ko -->
    <!-- /ko -->
<!-- /ko -->

"===" cant be used in item_id == $parents[1].item_id so we use "=="

3
  • 2
    Just to add to this, in my case item_id is a string while $parents[1].item_id is a integer so === will not work. Used == and this method works great. Thanks Commented Sep 28, 2018 at 20:13
  • appreciated!! worked well for me Commented Mar 8, 2022 at 11:19
  • much appreciated works like charm
    – Rana Zain
    Commented Apr 2 at 10:06
12

In magento 2, you can display sku without creating any plugins, I'm just posting this answer to help out someone if needed..

Override

vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html file or find that relevant file inside your theme. You should have Magento_Checkout inside your theme folder.

Add

<strong class="product-item-sku" data-bind="text: getSku($parent.item_id)"></strong>,

wherever you want.

Then override vendor/magento/module-checkout/view/frontend/web/js/view/sum‌​mary/item/details.js

file or find that relevant file inside your theme. You should have Magento_Checkout inside your theme folder. Then add getSku function to it.

your details.js file should looks like this with added getSku function,

/*** Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.*//*jshint browser:true
 jquery:true*//*global alert*/

define(['uiComponent'], function(Component) {
    "use strict";
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/item/details'
        },
        getValue:

            function(quoteItem) {
                return quoteItem.name;
            },
        getSku: function(itemId) {
            var itemsData = window.checkoutConfig.quoteItemData;
            var prodSku = null;
            itemsData.forEach(function(item) {
                if (item.item_id == itemId) {
                    prodSku = item.sku;
                }
            });
            if (prodSku != null) {
                return 'SKU: ' + prodSku;
            } else {
                return '';
            }
        }
    });
});

Thanks Milan Pattani for his huge help

2
  • It's worked for me at Magento 2.3.1 as I was not getting custom field data at the payment review page.
    – D Singh
    Commented Feb 27, 2020 at 8:25
  • Edit answer because while we copy the file path got this type vendor/magento/module-checkout/view/frontend/web/template/su‌​mmary/item/details.h‌​tml Commented Jun 1, 2022 at 5:53
2

Facing this issue myself and not finding a clean answer I figured I would post how I approached this problem. The issue I see with the accepted answer is that it reloads the entire product resource just to get the sku.

So to prevent this performance overhead from happening (and what I think is a "cleaner" approach to solving this issue):

Create a preference in your modules etc/di.xml for \Magento\Quote\Model\Cart\Totals\Item

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Quote\Model\Cart\Totals\Item"
            type="Your\Module\ClassOverrides\Quote\Model\Cart\Totals\Item"/>
</config>

in this class create a set and get method for sku

<?php
namespace Your\Module\ClassOverrides\Quote\Model\Cart\Totals;

class Item extends \Magento\Quote\Model\Cart\Totals\Item
{
    public function getSku()
    {
        return $this->_get('sku');
    }

    public function setSku($sku)
    {
        return $this->setData('sku', $sku);

    }
}

and presto: the sku is now added to the item collection returned from getItems() and accessible via knockout.js in templates such as Magento_Checkout/template/summary/item/details.html via:

<div>
    Sku:
    <span data-bind="text: $parent.sku"></span>
</div>

Normally i try to avoid class overrides due to upgradability but this really isn't changing the core methods just adding a setter and getter for sku to the class. Im assuming this will work with any other product attribute as well.

1

I've found solution. below is working code.

class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {
        $items = $result['totalsData']['items'];

        for($i=0;$i<count($items);$i++){
        $items[$i]['sku'] = "dgd";

        }

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

Hope this help other people.

1
  • Can you please help me with creating plugin? I need to add a custom product attribute to order summary below product name.
    – Sejal Shah
    Commented Jun 7, 2017 at 13:06
0

try $result['totalsData']['items'][$i]['sku']="dgd"; instead of $items[$i]['sku'] = "dgd";

Hope this help

1
  • Thanks. But i found problem was different. $items = $result['totalsData']['items']; for($i=0;$i<count($items);$i++){ $items[$i]['sku'] = "dgd"; } $result['totalsData']['items'] = $items;
    – Kul
    Commented Apr 25, 2017 at 10:03

Your Answer

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

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