Lấy SKU sản phẩm trong giỏ hàng nhỏ tiêu đề

Tôi muốn có thể hiển thị sản phẩm SKUtrong giỏ hàng nhỏ của trang web Magento 2. Nhưng tôi không chắc cách sử dụng KnockoutJSđể lấy thêm thông tin sản phẩm. Mẫu đang được gọi là ở đây:

nhà cung cấp / magento / kiểm tra mô-đun / xem / frontend / web / template / minicart / item / default.html

Và chứa mã như:

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

Vì vậy, câu hỏi trực tiếp của tôi sẽ là: các giá trị cho bộ sản phẩm ở đâu và làm cách nào tôi có thể thay đổi chúng xung quanh để thêm hoặc xóa chi tiết sản phẩm?

Theo tôi biết, minicart tiêu đề sẽ lấy dữ liệu từ dữ liệu khách hàng

nhà cung cấp / magento / kiểm tra mô-đun / xem / 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');
    ......
}

Nhìn vào dữ liệu khách hàng js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, chúng tôi có thể lấy dữ liệu khách hàng từ bộ nhớ cục bộ. Ví dụ: trong bảng điều khiển trình duyệt của bạn, hãy chạy dòng : localStorage.getItem('mage-cache-storage'), chúng tôi cũng có thể lấy thông tin giỏ hàng.

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

Điều hướng đến nhà cung cấp / magento / kiểm tra mô-đun / 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(),
           .....
    }

nhà cung cấp / magento / kiểm tra mô-đun / CustomerData / AbstractItem.php

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

Để có được mục SKU, tôi nghĩ rằng chúng ta cần thêm dữ liệu vào getItemData()(Nên thử với Plugin ). Và sau đó ghi đè lên mẫu html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Cập nhật phiên bản Magento 2.1.0

Trong Magento 2.1.0, bạn chỉ cần ghi đè default.html. Điều này là do phương pháp doGetItemDatađã có sản phẩm sku.

Thứ nhất, lời giải thích rất hay từ @Khoa TruongDinh về dòng nhận vật phẩm trong mẫu minicart.

Làm cách nào để thay đổi chúng xung quanh để thêm hoặc xóa chi tiết sản phẩm?

Tôi đã tìm thấy một cách làm thế nào bạn có thể mở rộng mẫu minicart với các thuộc tính tùy chỉnh của sản phẩm. Để làm điều đó trước tiên, bạn cần ghi đè nhà cung cấp / magento / kiểm tra mô-đun / CustomerData / DefaultItem.php bằng DI Preferences

Tạo ứng dụng / mã / Nhà cung cấp / Mô-đun / etc / di.xml ot ghi đè đối tượng 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>

Sau đó tạo ra đối tượng mới để ghi đè doGetItemData () phương pháp và add custom_attribute với phím product_custom_attribute

Tệp: ứng dụng / mã / Nhà cung cấp / Mô-đun / Tùy chọn / 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()),
        ];
    }
}

Lưu ý rằng tôi đang tiêm

\ Magento \ Catalog \ Model \ Product $ sản phẩmModel

đến phương thức xây dựng vì tôi cần tải dữ liệu sản phẩm đầy đủ để truy cập custom_attribution của mình. Nếu có một cách tốt hơn xin vui lòng cho tôi biết.

Và cuối cùng bạn có thể hiển thị thuộc tính mới trong

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

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

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