4

How to delete the item from cart in checkout? File Magento_Checkout/web/template/summary/item/details.html

<div class="cart-item__col-subtotal">
   <div class="cart-item__subtotal" >
       <div class="cart-item__delete" data-bind="click: console.log($parent.item_id)"><span data-bind="i18n: 'Delete'"></span></div>
       <!-- ko foreach: getRegion('after_details') -->
       <!-- ko template: getTemplate() --><!-- /ko -->
       <!-- /ko -->
   </div>
</div>

How to connect js file and delete item on click?

  • This functionality is native in Luma – Serhii Havrylchuk Feb 12 at 8:56
  • How to add this functionality? – Andrey Okhotnikov Feb 12 at 8:59
  • You should check \vendor\magento\module-checkout\view\frontend\templates\cart\item\renderer\actions\remove.phtml – Serhii Havrylchuk Feb 12 at 9:04
1

vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js

define([
    'uiComponent',
    'mage/url'
], function (Component, url) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/summary/item/details'
        },

        /**
         * @param {Object} quoteItem
         * @return {String}
         */
        getValue: function (quoteItem) {
            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/');
                    console.log(mainlinkUrl);
                    obj.action = mainlinkUrl;
                    obj.data.id= item.item_id;
                    obj.data.uenc = btoa(baseUrl);
                }
            });
            return JSON.stringify(obj);
        }
    });
});

vendor/magento/module-checkout/view/frontend/web/template/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="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 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>
    </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>

Note: I modified core files for testing purpose only. You should create extension to override those files.

  • checkout is implemented on ui components (single page application). How to use php? – Andrey Okhotnikov Feb 12 at 9:15
  • I updated answer. Please check. It is working for me. – Kishan Patadia Feb 12 at 9:59
  • Thanks, but after deleting a redirect to the main page, how to stay in checkout – Andrey Okhotnikov Feb 12 at 10:08
  • It will redirect only if cart has no items. If you have two items and remove one then it will redirect in same page. Try it and let me know. – Kishan Patadia Feb 12 at 10:10
  • no, redirect anyway – Andrey Okhotnikov Feb 12 at 10:13

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.