Magento – Magento 2: Minicart Display Quantity

magento-2.1mini-cartpricequantity

I want to display quantity in mini cart as following:

enter image description here

This is how it displays now.The field Qty is a text field

enter image description here

I want to display it as qty X productprice

This is the code

                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}"></label>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                           type="number"
                           size="4"
                           class="item-qty cart-item-qty"
                           maxlength="12"/>
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                           }"
                            class="update-cart-item"
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>

Please suggest some methods.

Best Answer

The minicart is powered through Knockout Js - all i would do is the following:

Make the correct file inside of the corresponding theme file:

Vender\Theme\Magento_Checkout\template\minicart\item\default.html

Then find section you wish to change, this would be the same as your code above with some slight modifications: I have also added in the product price here, binding the item price into a span, you'll need to do some styles to fix the layout.

<div class="details-qty qty">
    <label class="label" data-bind="i18n: 'Qty', attr: {
                       for: 'cart-item-'+item_id+'-qty'}"></label>
   <span data-bind="html: item.product_price"></span>
   <span data-bind="text: qty"></span>
</div>

You can simply pass through the QTY as a text value into your element. This will then render out the quantity that is currently on this product. Passing through the item.product_price as html will render into the element you have data-bind it to.

Hope you get it sorted with this :)

Related Topic