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

knockoutjsmagento2mini-cart

I want to be able to display the product SKU in the mini-cart of a Magento 2 site. But I'm not sure how to use KnockoutJS to pull in additional product information. The template that is being called is here:

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

And contains code like:

<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>

So my direct question would be: where are the values for the product set and how can I change them around to add or remove product details?

Best Answer

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. enter image description here

{
  "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.

Related Topic