1

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?

1 Answer 1

0

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!

1
  • Thank you for the solution!
    – Andrew
    Commented Mar 20, 2023 at 11:51

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.