Skip to content

Product Url inside order summary checkout

I want to put the name and the image of the product, in the checkout order summary, inside an anchor tag with the destination to the product page. I created a new module but without any good result:

  • VENDOR/ProductAttributeCheckout/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="MagentoCheckoutModelDefaultConfigProvider">
        <plugin name="AddAttPlug" type="VENDORProductAttributeCheckoutPluginConfigProviderPlugin" />
    </type>
</config>
  • VENDOR/ProductAttributeCheckout/Plugin/ConfigProviderPlugin.php
<?php

namespace VENDORProductAttributeCheckoutPlugin;

use MagentoCheckoutModelSession as CheckoutSession;
use MagentoQuoteApiCartItemRepositoryInterface as QuoteItemRepository;


class ConfigProviderPlugin extends MagentoFrameworkModelAbstractModel
{
    private $checkoutSession;
    private $quoteItemRepository;
    protected $scopeConfig;

    public function __construct(
        CheckoutSession $checkoutSession,
        QuoteItemRepository $quoteItemRepository,
        MagentoFrameworkAppConfigScopeConfigInterface $scopeConfig
    ) {
        $this->_scopeConfig = $scopeConfig;
        $this->checkoutSession = $checkoutSession;
        $this->quoteItemRepository = $quoteItemRepository;
    }


    public function afterGetConfig(MagentoCheckoutModelDefaultConfigProvider $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 = MagentoFrameworkAppObjectManager::getInstance();
                $productId = $result['quoteItemData'][$i]['product']['entity_id'];
                $productObj = $objectManager->create('MagentoCatalogModelProduct')->load($productId);
                $productUrl = $productObj->getProductUrl();
                $result['quoteItemData'][$i]['url'] = $productUrl;
                json_encode($result);
            }
        }
        return $result;
        }

}
  • VENDOR/ProductAttributeCheckout/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: 'VENDOR_ProductAttributeCheckout/summary/item/details' OR Magento_Checkout
        },
        quoteItemData: quoteItemData,
        getValue: function(quoteItem) {
            return quoteItem.name;
        },
        getProductUrl: function(quoteItem) {
            var itemProduct = this.getItemProduct(quoteItem.item_id);
            return quoteItem;
        },
    });
}

);
  • VENDOR/ProductAttributeCheckout/view/frontend/web/template/summary/item/details.html
<div class="product-item-details">

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

In the html file is only a test to see if I get any url. Can anyone help me?