7

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

  • have you seen in console, window.checkoutconfig.totalsData ? This contain value of all item – Rakesh Jesadiya Apr 18 '17 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 Apr 18 '17 at 12:26
  • can I get sku without creating a plugin? – Joey Oct 4 '17 at 12:18
  • @Joey Thanks I want additional attribute as well. this was just an example. appreciate your effort. – Kul Nov 2 '17 at 7:42
  • @Kul glad to be a help – Joey Nov 2 '17 at 7:55
11

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 -->
  • 1
    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 – Chris Anderson Sep 28 '18 at 20:13
8

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

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.

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

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

Hope this help

  • 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 Apr 25 '17 at 10:03
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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