Magento2 How to show sku in order summary?
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 "=="
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/summary/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