1

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?

2
  • did you find a solution to this?
    – zekia
    Jan 2, 2020 at 10:35
  • No, didn't get any solutio. Even I didn't try after that. Jan 3, 2020 at 7:42

2 Answers 2

1

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

to

$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>
5
  • Hi, I have tried this but after that checkout is not working. Mar 28, 2018 at 6:16
  • Okay, i will look on it
    – Amit Bera
    Mar 28, 2018 at 7:14
  • <strong class="product-item-name" data-bind="text: $parent.name"></strong> how to pass URL? Mar 28, 2018 at 9:12
  • have you got anything? Apr 26, 2018 at 11:08
  • how to add custom phtml page link in checkout page..please help me.. if i am clicking that it have to redirect to another page Oct 29, 2018 at 13:33
1

It is working.

In details.js I replaced

getBrand: function(quoteItem) {
    var item = this.getItem(quoteItem.item_id);
    return item.brand;
},

with

getUrl: function(quoteItem) {
    var item = this.getItem(quoteItem.item_id);
    return item.url;
},

In details.html file changed the

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

to

<a target="_blank" data-bind="attr: { href: getUrl($parent) }">
    <strong class="product-item-name" data-bind="text: $parent.name"></strong>
</a>

and removed the code

<!-- ko if: (getBrand($parent)) -->
<div class="product-item-brand">
    <span class="label"><!-- ko i18n: 'Brand:' --><!-- /ko --></span>
    <span class="value" data-bind="text: getBrand($parent)"></span>
</div>
<!-- /ko -->
1
  • I tried your solution but didn't work. item.url is null/undefined.
    – zekia
    Jan 2, 2020 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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