Magento 2 : Show Custom Option value inside summary block sidebar checkout page

Question

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 .

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.

You should read: magento.stackexchange.com/questions/133334/… — Khoa TruongDinh, Sep 23, 2016 at 12:46
@rakesh have got any solution for custom option custom value display inside checkout sidebar? — Ajay Patel, Apr 12, 2018 at 4:32

irfan farooq · Accepted Answer · 2021-02-16 13:24:28Z

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">

    <div class="product-item-inner">
        <div class="product-item-name-block">
            <strong class="product-item-name" data-bind="html: $parent.name"></strong>
            <div class="anyclass">
            <!-- ko if: (getAttribute1($parent))-->
                <div><strong data-bind="text: getAttribute1($parent)"></strong></div>
            <!-- /ko -->
            <!-- ko if: (getAttribute2($parent))-->
                <div>Attribute2: <strong data-bind="text: getAttribute2($parent)"></strong></div>
            <!-- /ko -->
            <!-- ko if: (getAttribute3($parent))-->
                <div>Attribute3: <strong data-bind="text: getAttribute3($parent)"></strong></div>
            <!-- /ko -->
            <!-- ko if: (getAttribute4($parent))-->
                <div>Attribute4: <strong data-bind="text: getAttribute4($parent)"></strong></div>
            <!-- /ko -->
            <!-- ko if: (getAttribute5($parent))-->
                <div>Attribute5: <strong data-bind="text: getAttribute5($parent)"></strong></div>
            <!-- /ko -->
            </div>
            <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>
<!-- 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 => $item)
        {
            $quoteItem = $this->checkoutSession->getQuote()->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!

Anas Mansuri · Accepted Answer · 2019-07-05 09:38:08Z

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;
    }
}

its not work in magento 2.3.5 version
– Divya Sekar
Jul 20, 2020 at 8:41 — Divya Sekar, Jul 20, 2020 at 8:41

Stack Exchange Network

Magento 2 : Show Custom Option value inside summary block sidebar checkout page

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
magento2
checkout
or ask your own question.

Linked

Hot Network Questions

Magento 2 : Show Custom Option value inside summary block sidebar checkout page

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged magento2checkout or ask your own question.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
magento2
checkout
or ask your own question.