Obtention de la référence produit dans le mini-chariot d'en-tête

Je souhaite pouvoir afficher le produit SKUdans le mini-panier d'un site Magento 2. Mais je ne sais pas comment utiliser KnockoutJSpour extraire des informations supplémentaires sur le produit. Le modèle appelé est ici:

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

Et contient du code comme:

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

Ma question directe serait donc: où sont les valeurs de l'ensemble de produits et comment puis-je les modifier pour ajouter ou supprimer des détails sur le produit?

Pour autant que je sache, le mini-chariot d'en-tête obtiendra les données des données client

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

Regardez les données client js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, nous pouvons obtenir les données client du stockage local. Par exemple, dans la console de votre navigateur, exécutez la ligne:, localStorage.getItem('mage-cache-storage')nous pouvons également obtenir les informations du panier.

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

Accédez à 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(),
           .....
    }

vendeur / magento / module-checkout / CustomerData / AbstractItem.php

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

Pour obtenir l'article SKU, je pense que nous devons ajouter des données à getItemData()(devrait essayer avec le plugin ). Et puis remplacer le modèle html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Mettre à jour la version de Magento 2.1.0

Dans Magento 2.1.0, il vous suffit de remplacer default.html. En effet, la méthode doGetItemDataa déjà le produit sku.

Tout d'abord, une très bonne explication de @Khoa TruongDinh sur le flux d'obtention de l'élément dans le modèle de mini-cart.

comment puis-je les modifier pour ajouter ou supprimer des détails sur le produit?

J'ai trouvé un moyen d'étendre le modèle de minicart avec des attributs personnalisés du produit. Pour ce faire, vous devez d'abord remplacer vendor / magento / module-checkout / CustomerData / DefaultItem.php avec les préférences DI

Créer une application / un code / un fournisseur / un module / etc / di.xml ou remplacer l'objet 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>

Créez ensuite un nouvel objet pour remplacer la méthode doGetItemData () et ajoutez custom_attribute avec la clé product_custom_attribute

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

Notez que j'injecte

\ Magento \ Catalogue \ Model \ Product $ productModel

à la méthode de construction, car je dois charger les données complètes du produit pour accéder à mon custom_attribute. S'il y a une meilleure façon, dites-le moi.

Et enfin, vous pouvez afficher le nouvel attribut dans

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

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

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