Mendapatkan SKU produk di mini-cart header

Saya ingin dapat menampilkan produk SKUdi gerobak mini dari situs Magento 2. Tetapi saya tidak yakin bagaimana cara menggunakannya KnockoutJSuntuk mendapatkan informasi produk tambahan. Templat yang dipanggil ada di sini:

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

Dan mengandung kode seperti:

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

Jadi pertanyaan langsung saya adalah: di mana nilai-nilai untuk set produk dan bagaimana saya bisa mengubahnya untuk menambah atau menghapus detail produk?

Sejauh yang saya tahu, minicart header akan mendapatkan data dari data pelanggan

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

Lihatlah ke data pelanggan vendor/magento/module-customer/view/frontend/web/js/customer-data.js, kita bisa mendapatkan data pelanggan dari penyimpanan lokal. Misalnya, di konsol browser Anda, jalankan baris:, localStorage.getItem('mage-cache-storage')kami juga bisa mendapatkan informasi keranjang.

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

Arahkan ke 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()
    );
}

Untuk mendapatkan item SKU, saya pikir kita perlu menambahkan data ke getItemData()(Harus coba dengan Plugin ). Dan kemudian menimpa templat html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Perbarui versi Magento 2.1.0

Di Magento 2.1.0, Anda hanya perlu mengganti default.html. Ini karena metode doGetItemDatasku sudah memiliki produk.

Pertama, penjelasan yang sangat bagus dari @Khoa TruongDinh tentang aliran mendapatkan item dalam template minicart.

bagaimana saya bisa mengubahnya untuk menambah atau menghapus detail produk?

Saya menemukan cara bagaimana Anda dapat memperluas template minicart dengan atribut khusus produk. Untuk melakukan itu pertama Anda harus menimpa vendor / magento / module-checkout / CustomerData / DefaultItem.php dengan DI Preferensi

Buat aplikasi / kode / Vendor / Modul / etc / di.xml atau timpa objek 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>

Kemudian buat objek baru untuk mengganti metode doGetItemData () dan tambahkan custom_attribute dengan key product_custom_attribute

File: 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()),
        ];
    }
}

Perhatikan bahwa saya menyuntikkan

\ Magento \ Katalog \ Model \ Produk $ productModel

ke metode konstruk karena saya perlu memuat data produk lengkap untuk mengakses custom_attribute saya. Jika ada cara yang lebih baik tolong beri tahu saya.

Dan akhirnya Anda dapat menampilkan atribut baru di

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

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

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