3

How to add custom option value in summary section of checkout page in magento 2?

For this problems, one field is created in quote_item table with test_option test_option.

I have created one custom option name test_option and its value also set inside quote_item table with serialize.

test_option value are saved in database successfully inside quote_item table.

How to display custom_option value inside summary block of checkout page inside each product item section.

Rakesh Jesadiya
  • 42,221
  • 18
  • 132
  • 183

2 Answers2

1

Here is solution for checkout summary extension. I have tested this module with Magento 2.3.5 version. It is working fine with multiple custom options.

Step1 : app/code/Namespace/Module/etc/catalog_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
    <group name="quote_item">
        <attribute name="atribute1"/>
        <attribute name="atribute2"/>
        <attribute name="atribute3"/>
        <attribute name="atribute4"/>
        <attribute name="atribute5"/>
    </group>
</config>

Step2 : app/code/Namespace/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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="cart_items" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="details" xsi:type="array">
                                                            <item name="component"
                                                                  xsi:type="string">Namespace_Module/js/view/summary/item/details</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step3 : app/code/Namespace/Module/view/frontend/web/js/view/summary/item/details.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
define(
    [
        'uiComponent'
    ],
    function (Component) {
        "use strict";
        var quoteItemData = window.checkoutConfig.quoteItemData;
        return Component.extend({
            defaults: {
                template: 'Namespace_Module/summary/item/details'
            },
            quoteItemData: quoteItemData,
            getValue: function(quoteItem) {
                return quoteItem.name;
            },
            getAttribute1: function(quoteItem){
                var item = this.getItem(quoteItem.item_id);
                return item.aattribute1;
            },
            getAttribute2: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                return item.attribute2;
            },
            getAttribute3: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                return item.attribute3;
            },
            getAttribute4: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                return item.attribute4;
            },
            getAttribute5: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                return item.attribute5;
            },          
            getItem: function(item_id)
            {
                var itemElement = null;
                _.each(this.quoteItemData, function(element, index)
                {
                    if (element.item_id == item_id)
                    {
                        itemElement = element;
                    }
                });
                return itemElement;
            }
        });
    }
);

Step4: app/code/Namespace/Module/view/frontend/web/template/summary/item/details.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<!-- ko foreach: getRegion('before_details') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">


&lt;div class=&quot;product-item-inner&quot;&gt;
    &lt;div class=&quot;product-item-name-block&quot;&gt;
        &lt;strong class=&quot;product-item-name&quot; data-bind=&quot;html: $parent.name&quot;&gt;&lt;/strong&gt;
        &lt;div class=&quot;anyclass&quot;&gt;
        &lt;!-- ko if: (getAttribute1($parent))--&gt;
            &lt;div&gt;&lt;strong data-bind=&quot;text: getAttribute1($parent)&quot;&gt;&lt;/strong&gt;&lt;/div&gt;
        &lt;!-- /ko --&gt;
        &lt;!-- ko if: (getAttribute2($parent))--&gt;
            &lt;div&gt;Attribute2: &lt;strong data-bind=&quot;text: getAttribute2($parent)&quot;&gt;&lt;/strong&gt;&lt;/div&gt;
        &lt;!-- /ko --&gt;
        &lt;!-- ko if: (getAttribute3($parent))--&gt;
            &lt;div&gt;Attribute3: &lt;strong data-bind=&quot;text: getAttribute3($parent)&quot;&gt;&lt;/strong&gt;&lt;/div&gt;
        &lt;!-- /ko --&gt;
        &lt;!-- ko if: (getAttribute4($parent))--&gt;
            &lt;div&gt;Attribute4: &lt;strong data-bind=&quot;text: getAttribute4($parent)&quot;&gt;&lt;/strong&gt;&lt;/div&gt;
        &lt;!-- /ko --&gt;
        &lt;!-- ko if: (getAttribute5($parent))--&gt;
            &lt;div&gt;Attribute5: &lt;strong data-bind=&quot;text: getAttribute5($parent)&quot;&gt;&lt;/strong&gt;&lt;/div&gt;
        &lt;!-- /ko --&gt;
        &lt;/div&gt;
        &lt;div class=&quot;details-qty&quot;&gt;
            &lt;span class=&quot;label&quot;&gt;&lt;!-- ko i18n: 'Qty' --&gt;&lt;!-- /ko --&gt;&lt;/span&gt;
            &lt;span class=&quot;value&quot; data-bind=&quot;text: $parent.qty&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- ko foreach: getRegion('after_details') --&gt;
        &lt;!-- ko template: getTemplate() --&gt;&lt;!-- /ko --&gt;
    &lt;!-- /ko --&gt;
