Magento2 How to show sku in order summary?

Question

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.

Answer 1

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 "=="

Answer 2

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/su‌​mmary/item/details.h‌​tml 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

Answer 3

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.

Answer 4

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.

Answer 5

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

Hope this help