5

In Magento_2_Installation/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html, data-bindings (via the knockout js files) places the name and qty of the item to be displayed in the Sidebar Summary. How would I also pull in the size of the item to be displayed along with the name and qty using data-binding?

For reference, I've included the file: Magento_2_Installation/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html

<div class="product-item-inner">
    <div class="product-item-name-block">
        <strong class="product-item-name" data-bind="text: $parent.name"></strong>
        <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 -->

3

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:

  1. Registration.php : app\code\Sejal\Flavor\registration.php
  2. di.xml : app\code\Sejal\Flavor\etc\di.xml
  3. module.xml : app\code\Sejal\Flavor\etc\module.xml
  4. ConfigProviderPlugin.php : app\code\Sejal\Flavor\Plugin\ConfigProviderPlugin.php
  5. 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>

However the flavor is displayed only on checkout shipping information page not on payment page.

0

I have created a module that adds custom attribute "master_id" in checkout summary.

I referred this link https://www.magevision.com/blog/post/get-a-product-attribute-in-checkout-summary-magento-2/

SampWork/ConfigCheckoutDynamicPCB/registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'SampWork_ConfigCheckoutDynamicPCB',
    __DIR__
);

SampWork/ConfigCheckoutDynamicPCB/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="SampWork_ConfigCheckoutDynamicPCB" setup_version="1.0.0"> </module>
    </config>

SampWork/ConfigCheckoutDynamicPCB/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="master_id"/>
    </group>
</config>

SampWork/ConfigCheckoutDynamicPCB/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">
    <type name="Magento\Checkout\Model\DefaultConfigProvider">
        <plugin name="checkout-summary-product-attribute" type="SampWork\ConfigCheckoutDynamicPCB\Plugin\Checkout\Model\DefaultConfigProvider" />
    </type>
</config>

SampWork/ConfigCheckoutDynamicPCB/Plugin/Checkout/Model/DefaultConfigProvider.php

<?php
namespace SampWork\ConfigCheckoutDynamicPCB\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]['master_id'] = $quoteItem->getProduct()->getData('master_id');
        }
        return $result;
    }
}

SampWork/SampWork/ConfigCheckoutDynamicPCB/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: 'SampWork_ConfigCheckoutDynamicPCB/summary/item/details'
            },
            quoteItemData: quoteItemData,
            getValue: function(quoteItem) {
                return quoteItem.name;
            },
            getMaster: function(quoteItem) {
                var item = this.getItem(quoteItem.item_id);
                if(item.master_id){
                    return 'Master ID'+item.master_id;
                }else{
                    return '';
                }
            },
            getItem: function(item_id) {
                var itemElement = null;
                _.each(this.quoteItemData, function(element, index) {
                    if (element.item_id == item_id) {
                        itemElement = element;
                    }
                });
                return itemElement;
            }
        });
    }
);

SampWork/ConfigCheckoutDynamicPCB/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: (getMaster($parent))-->
                <span class="product-item-pcb-master" data-bind="text: getMaster($parent)"></span>
            <!-- /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>

SampWork/ConfigCheckoutDynamicPCB/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">SampWork_ConfigCheckoutDynamicPCB/js/view/summary/item/details</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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