&lt;/div&gt;

&lt;!-- ko if: (JSON.parse($parent.options).length &gt; 0)--&gt;
&lt;div class=&quot;product options&quot; data-bind=&quot;mageInit: {'collapsible':{'openedState': 'active'}}&quot;&gt;
    &lt;span data-role=&quot;title&quot; class=&quot;toggle&quot;&gt;&lt;!-- ko i18n: 'View Details' --&gt;&lt;!-- /ko --&gt;&lt;/span&gt;
    &lt;div data-role=&quot;content&quot; class=&quot;content&quot;&gt;
        &lt;strong class=&quot;subtitle&quot;&gt;&lt;!-- ko i18n: 'Options Details' --&gt;&lt;!-- /ko --&gt;&lt;/strong&gt;
        &lt;dl class=&quot;item-options&quot;&gt;
            &lt;!--ko foreach: JSON.parse($parent.options)--&gt;
            &lt;dt class=&quot;label&quot; data-bind=&quot;text: label&quot;&gt;&lt;/dt&gt;
                &lt;!-- ko if: ($data.full_view)--&gt;
                &lt;dd class=&quot;values&quot; data-bind=&quot;html: full_view&quot;&gt;&lt;/dd&gt;
                &lt;!-- /ko --&gt;
                &lt;!-- ko ifnot: ($data.full_view)--&gt;
                &lt;dd class=&quot;values&quot; data-bind=&quot;html: value&quot;&gt;&lt;/dd&gt;
                &lt;!-- /ko --&gt;
            &lt;!-- /ko --&gt;
        &lt;/dl&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- /ko --&gt;



</div>
<!-- ko foreach: getRegion('item_message') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->

Step5 : app/code/Namespace/Module/etc/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="checkout-summary-product-attribute" type="Namespace\Module\Plugin\Checkout\Model\DefaultConfigProvider" />
</type>
</config>

Step6 : app/code/Namespace/Module/Plugin/Checkout/Model/DefaultConfigProvider.php

<?php
namespace Namespace\Module\Plugin\Checkout\Model;

use Magento\Checkout\Model\Session as CheckoutSession;


class DefaultConfigProvider
{
    /**
     * @var CheckoutSession
     /
    protected $checkoutSession;
    /*
     * Constructor
     *
     * @param CheckoutSession $checkoutSession
     */
    public function __construct(
        CheckoutSession $checkoutSession
    ) {
        $this->checkoutSession = $checkoutSession;
    }


public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
{
    $items = $result['totalsData']['items'];

    foreach ($items as $index =&gt; $item)
    {
        $quoteItem = $this-&gt;checkoutSession-&gt;getQuote()-&gt;getItemById($item['item_id']);

        $result['quoteItemData'][$index]['attribute1'] = $atts['product_attribute1'];
        $result['quoteItemData'][$index]['attribute2'] = $atts['product_attribute2'];
        $result['quoteItemData'][$index]['attribute3'] = $atts['product_attribute3'];
        $result['quoteItemData'][$index]['attribute4'] = $atts['product_attribute4'];
        $result['quoteItemData'][$index]['attribute5'] = $atts['product_attribute5'];
    }
    return $result;
}




}

No clear all cache and refresh Checkout page and enjoy!

Thumbs up for this solution.

Thank You!

irfan farooq
  • 11
  • 4
0

for the solution, follow below steps to create module for Custom Value show in Summary block

