Magento 2 – Extend Checkout Order Summary Section

checkout-pagemagento-2.1.3order-summaryshipping-methods

I am trying to add custom text in beside shipping method section in Order Summary from Magento 2. But my data is not affecting.

For this, I have added custom text in root\vendor\magento\module-checkout\view\frontend\web\template\summary\shipping.html file. But it's not effecting.

<span class="title">Custom Text</span>

Could you please suggest me which file I need to extend to add custom text?

Best Answer

File path should be below

vendor/magento/module-tax/view/frontend/web/template/checkout/summary/shipping.‌html file

Add your custom <span class="title">Custom Text</span> text like below example

<!-- ko if: isExcludingDisplayed() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="title">Custom Text</span>
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <!-- ko if: isCalculated() -->
            <span class="price"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
            <!-- ko ifnot: isCalculated() -->
            <span class="not-calculated"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
        </td>
    </tr>
<!-- /ko -->

Run below commands

php bin/magento setup:upgrade 
php bin/magento setup:static-content:deploy

Related Solutions

Adding Custom Attribute to Checkout Order Summary Not Reflecting on Payment Page – Solution

I found a solution!

Updated ConfigProviderPlugin.php

<?php

namespace Abbottstore\Flavor\Plugin;

use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Quote\Api\CartItemRepositoryInterface as QuoteItemRepository;


class ConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
    private $checkoutSession;
    private $quoteItemRepository;
    protected $scopeConfig;

    public function __construct(
        CheckoutSession $checkoutSession,
        QuoteItemRepository $quoteItemRepository,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->_scopeConfig = $scopeConfig;
        $this->checkoutSession = $checkoutSession;
        $this->quoteItemRepository = $quoteItemRepository;
    }


    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {
            $quoteId = $this->checkoutSession->getQuote()->getId();            
            if ($quoteId) {            
                $itemOptionCount = count($result['totalsData']['items']);
                $quoteItems = $this->quoteItemRepository->getList($quoteId);
                $isbnOptions = array();
                foreach ($quoteItems as $index => $quoteItem) {
                    $quoteItemId = $quoteItem['item_id'];
                    $isbnOptions[$quoteItemId] = $quoteItem['isbn'];               
                }

                for ($i=0; $i < $itemOptionCount; $i++) {
                $quoteParentId = $result['totalsData']['items'][$i]['item_id'];
                $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
                $productId = $result['quoteItemData'][$i]['product']['entity_id'];
                $productObj = $objectManager->create('\Magento\Catalog\Model\Product')->load($productId);

                $productFlavours = $productObj->getResource()->getAttribute('flavors')->getFrontend()->getValue($productObj);         
                if($productFlavours == 'No' || $productFlavours == 'NA'){
                   $productFlavours = '';
                }
                $result['quoteItemData'][$i]['flavor'] = $productFlavours;
                json_encode($result);
                }
        }
        return $result;
        }

}

Override details.js (vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js) and wrote this code.

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

    });
}

);

and in details.html added this line

<span class="product-item-new" data-bind="text: getItemFlavor($parent)"></span>

Magento – Show Billing Address Form In Checkout First Step In magento 2

The layout nodes for actual fields for the address are added the block methodMagento\Checkout\Block\Checkout\LayoutProcessor::process. In order to move these dynamically added layout nodes, you have to write a plugin. This is well explained in the following Magento StackExchange post:

how to reorder (switch) billing address before shipping address

Best Answer

Related Solutions

Adding Custom Attribute to Checkout Order Summary Not Reflecting on Payment Page – Solution

Magento – Show Billing Address Form In Checkout First Step In magento 2

Related Topic