Magento2 – How to Remove Qty Box from Mini Cart and Checkout Page

magento2mini-cartoverriding

I have a site to buy a unique product (qty =1) so i need to eliminate Qty from mini cart, i just overrided /web/template/minicart/item/default.html : i removed div Qty but she still there any idea how to override and what to override exactly thanks in advance

Best Answer

Copy the following file:

/vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

to your theme:

app/design/frontend/Vendor/Theme/Magento_Checkout/template/minicart/item/default.html

And remove the qty code like below:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<li class="item product product-item" data-role="product-item">
    <div class="product">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <span class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </span>
        <!-- /ko -->

        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, text: product_name"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <!-- ko text: product_name --><!-- /ko -->
                <!-- /ko -->
            </strong>

            <!-- ko if: options.length -->
            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>

                <div data-role="content" class="content">
                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                    <dl class="product options list">
                        <!-- ko foreach: { data: options, as: 'option' } -->
                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                        <dd class="values">
                            <!-- ko if: Array.isArray(option.value) -->
                                <span data-bind="html: option.value.join('<br>')"></span>
                            <!-- /ko -->
                            <!-- ko ifnot: Array.isArray(option.value) -->
                                <span data-bind="html: option.value"></span>
                            <!-- /ko -->
                        </dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->

            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->

                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                    <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </div>

            <div class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                        <span data-bind="i18n: 'Edit'"></span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</li>

Now run static-content deploy and check.

For Checkout Cart Page:

Copy the file

/vendor/magento/module-checkout/view/frontend/templates/cart/form.phtml

to your theme:

app/design/frontend/Vendor/Theme/Magento_Checkout/templates/cart/form.phtml

and remove the Qty from table head.

Now copy the file

/vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml

to your theme:

app/design/frontend/Vendor/Theme/Magento_Checkout/templates/cart/item/default.phtml

And remove the Qty block.

Refresh the cache and check.

Related Solutions

Magento2 Mini-Cart KnockoutJS – Getting the Product SKU in the Header Mini-Cart

As far as I know, the header minicart will get the data from customer data

vendor/magento/module-checkout/view/frontend/web/js/view/minicart.js

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'sidebar'
], function (Component, customerData, $, ko) {
    'use strict';
    ......
    this.cart = customerData.get('cart');
    ......
}

Look into the customer data js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, we can get the customer data from local storage. For example, in your browser console, run the line: localStorage.getItem('mage-cache-storage'), we also can get the cart information.

{
  "cart": {
    "summary_count": 1,
    ....
    "items": [
      {
      ......   
        "qty": 1,
        "item_id": "11728",
        "configure_url": "http://magento2-demo/checkout/cart/configure/id/11728/product_id/1817/",
        "is_visible_in_site_visibility": true,
        "product_name": "Breathe-Easy Tank",
        "product_url": "http://magento2-demo/breathe-easy-tank.html",
        "product_has_url": true,
        "canApplyMsrp": false
      }
    ],
    .......
  }
}

Navigate to vendor/magento/module-checkout/CustomerData/DefaultItem.php

protected function doGetItemData()
    {
       .......
        return [
            'options' => $this->getOptionList(),
            'qty' => $this->item->getQty() * 1,
            'item_id' => $this->item->getId(),
            'configure_url' => $this->getConfigureUrl(),
            'is_visible_in_site_visibility' => $this->item->getProduct()->isVisibleInSiteVisibility(),
            'product_name' => $this->item->getProduct()->getName(),
            'product_url' => $this->getProductUrl(),
            'product_has_url' => $this->hasProductUrl(),
           .....
    }

vendor/magento/module-checkout/CustomerData/AbstractItem.php

/**
 * {@inheritdoc}
 */
public function getItemData(Item $item)
{
    $this->item = $item;
    return \array_merge(
        ['product_type' => $item->getProductType()],
        $this->doGetItemData()
    );
}

To get the SKU item, I think we need to add data to getItemData() (Should try with Plugin). And then override the template html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

 <div class="product-item-details">

                    <!-- ko text: product_sku --><!-- /ko -->

Update Magento 2.1.0 version

In the Magento 2.1.0, you only need to override default.html. This is because the method doGetItemData has already the product sku.

Magento 2 Template Overriding – Override HTML Template from Custom Module Not Working

Here is the simple method to show changes of HTML and JS files without clearing the cache of the browser.

Right click on page and inspect element and open network tab. Now Double click on Html or Js file which you edited. And just full refresh html or js page in new tab.

Now Done. You can see changes on next refresh page.

Screenshot:

Best Answer

Related Solutions

Magento2 Mini-Cart KnockoutJS – Getting the Product SKU in the Header Mini-Cart

Update Magento 2.1.0 version

Magento 2 Template Overriding – Override HTML Template from Custom Module Not Working

Related Topic