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?

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

1 Answer 1

3

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.

9
  • checkout is implemented on ui components (single page application). How to use php? Feb 12, 2019 at 9:15
  • I updated answer. Please check. It is working for me. Feb 12, 2019 at 9:59
  • Thanks, but after deleting a redirect to the main page, how to stay in checkout Feb 12, 2019 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. Feb 12, 2019 at 10:10
  • no, redirect anyway Feb 12, 2019 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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