Mendapatkan SKU produk di mini-cart header


10

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?

Jawaban:


12

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. masukkan deskripsi gambar di sini

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


Terima kasih! Diisi satu ton 'bagaimana' tentang pertanyaan ini!
circleix

@Khoa TruongDinh terima kasih atas jawaban yang bagus. Ini berfungsi sempurna. Bisakah Anda memberi tahu saya bagaimana kami dapat melakukan hal yang sama di bagian ringkasan checkout. Saya telah menemukan banyak tetapi tidak bisa mendapatkan lokasi untuk menambahkan atribut baru alih-alih nama dalam ringkasan checkout.
Rohit Goel

1
Hati-hati, jika Anda memiliki produk yang dapat dikonfigurasi, Anda perlu mengganti kelas ini juga: Magento\ConfigurableProduct\CustomerData\ConfigurableItemdan untuk produk yang dikelompokkan:Magento\GroupedProduct\CustomerData\GroupedItem
Franck Garnier

@ FranckGarnier Saya baru saja memeriksa sepertinya kita tidak perlu mengganti kelas-kelas ini. Hanya tambahkan !-- ko text: product_sku --><!-- /ko -->, sku akan ditampilkan untuk produk yang dapat dikonfigurasi. Versi Magento saya adalah 2.1.5.
Khoa TruongDinh

1
Tepat untuk product_sku, tetapi jika Anda perlu menambahkan informasi tambahan yang tidak ada secara asli, berhati-hatilah dengan kelas-kelas ini, coba gunakan plugin sebagai gantinya.
Franck Garnier

7

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

Menggunakan 'product_sku' => $this->item->getProduct()->getSku()tidak berfungsi untuk menarik sku, jadi sementara saya tidak perlu \Magento\Catalog\Model\Product $productModelmengambil itu, saya akan menggunakannya untuk mengambil beberapa info produk lainnya. Saya akhirnya dapat preferensi dan berjalan, sehingga metode Anda bekerja seperti pesona!
circleix

1
Untuk atribut khusus, Anda perlu $productModelmemuat produk dengan semua atribut dan kemudian mengambilnya $this->helper. Jika berhasil, Anda dapat meningkatkan jawaban saya.
Miroslav Petroff

1
Ya, dan mereka hanya membiarkan saya memilih sekali. Jika saya bisa menandai jawaban Anda benar dan Khoa saya akan. Saya akan memposting dan melihat apakah kami bisa mendapatkan lebih banyak suara untuk Anda, karena saya belum melihat ada yang menjawab masalah ini di tempat lain dan yang ini mengetuk taman.
circleix
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.