Magento – Magento2 : Checkout items summary customization issue

checkoutmagento2

In Magento 2 I try to customize checkout Items summary. I then created a module with :

  • Vendor/Module/Plugin/Checkout/Summary/ItemPlugin.php
namespace Vendor\Module\Plugin\Checkout\Summary;

use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Catalog\Model\Product;
use Magento\Quote\Model\Quote\Item;

class ItemPlugin
{   
    protected $productRepo;

    public function __construct(
            ProductRepositoryInterface $productRepository
            ) 
    {
        $this->productRepo = $productRepository;
    }

    public function afterGetConfig(\Magento\Checkout\Model\DefaultConfigProvider $subject, array $result)
    {
        $TDitems = $result['totalsData']['items'];

        foreach ($TDitems as $key=>$item)
        {
            $result['totalsData']['items'][$key]['custinfo']='foo;  
        }

        return $result;
    }   
}

which adds custom parameters to items.

  • Vendor/Module/etc/di.xml

  • Vendor/Module/view/frontend/web/js/view/summary/item/details.js

    define(
[
    'uiComponent'
],
function (Component) {
    "use strict";

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/summary/item/details'
        },
        getValue: function(quoteItem) {
            return quoteItem.name;
        }
    });
}
);

  • Vendor/Module/view/frontend/web/template/checkout/summary/item/details.html

    <!-- ko foreach: getRegion('before_details') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<div class="product-item-details">
<div class="product-item-inner">
    <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>
    <!-- ko foreach: getRegion('after_details') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    <!-- /ko -->
</div>

<h1>toto</h1>
<!-- ko if: ($parent.custinf)-->
<strong class="product-item-name" data-bind="text: $parent.custinfo"></strong>
<!-- /ko -->

<!-- ko if: (JSON.parse($parent.options).length > 0)-->
<div class="product options" data-bind="mageInit: {'collapsible':{'openedState': 'active'}}">
...
</div>
<!-- /ko -->

Issues :

When I go from cart to checkout page, plugin is called, custinfo parapeter is added and displayed correctly.

When I go to next checkout step, the custom template is called (I can see the toto h1), but custinfo parameter is not displayed.
NB: I have a breakpoint on the plugin, and going from first checkout step to second checkout step does not call the plugin.

When I reload the second checkout step page, plugin is called, but parameter custinfo is still not displayed

When i go back from second step to first checkout page by clicking the "Shipping" step link, plugin is not called and custinfo param is not diplayed. I need to reload the page to make it appears.

Any idea of what is happening?

Thank you for your help,

EDIT1 :

I added in the details.html a Knockout command to log to console the $parent Object. On first checkout step I get :

Object { item_id: "92", name: "Blah", qty: 4, price: "18.0700", base_price: "18.0700", discount_percent: "0.0000", discount_amount: "0.0000", base_discount_amount: "0.0000", tax_percent: "0.0000", tax_amount: "0.0000", 14 more… }

On the second step I get :

Object { item_id: 92, price: 18.07, base_price: 18.07, qty: 4, row_total: 72.28, base_row_total: 72.28, row_total_with_discount: 0, tax_amount: 0, base_tax_amount: 0, tax_percent: 0, 11 more… }

clearly not the same object, but can not find where the second one is comming from (internal, session, cache, …??)

Best Answer

On the second step of the checkout the checkout summary is updated via ajax and the totalsData array is populated again with the default quote total values as it implements the following interface Magento\Quote\Api\Data\TotalsInterface, that means your custom data is gone. A solution will be to save your custom data in the quoteItemData array and get it from there. This nice tutorial can help you on that https://www.magevision.com/blog/post/get-a-product-attribute-in-checkout-summary-magento-2/

Related Topic