Erhalten der Produkt-SKU im Header-Mini-Cart

10

Ich möchte das Produkt SKUim Mini-Cart einer Magento 2-Site anzeigen können . Ich bin mir jedoch nicht sicher, wie ich KnockoutJSzusätzliche Produktinformationen abrufen soll. Die Vorlage, die aufgerufen wird, ist hier:

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

Und enthält Code wie:

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

Meine direkte Frage wäre also: Wo sind die Werte für das Produktset und wie kann ich sie ändern, um Produktdetails hinzuzufügen oder zu entfernen?

Kreismix
quelle

Antworten:

12

Soweit ich weiß, erhält der Header-Minicart die Daten aus Kundendaten

Hersteller / Magento / Modul-Checkout / Ansicht / Frontend / Web / js / Ansicht / minicart.js

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'jquery',
    'ko',
    'sidebar'
], function (Component, customerData, $, ko) {
    'use strict';
    ......
    this.cart = customerData.get('cart');
    ......
}

Schauen Sie in die Kundendaten js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, wir können die Kundendaten aus dem lokalen Speicher erhalten. Führen Sie beispielsweise in Ihrer Browserkonsole die Zeile aus : localStorage.getItem('mage-cache-storage'), können wir auch die Warenkorbinformationen abrufen. Geben Sie hier die Bildbeschreibung ein

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

Navigieren Sie zu 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()
    );
}

Um das SKU-Element zu erhalten, müssen wir meiner Meinung nach Daten hinzufügen getItemData()(sollte es mit dem Plugin versuchen ). Und dann überschreiben Sie die Vorlage HTML vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Aktualisieren Sie die Magento 2.1.0-Version

In Magento 2.1.0 müssen Sie nur überschreiben default.html. Dies liegt daran, dass die Methode doGetItemDatabereits die Produkt-SKU hat.

Khoa TruongDinh
quelle
Vielen Dank! Füllen Sie eine Menge "Hows" zu dieser Frage aus!
Circelsix
@ Khoa TruongDinh danke für die tolle Antwort. Das funktioniert perfekt. Können Sie mir bitte im Abschnitt "Zusammenfassung der Kaufabwicklung" mitteilen, wie wir dies tun können? Ich habe viel gefunden, kann aber keinen Ort finden, an dem das neue Attribut anstelle des Namens in der Checkout-Zusammenfassung hinzugefügt werden kann.
Rohit Goel
1
Seien Sie vorsichtig, wenn Sie konfigurierbare Produkte haben, müssen Sie diese Klasse auch überschreiben: Magento\ConfigurableProduct\CustomerData\ConfigurableItemund für gruppierte Produkte:Magento\GroupedProduct\CustomerData\GroupedItem
Franck Garnier
@FranckGarnier Ich habe gerade überprüft, dass wir diese Klassen nicht überschreiben müssen. Nur hinzufügen !-- ko text: product_sku --><!-- /ko -->, die SKU wird für konfigurierbare Produkte angezeigt. Meine Magento-Version ist 2.1.5.
Khoa TruongDinh
1
Richtig für product_sku, aber wenn Sie zusätzliche Informationen hinzufügen müssen, die nicht nativ vorhanden sind, achten Sie auf diese Klassen. Versuchen Sie stattdessen, Plugins zu verwenden.
Franck Garnier
7

Erstens eine sehr gute Erklärung von @Khoa TruongDinh über den Ablauf des Abrufens von Elementen in einer Minicart-Vorlage.

Wie kann ich sie ändern, um Produktdetails hinzuzufügen oder zu entfernen?

Ich habe einen Weg gefunden, wie Sie die Minicart-Vorlage mit benutzerdefinierten Attributen des Produkts erweitern können. Dazu müssen Sie zuerst vendor / magento / module-checkout / CustomerData / DefaultItem.php mit den DI-Einstellungen überschreiben

Erstellen Sie app / code / Vendor / Module / etc / di.xml, um das DefaultItem-Objekt zu überschreiben

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

Erstellen Sie dann ein neues Objekt, um die Methode doGetItemData () zu überschreiben, und fügen Sie custom_attribute mit dem Schlüssel product_custom_attribute hinzu

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

Beachten Sie, dass ich spritze

\ Magento \ Catalog \ Model \ Product $ productModel

auf die Konstruktmethode, da ich vollständige Produktdaten laden muss, um auf mein custom_attribute zuzugreifen. Wenn es einen besseren Weg gibt, sag es mir bitte.

Und schließlich können Sie das neue Attribut in anzeigen

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

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

                    <!-- ko text: product_custom_attribute --><!-- /ko -->
Miroslav Petroff
quelle
Die Verwendung 'product_sku' => $this->item->getProduct()->getSku()funktioniert, um den SKU einzuziehen. Obwohl ich den nicht brauche \Magento\Catalog\Model\Product $productModel, um ihn zu greifen, werde ich ihn verwenden, um einige andere Produktinformationen zu erhalten. Ich habe endlich die Präferenz zum Laufen gebracht, also funktioniert deine Methode wie ein Zauber!
Circelsix
1
Für benutzerdefinierte Attribute müssen Sie $productModeldas Produkt mit allen Attributen laden und dann mit abrufen $this->helper. Wenn es funktioniert, können Sie meine Antwort positiv bewerten.
Miroslav Petroff
1
Ich habe es getan und sie haben mich nur einmal abstimmen lassen. Wenn ich Ihre Antwort genauso richtig markieren könnte wie die von Khoa, würde ich. Ich werde herum posten und sehen, ob wir mehr Stimmen für Sie bekommen können, da ich noch niemanden gesehen habe, der dieses Problem irgendwo anders beantwortet, und dieser schlägt es aus dem Park.
Circelsix