I want to display remove and Edit Icon in order summary section in checkout page, I have tried below changes:


I have added Edit / Delete links like this:

<div class="primary">
     <a data-bind="attr: {href: getConfigUrl($parent.item_id),title: $t('Edit item')}" class="action edit">
          <span data-bind="i18n: 'Edit'"></span>
<div class="secondary">
     <a href="#" data-bind="attr: {'data-post': getDataPost($parent.item_id),title: $t('Delete item')}" class="action delete">
        <span data-bind="i18n: 'Remove'"></span>

In /magento_demo/vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js I have done below changes:

    function (Component,url,customerData,$,ko, _) {
        "use strict";
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/summary/item/details'
            getValue: function(quoteItem) {
                var itemId = elem.data('cart-item'),
                itemQty = elem.data('item-qty');
                return quoteItem.name;
            getDataPost: function(itemId) { 
                var itemsData = window.checkoutConfig.quoteItemData;
                var obj = {};
                var obj = {
                    data: {}

                itemsData.forEach(function (item) {
                    if(item.item_id == itemId) { 
                        var mainlinkUrl = url.build('checkout/cart/delete/');
                        var baseUrl = url.build('checkout/cart/');
                        obj.action = mainlinkUrl;
                        obj.data.id= item.item_id;
                        obj.data.uenc = btoa(baseUrl);
                return JSON.stringify(obj);
            getConfigUrl: function(itemId) { 
                var itemsData = window.checkoutConfig.quoteItemData;
                var configUrl = null;
                var mainlinkUrl = url.build('checkout/cart/configure');
                var linkUrl;
                itemsData.forEach(function (item) {
                    var itm_id = item.item_id;
                    var product_id = item.product.entity_id;
                    if(item.item_id == itemId) { 
                        linkUrl = mainlinkUrl+"/id/"+itm_id+"/product_id/"+product_id;
                if(linkUrl != null) {
                    return linkUrl;
                else {
                    return '';


But when I click on delete button, it just redirecting to cart page but not deleting product, what can be the issue here.


it's deleting the product when checked in the cart. To direct to the checkout page itself, in /magento_demo/vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js,

replace var baseUrl = url.build('checkout/cart/'); with var baseUrl = url.build('checkout/'); .

Check the above. It is working fine for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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