Product Url inside order summary checkout

Question

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="Magento\Checkout\Model\DefaultConfigProvider">
 <plugin name="AddAttPlug" type="VENDOR\ProductAttributeCheckout\Plugin\ConfigProviderPlugin" />
 </type>
</config>

• VENDOR/ProductAttributeCheckout/Plugin/ConfigProviderPlugin.php

<?php
namespace VENDOR\ProductAttributeCheckout\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);
 $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?

Answer 1

Welcome to Magento StackExchange!

I would recommend defining your own config provider instead of the plugin approach you have above. Something like this:

<type name="Magento\Checkout\Model\CompositeConfigProvider">
 <arguments>
 <argument name="configProviders" xsi:type="array">
 <item name="VENDOR_ProductAttributeCheckout_config_provider" xsi:type="object">VENDOR\ProductAttributeCheckout\Model\CustomProductDataConfigProvider</item>
 </argument>
 </arguments>
</type>

The config provider would define something like customProductData similar to what you are doing above in your current plugin, maybe something like this:

class CustomProductDataConfigProvider implements ConfigProviderInterface
{
 public function getConfig()
 {
 $customProductData = [];
 ...
 foreach ($quoteItems as $quoteItem) {
 $product = $quoteItem->getProduct();
 $customProductData[$quoteItem->getItemId()] = [
 'isbn' => $quoteItem->getData('isbn'),
 'url' => $product->getProductUrl()
 ];
 }
 return ['customProductData' => $customProductData];
 }
}

I think you are on the right track but I think you are not extending the Magento_Checkout/summary/item/details component properly. For more context, you should review how to declare a JavaScript mixin.

In the end you should create a new file called VENDOR/ProductAttributeCheckout/view/frontend/requirejs-config.js that should look something like this:

var config = {
 config: {
 mixins: {
 'Magento_Checkout/js/view/summary/item/details': {
 'VENDOR_ProductAttributeCheckout/js/view/summary/item/details': true
 }
 }
 }
};

And in the VENDOR/ProductAttributeCheckout/view/frontend/web/js/view/summary/item/details.js file it should be something more like this:

define([], function () {
 "use strict";
 var customProductData = window.checkoutConfig.customProductData;
 return function (SummaryItemDetails) {
 return SummaryItemDetails.extend({
 customProductData: customProductData,
 getProductIsbn: function(quoteItem) {
 return this.customProductData[quoteItem.item_id]['isbn'];
 },
 getProductUrl: function(quoteItem) {
 return this.customProductData[quoteItem.item_id]['url'];
 },
 });
 }
});

Hope that helps you unlock some things!

• Andrew: Thank you for the solution!