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

magento2onepage-checkout

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.

Best Answer

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.

Related Topic