I am trying to add a custom product attribute to the list of items on the summary section in the checkout in Magento 2. The template file is at Magento_Checkout/web/template/summary/item/details.html
and looking to display the value of the custom attribute before the product name. Any idea on how this value is added to the ko template? Looks like there is another question for this here but was never answered.
-
magento.stackexchange.com/questions/116642/…– ArjunAug 24, 2016 at 5:14
-
1@Arjun This is different. This referenced article really shows the cart page not checkout. The cart is a simple phtml template. The checkout is a ko page and is getting its source from somewhere else than the mini-cart. Not sure why all cart items displayed in mini cart, cart, and checkout all are built in different ways. But the actual checkout summary is where I need to see how to add the custom attribute.– sudoprattAug 24, 2016 at 7:09
-
@sudopratt, Have you get idea about that, How to add a custom product attribute to the list of items on the summary section in the checkout in Magento 2 ?– Sarfaraj SipaiDec 20, 2017 at 9:35
4 Answers
You will have to create a plugin for that. I wanted to add product flavor to order summary. This is the way I created a plugin and achieved what I wanted.
Vendor = Sejal
Files you need to create:
- Registration.php :
app\code\Sejal\Flavor\registration.php
- di.xml :
app\code\Sejal\Flavor\etc\di.xml
- module.xml :
app\code\Sejal\Flavor\etc\module.xml
- ConfigProviderPlugin.php :
app\code\Sejal\Flavor\Plugin\ConfigProviderPlugin.php
- details.html : copy of
vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html
you can override this file in your theme like this
app\design\frontend\Vendor\themename\Magento_Checkout\web\template\summary\item\details.html
Code: registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Sejal_Flavor',
__DIR__
);
di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\DefaultConfigProvider">
<plugin name="AddAttPlug" type="Sejal\Flavor\Plugin\ConfigProviderPlugin" />
</type>
</config>
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="Sejal_Flavor" setup_version="1.0.0">
</module>
</config>
ConfigProviderPlugin.php
<?php
namespace Sejal\Flavor\Plugin;
class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
{
$items = $result['totalsData']['items'];
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
for($i=0;$i<count($items);$i++){
$quoteId = $items[$i]['item_id'];
$quote = $objectManager->create('\Magento\Quote\Model\Quote\Item')->load($quoteId);
$productId = $quote->getProductId();
$product = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);
$productFlavours = $product->getResource()->getAttribute('flavors')->getFrontend()->getValue($product);
if($productFlavours == 'No' || $productFlavours == 'NA'){
$productFlavours = '';
}
$items[$i]['flavor'] = $productFlavours;
}
$result['totalsData']['items'] = $items;
return $result;
}
}
details.html
Copy vendor\magento\module-checkout\view\frontend\web\template\summary\item\details.html
in theme and add
<div class="product-item-flavor" data-bind="text: $parent.flavor"></div>
below
<strong class="product-item-name" data-bind="text: $parent.name"></strong>
That's it! Hope it helps!
-
I have tried in Aheadworks onestepcheck extension but its not working. How can i do ? Feb 25, 2019 at 8:08
-
@Sejal Shah please answer magento.stackexchange.com/questions/279918/… Jul 2, 2019 at 8:31
-
-
2This works great for the shipping step, but on the billing step .product-item-flavor stays empty– jonasGJan 30, 2020 at 6:42
-
Sejal answered my question here: magento.stackexchange.com/questions/178398/…– jonasGJan 30, 2020 at 7:07
if you want to add your custom attribute in order summary you need to override: (Layouts) 1) checkout_cart_index :
<referenceBlock name="checkout.cart.totals">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="block-totals" xsi:type="array">
<item name="children" xsi:type="array">
<item name="processingfee" xsi:type="array">
<item name="component" xsi:type="string">Dedicated_Processingfee/js/view/checkout/cart/totals/processingfee</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Dedicated_Processingfee/checkout/cart/totals/processingfee</item>
<item name="title" xsi:type="string" translate="true">Processing Fee</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
2) checkout_index_index :
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="totals" xsi:type="array">
<item name="children" xsi:type="array">
<item name="processingfee" xsi:type="array">
<item name="component" xsi:type="string">Dedicated_Processingfee/js/view/checkout/cart/totals/processingfee</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Dedicated_Processingfee/checkout/cart/totals/processingfee</item>
<item name="title" xsi:type="string" translate="true">Processing Fee</item>
</item>
</item>
</item>
</item>
<item name="cart_items" xsi:type="array">
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="children" xsi:type="array">
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Tax/js/view/checkout/summary/item/details/subtotal</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
3) sales_order_view :
<referenceContainer name="order_totals">
<block class="Dedicated\Processingfee\Block\Sales\Order\ProcessingFee" name="processingfee"/>
</referenceContainer>
then add custom js to get your custom attribute value like this in your module : at /view/frontend/web/js/view/checkout/cart/totals/processingfee.js:
define(
[
'Dedicated_Processingfee/js/view/checkout/summary/processingfee'
],
function (Component) {
'use strict';
return Component.extend({
/**
* @override
*/
isDisplayed: function () {
return true;
}
});
}
);
add another js to calculate value with total billing amount in : /view/frontend/web/js/view/checkout/summary/processingfee.js
define(
[
'Magento_Checkout/js/view/summary/abstract-total',
'Magento_Checkout/js/model/quote',
'Magento_Catalog/js/price-utils',
'Magento_Checkout/js/model/totals'
],
function (Component, quote, priceUtils, totals) {
"use strict";
return Component.extend({
defaults: {
isFullTaxSummaryDisplayed: window.checkoutConfig.isFullTaxSummaryDisplayed || false,
template: 'Dedicated_Processingfee/checkout/summary/processingfee'
},
totals: quote.getTotals(),
isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
isDisplayed: function() {
return this.isFullMode();
},
getValue: function() {
var price = 0;
if (this.totals()) {
price = totals.getSegment('processingfee').value;
}
return this.getFormattedPrice(price);
},
getBaseValue: function() {
var price = 0;
if (this.totals()) {
price = this.totals().base_fee;
}
return priceUtils.formatPrice(price, quote.getBasePriceFormat());
}
});
}
);
That set you will find you attribute with value Thanks :)
-
1I dont think @sudopratt wants to add a row in totals coumn rather a product attribute below product name like short description. Nov 21, 2016 at 12:21
-
@ Sunil Verma have you got a solution for this . I need to do exactly same but cant get any reference Mar 6, 2017 at 7:59
-
Yes, its show custom attribute but when move to next step for #payment then custom attribute disappear. why? Mar 6, 2020 at 6:06
-
Could you please check this stackoverflow.com/questions/59243164/… Jun 14, 2020 at 12:45
For me was $result['totalsData']['items'] empty. I have used following implementation instead:
public function afterGetConfig(
\Magento\Checkout\Model\DefaultConfigProvider $subject,
array $result
) {
foreach ($result['quoteItemData'] as $index => $itemData) {
$product = $this->productRepository->getById($itemData['product_id']);
$result['quoteItemData'][$index]['flavor'] = $product->getFlavor();
}
return $result;
}
I need to display simple product name of the configurable. So I used code as below. But same simple name is displaying when I choose same configurable options in the checkout order summary. So How I display correct simple product names?
public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
{
$items = $result['totalsData']['items'];
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
for($i=0;$i<count($items);$i++){
$quoteId = $items[$i]['item_id'];
$quote = $objectManager->create('\Magento\Quote\Model\Quote\Item')->load($quoteId);
$productId = $quote->getProductId();
$product = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);
$productTypeInstance = $product->getTypeInstance();
$usedProducts = $productTypeInstance->getUsedProducts($product);
foreach ($usedProducts as $child) {
$childName = $child->getName(); //Child Product Name
}
$items[$i]['childname'] = $childName;
}
$result['totalsData']['items'] = $items;
return $result;
}