ヘッダーミニカートでの製品SKUの取得


10

SKUMagento 2サイトのミニカートに商品を表示したい。しかしKnockoutJS、追加の製品情報を取得するために使用する方法がわかりません。呼び出されているテンプレートはここにあります:

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

そして、次のようなコードが含まれています:

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

したがって、私の直接的な質問は次のとおりです。製品セットの値はどこにあり、製品の詳細を追加または削除するためにそれらをどのように変更できますか?

回答:


12

私の知る限り、ヘッダーミニカートは顧客データからデータを取得します

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

顧客データjsを調べvendor/magento/module-customer/view/frontend/web/js/customer-data.jsます。ローカルストレージから顧客データを取得できます。たとえば、ブラウザコンソールで次の行を実行しlocalStorage.getItem('mage-cache-storage')ます。カートの情報も取得できます。 ここに画像の説明を入力してください

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

移動し 、ベンダー/ Magentoの/モジュール・チェックアウト/ 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()
    );
}

SKUアイテムを取得するには、getItemData()プラグインで試す必要があります)にデータを追加する必要があると思います。そして、テンプレートhtmlをオーバーライドします vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Magento 2.1.0バージョンを更新する

Magento 2.1.0では、オーバーライドするだけですdefault.html。これは、メソッドdoGetItemDataにすでに製品SKU があるためです。


ありがとうございました!この質問の「ハウ」のトンを埋めました!
circlesix 2016

@Khoa TruongDinhすばらしい回答に感謝します。これは完璧に動作します。これを同じように行う方法を、チェックアウトの概要セクションで教えてください。たくさん見つけましたが、チェックアウトの概要で名前の代わりに新しい属性を追加する場所を取得できません。
Rohit Goel 2017年

1
構成可能な製品がある場合は、このクラスもオーバーライドする必要があるので注意してください。Magento\ConfigurableProduct\CustomerData\ConfigurableItemグループ化された製品の場合:Magento\GroupedProduct\CustomerData\GroupedItem
フランクガルニエ2017

@FranckGarnier確認したところ、これらのクラスをオーバーライドする必要はないようです。追加のみ!-- ko text: product_sku --><!-- /ko -->、SKUは構成可能な製品に対して表示されます。Magentoのバージョンは2.1.5です。
Khoa TruongDinh 2017

1
product_skuに適していますが、ネイティブに存在しない追加情報を追加する必要がある場合は、これらのクラスに注意して、代わりにプラグインを使用してみてください。
フランクガルニエ

7

まず、@ Khoa TruongDinhから、minicartテンプレートでアイテムを取得するフローについて非常に良い説明がありました。

それらを変更して製品の詳細を追加または削除するにはどうすればよいですか?

製品のカスタム属性を使用してミニカートテンプレートを拡張する方法を見つけました。これを行うには、最初にvendor / magento / module-checkout / CustomerData / DefaultItem.phpDIプリファレンスでオーバーライドする必要があります

app / code / Vendor / Module / etc / di.xmlまたは Create 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>

次に、doGetItemData()メソッドをオーバーライドする新しいオブジェクトを作成し、custom_attributeをキーproduct_custom_attributeで追加します。

ファイル: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()),
        ];
    }
}

私が注射していることに注意してください

\ Magento \ Catalog \ Model \ Product $ productModel

custom_attributeにアクセスするには、完全な製品データをロードする必要があるため、constructメソッドに追加します。もっと良い方法があれば教えてください。

そして最後に、新しい属性を

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

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

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

を使用'product_sku' => $this->item->getProduct()->getSku()するとsku \Magento\Catalog\Model\Product $productModelを取得できます。そのため、を取得する必要はありませんが、他の製品情報を取得するために使用します。やっと設定ができたので、あなたのメソッドは魅力のように動作します!
circlesix 2016

1
カスタム属性の場合$productModel、すべての属性を使用して製品をロードし、を使用してそれらを取得する必要があり$this->helperます。それが機能している場合は、私の答えに賛成票を投じることができます。
ミロスラフペトロフ

1
私はそうしました、そして彼らは私に一度だけ投票させました。私があなたの答えを正しいとマークすることができれば、Khoaもそうです。私は周りに投稿し、私たちがあなたのためにより多くの票を獲得できるかどうかを確認します。私はまだ他のどこかでこの問題に答えている人をまだ見ていません。
circlesix
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.