Get a Product Attribute in Checkout Summary

Would you like to display another product attribute or a custom one in checkout summary? Let's see together how you can do that!

In our example we will display below the product's name, the product's manufacturer. First of all we have to include the manufacturer attribute in the quote item as in not included by default. So to achieve that we have to create a file under app/code/MageVision/Blog16/etc/catalog_attributes.xml and we add the following code.

As is well known, Magento 2 checkout is built up from a series of Knockout JS components which are then rendered using the Knockout JS templating system. Magento 2 defines each one of these components and their parent / child relationship in a large XML file which can be extended or overridden in your own theme or module. For Magento 2 checkout this large XML file can be found under

vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml

The definition of component item that is responsible for the summary item details in checkout is the following.

<item name="component" xsi:type="string">MageVision_Checkout/js/view/summary/item/details</item>

So override this component we will have to create a new checkout_index_index.xml in our module, under

app/code/MageVision/Blog16/view/frontend/layout/checkout_index_index.xml

adding the following code which defines only the path to this component that we need to override.

As we can see on the code below the value of the component item is a path to JS file where also the template file for this component is declared. As we need to override this template file, this value has path to a JS file in our module. So you can easily copy the

vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js

under

app/code/MageVision/Blog16/view/frontend/web/js/view/summary/item/details.js

and replace the file's code with the code below.

Afterwards, create a html file and name it details.html under

app/code/MageVision/Blog16/view/frontend/web/template/summary/item/details.html

The only change to the original file, which can be found under

vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html

is that we added to display the product's manufacturer below the product's name.

The vendor/magento/module-checkout/Model/DefaultConfigProvider.php class is used for retrieving data in checkout. In this class the function getConfig() is returning an array of the data which is gonna used in different places in checkout. For the checkout summary template is the totalsData output array field. As we can see the product's manufacturer data is not included in that array. So we have to extend this function by creating a plugin and add the product's manufacturer to the totalsData. After having a deepper look, we found out that this is gonna work only in the shipping step, as in the payment step, the totalData array is set again only with the Magento's default quote total values. So to display the product's manufacturer in the checkout order summary in both steps we need to add the product's manufacturer into the quoteItemData array.

Create a di.xml file to declare the plugin.

Create a class under /app/code/MageVision/Blog16/Plugin/Checkout/Model/DefaultConfigProvider.php with an afterGetConfig() function, where we will add our logic of adding the product's manufacturer information.

So the now that checkout summary block will look like