Display Remove and Edit Item button in Order summary in Onepage Checkout page Magento2

Question

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

/magento_demo/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html

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>
     </a>
</div>
<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>
     </a>
</div>

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

define(
    [
        'uiComponent',
        'mage/url',
        'Magento_Customer/js/customer-data',
        'jquery',
        'ko',
        'underscore',
        'sidebar',
        'mage/translate'
    ],
    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) { 
                console.log(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/');
                        console.log(mainlinkUrl);
                        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.

Answer 1

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.