Show sku in the Magento checkout page

To add the product sku to the order summary in the magento checkout page you will need to create a module to extend the magento quote object and use it on the KnockoutJs template to render the product details.

#1 Create module

In this module we will override the Magento\Quote\Model\Cart\Totals\Item class with a custom one. Although this is the ultimate option for replacing/extending magento core functionality it will not cause a real issue in future upgrade in this particular case because we will only be adding a couple of new methods to it.

As usual, to create a new module you will need to 2 mandatory files: registration.php and etc/module.xml. This are the files used to tell magento about your new module and register it.

File: app/code/Webguru/SkuAtCheckout/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::MODULE, 
	'Webguru_SkuAtCheckout', 
	__DIR__
);

#File: app/code/Webguru/SkuAtCheckout/etc/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="Webguru_SkuAtCheckout" setup_version="1.0.0" >
    </module>
</config>

Then create etc/di.xml to tell magento that you will be replacing Magento\Quote\Model\Cart\Totals\Item with a new class. So, whenever magento is asked for that class it will server your new custom class (with the extended functionality).

File: app/code/Webguru/SkuAtCheckout/etc/di.xml

<?xml version="1.0" encoding="UTF-8"?> 
<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="Webguru\SkuAtCheckout\Quote\Model\Cart\Totals\Item"/>
</config>

Now create the actual call with the added functionality. This class extends the original one because you do not want to lose functionality, right 🙂 ?

File: app/code/Webguru/SkuAtCheckout/Quote/Model/Cart/Totals/Item.php

<?php
namespace Webguru\SkuAtCheckout\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 that is it for the module.

#2 Replace the KnockoutJs template

You know need to replace the KnockoutJs template used to rendered the product details. The original template can be found at /vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html. Copy that file to your theme (under the Magento_Checkout/web/template/summary/item folder) and edit it by adding a new line of code that will call the getSku method you create on the module above.

#File: app/design/frontend/<Theme_Vendor>/<Theme_Name>/Magento_Checkout/web/template/summary/item/details.html

..
<small class="product-item-sku" data-bind="text: $parent.sku"></small>
..

#3 Install module and re-deploy static file

Now you will need to install your module by running the command

$ bin/magento setup:upgrade

And re-compile and re-deploy static content if needed (if you are not running on developer mode)

$ bin/magento setup:di:compile
$ bin/magento setup:static-content:deploy

And clear your cache…

$ bin/magento cache:flush