Magento – how to add product link on the checkout page order summary magento 2

checkout-pagemagento-2.1.8order-summary

I want to add link on the product which is showing in order summary on checkout page.

I have found HTML code in the file:

module-checkout\view\frontend\web\template\summary\item\details.html

Code:

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

How to add href for the product name?

Best Answer

You need plugin for for class for class

Magento\Checkout\Block\Checkout\LayoutProcessor

On your plugin class ,you need pass product url as parameter of json object which is used at checkout summary

Please follow the folder and file from the blog http://www.blogtreat.com/magento-2-display-custom-product-attribute-checkout-summary/

Then you need to some changes at

$result['quoteItemData'][$index]['brand'] = $product->getResource()->getAttribute('brand')->getFrontend()->getValue($product);

$result['quoteItemData'][$index]['url'] = $product->getProductUrl().

Also on new summary.html you need to put url

<strong class="product-item-name" data-bind="text: $parent.name"></strong>

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 2 – Extend Checkout Order Summary Section

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

Best Answer

Related Solutions

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

Magento 2 – Extend Checkout Order Summary Section

Related Topic