Step1 : app/code/Adamsmage/Customopt/etc/catalog_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
    <group name="quote_item">
        <attribute name="manufacturer"/>
    </group>
</config>

Step2 : app/code/Adamsmage/Customopt/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <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="cart_items" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="details" xsi:type="array">
                                                            <item name="component"
                                                                  xsi:type="string">Adamsmage_Customopt/js/view/summary/item/details</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step3 : app/code/Adamsmage/Customopt/view/frontend/web/js/view/summary/item/details.js

define(
    [
        'uiComponent'
    ],
    function (Component) {
        "use strict";
        var quoteItemData = window.checkoutConfig.quoteItemData;
        return Component.extend({
            defaults: {
                template: 'Adamsmage_Customopt/summary/item/details'
            },
            quoteItemData: quoteItemData,
            getValue: function(quoteItem) {
                return quoteItem.name;
            },
            getManufacturer: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                return item.manufacturer;
            },
            getItem: function(item_id) {
                var itemElement = null;
                _.each(this.quoteItemData, function(element, index) {
                    if (element.item_id == item_id) {
                        itemElement = element;
                    }
                });
                return itemElement;
            }
        });
    }
);

Step4: app/code/Adamsmage/Customopt/view/frontend/web/template/summary/item/details.html

<!-- ko foreach: getRegion('before_details') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">

    <div class="product-item-inner">
        <div class="product-item-name-block">
            <strong class="product-item-name" data-bind="text: $parent.name"></strong>
            <!-- ko if: (getManufacturer($parent))-->
                <strong class="product-item-manufacturer" data-bind="text: getManufacturer($parent)"></strong>
            <!-- /ko -->
            <div class="details-qty">
                <span class="label"><!-- ko i18n: 'Qty' --><!-- /ko --></span>
                <span class="value" data-bind="text: $parent.qty"></span>
            </div>
        </div>

        <!-- ko foreach: getRegion('after_details') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </div>

    <!-- ko if: (JSON.parse($parent.options).length > 0)-->
    <div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
        <span data-role="title" class="toggle"><!-- ko i18n: 'View Details' --><!-- /ko --></span>
        <div data-role="content" class="content">
            <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
            <dl class="item-options">
                <!--ko foreach: JSON.parse($parent.options)-->
                <dt class="label" data-bind="text: label"></dt>
                    <!-- ko if: ($data.full_view)-->
                    <dd class="values" data-bind="html: full_view"></dd>
                    <!-- /ko -->
                    <!-- ko ifnot: ($data.full_view)-->
                    <dd class="values" data-bind="html: value"></dd>
                    <!-- /ko -->
                <!-- /ko -->
            </dl>
        </div>
    </div>
    <!-- /ko -->
</div>

Step5 : app/code/Adamsmage/Customopt/etc/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="checkout-summary-product-attribute" type="Adamsmage\Customopt\Plugin\Checkout\Model\DefaultConfigProvider" />
    </type>
</config>

Step6 : app/code/Adamsmage/Customopt/Plugin/Checkout/Model/DefaultConfigProvider.php

<?php
namespace Adamsmage\Customopt\Plugin\Checkout\Model;
use Magento\Checkout\Model\Session as CheckoutSession;
class DefaultConfigProvider
{
    /**
     * @var CheckoutSession
     */
    protected $checkoutSession;
    /**
     * Constructor
     *
     * @param CheckoutSession $checkoutSession
     */
    public function __construct(
        CheckoutSession $checkoutSession
    ) {
        $this->checkoutSession = $checkoutSession;
    }
    public function afterGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
        array $result
    ) {
        $items = $result['totalsData']['items'];
        foreach ($items as $index => $item) {
            $quoteItem = $this->checkoutSession->getQuote()->getItemById($item['item_id']);
            $result['quoteItemData'][$index]['manufacturer'] = $quoteItem->getProduct()->getAttributeText('manufacturer');
        }
        return $result;
    }
}
Anas Mansuri
  • 2,627
  • 1
  • 11
  • 28