Obtener el SKU del producto en el mini carrito de cabecera

Quiero poder mostrar el producto SKUen el carrito pequeño de un sitio de Magento 2. Pero no estoy seguro de cómo usar KnockoutJSpara obtener información adicional del producto. La plantilla que se llama está aquí:

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

Y contiene código como:

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

Entonces, mi pregunta directa sería: ¿dónde están los valores para el conjunto de productos y cómo puedo cambiarlos para agregar o eliminar detalles del producto?

Hasta donde yo sé, el minicart de encabezado obtendrá los datos de los datos del cliente

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');
    ......
}

Mire los datos del cliente js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, podemos obtener los datos del cliente del almacenamiento local. Por ejemplo, en la consola de su navegador, ejecute la línea: localStorage.getItem('mage-cache-storage')también podemos obtener la información del carrito.

{
  "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
      }
    ],
    .......
  }
}

Navegue a 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()
    );
}

Para obtener el elemento SKU, creo que necesitamos agregar datos a getItemData()(Debería intentarlo con el complemento ). Y luego anular la plantilla html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Actualización de la versión Magento 2.1.0

En Magento 2.1.0, solo necesita anular default.html. Esto se debe a que el método doGetItemDataya tiene el producto sku.

En primer lugar, una muy buena explicación de @Khoa TruongDinh sobre el flujo de obtener el elemento en la plantilla de minicart.

¿Cómo puedo cambiarlos para agregar o eliminar detalles del producto?

Encontré una manera de extender la plantilla de minicart con atributos personalizados del producto. Para hacer eso primero, debe anular vendor / magento / module-checkout / CustomerData / DefaultItem.php con DI Preferences

Crear aplicación / código / Proveedor / Módulo / etc / di.xml para anular el objeto DefaultItem

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Checkout\CustomerData\DefaultItem" type="Vendor\Module\Preferences\MiniCartItem" />
</config>

Luego, cree un nuevo objeto para anular el método doGetItemData () y agregue custom_attribute con la clave product_custom_attribute

Archivo: app / code / Vendor / Module / Preferences / MiniCartItem.php

namespace Vendor\Module\Preferences;

class MiniCartItem extends \Magento\Checkout\CustomerData\DefaultItem
{

    public function __construct(
        \Magento\Catalog\Helper\Image $imageHelper,
        \Magento\Msrp\Helper\Data $msrpHelper,
        \Magento\Framework\UrlInterface $urlBuilder,
        \Magento\Catalog\Helper\Product\ConfigurationPool $configurationPool,
        \Magento\Checkout\Helper\Data $checkoutHelper,
        \Magento\Catalog\Helper\Output $helper,
        \Magento\Catalog\Model\Product $productModel
    ) {
        $this->configurationPool = $configurationPool;
        $this->imageHelper = $imageHelper;
        $this->msrpHelper = $msrpHelper;
        $this->urlBuilder = $urlBuilder;
        $this->checkoutHelper = $checkoutHelper;
        $this->helper = $helper;
        $this->productModel = $productModel;
    }

    /**
     * {@inheritdoc}
     */
    protected function doGetItemData()
    {
        $imageHelper = $this->imageHelper->init($this->getProductForThumbnail(), 'mini_cart_product_thumbnail');
        $product = $this->productModel->load($this->item->getProduct()->getId());
        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(),
            'product_price' => $this->checkoutHelper->formatPrice($this->item->getCalculationPrice()),
            'product_image' => [
                'src' => $imageHelper->getUrl(),
                'alt' => $imageHelper->getLabel(),
                'width' => $imageHelper->getWidth(),
                'height' => $imageHelper->getHeight(),
            ],
            'product_custom_attribute' => $this->helper->productAttribute($product, $product->getCustomAttribute(), 'custom_attribute'),
            'canApplyMsrp' => $this->msrpHelper->isShowBeforeOrderConfirm($this->item->getProduct())
                && $this->msrpHelper->isMinimalPriceLessMsrp($this->item->getProduct()),
        ];
    }
}

Note que estoy inyectando

\ Magento \ Catálogo \ Modelo \ Producto $ productModel

al método de construcción porque necesito cargar datos completos del producto para acceder a mi atributo personalizado. Si hay una mejor manera, por favor dígame.

Y finalmente puede mostrar el nuevo atributo en

view / frontend / web / template / minicart / item / default.html:

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

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