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

10

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?

cerclesix
la source

Réponses:

12

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. entrez la description de l'image ici

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

Khoa TruongDinh
la source
Je vous remercie! Rempli une tonne de «comment» sur cette question!
circlesix
@Khoa TruongDinh merci pour la bonne réponse. Cela fonctionne parfaitement. Pouvez-vous s'il vous plaît me dire comment nous pouvons faire la même chose dans la section récapitulative de paiement. J'ai trouvé beaucoup de choses, mais je ne peux pas obtenir un emplacement où ajouter le nouvel attribut au lieu du nom dans le résumé de la caisse.
Rohit Goel
1
Attention, si vous avez des produits configurables, vous devez outrepasser cette classe aussi: Magento\ConfigurableProduct\CustomerData\ConfigurableItemet pour les produits groupés:Magento\GroupedProduct\CustomerData\GroupedItem
Franck Garnier
@FranckGarnier Je viens de vérifier que nous n'avons pas besoin de remplacer ces classes. Ajoutez seulement !-- ko text: product_sku --><!-- /ko -->, le sku s'affichera pour le produit configurable. Ma version de Magento est 2.1.5.
Khoa TruongDinh
1
Parfait pour product_sku, mais si vous avez besoin d'ajouter des informations supplémentaires non natives, faites attention à ces classes, essayez plutôt d'utiliser des plugins.
Franck Garnier
7

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 -->
Miroslav Petroff
la source
L'utilisation 'product_sku' => $this->item->getProduct()->getSku()fonctionne pour récupérer le sku, donc même si je n'ai pas besoin de le \Magento\Catalog\Model\Product $productModelsaisir, je vais l'utiliser pour récupérer d'autres informations sur le produit. J'ai finalement obtenu la préférence et fonctionne, donc votre méthode fonctionne comme un charme!
circlesix
1
Pour les attributs personnalisés, vous devez $productModelcharger le produit avec tous les attributs, puis les récupérer avec $this->helper. Si cela fonctionne, vous pouvez voter pour ma réponse.
Miroslav Petroff
1
Je l'ai fait, et ils ne m'ont laissé voter qu'une seule fois. Si je pouvais marquer votre réponse aussi bien que celle de Khoa, je le ferais. Je posterai autour et voir si nous pouvons obtenir plus de votes pour vous, car je n'ai encore vu personne répondre à ce problème ailleurs et celui-ci le met hors du parc.
circlesix