헤더 미니 카트에서 제품 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

내가 아는 한 헤더 미니 카트는 고객 데이터에서 데이터를 가져옵니다.

공급 업체 / 마 젠토 / 모듈-체크 아웃 /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
      }
    ],
    .......
  }
}

이동에 벤더 / 젠토 / 결제 모듈 / 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(),
           .....
    }

공급 업체 / 마 젠토 / 모듈-체크 아웃 / 고객 데이터 /AbstractItem.php

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

SKU 항목을 얻으려면 getItemData()( Plugin으로 시도 해야 함)에 데이터를 추가해야한다고 생각합니다 . 그런 다음 템플릿 html재정의하십시오. vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

마 젠토 2.1.0 버전 업데이트

Magento 2.1.0에서는을 재정의하면됩니다 default.html. 방법 doGetItemData에 이미 제품 SKU 가 있기 때문 입니다.


감사합니다! 이 질문에 대한 많은 '방법'을 작성했습니다!
동그라미 ixix

@Khoa TruongDinh 좋은 답변 주셔서 감사합니다. 이것은 완벽하게 작동합니다. 결제 요약 섹션에서 동일한 방법으로 알려주십시오. 나는 많은 것을 발견했지만 체크 아웃 요약에서 이름 대신 새 속성을 추가 할 위치를 얻을 수 없습니다.
Rohit Goel

1
구성 가능한 제품이있는 경우이 클래스를 재정의해야합니다. Magento\ConfigurableProduct\CustomerData\ConfigurableItem그룹화 된 제품의 경우Magento\GroupedProduct\CustomerData\GroupedItem
Franck Garnier

@FranckGarnier 방금 확인한 것은이 클래스를 재정의 할 필요가없는 것 같습니다. !-- ko text: product_sku --><!-- /ko -->sku 만 추가 하면 구성 가능한 제품에 대해 sku가 표시됩니다. 내 마 젠토 버전은 2.1.5입니다.
Khoa TruongDinh

1
product_sku에 적합하지만 기본적으로 존재하지 않는 추가 정보를 추가해야하는 경우 이러한 클래스에 대해주의하여 대신 플러그인을 사용하십시오.
Franck Garnier

7

먼저, @Khoa TruongDinh의 미니 카트 템플릿에서 항목을 가져 오는 흐름에 대해 매우 잘 설명했습니다.

제품 세부 정보를 추가하거나 제거하기 위해 어떻게 바꿀 수 있습니까?

제품의 사용자 정의 속성으로 미니 카트 템플릿을 확장하는 방법을 찾았습니다. 먼저 오버라이드 (override) 할 필요가 수행 업체 / 젠토 / 모듈 체크 아웃 / CustomerData / DefaultItem.php을 함께 DI 환경 설정

작성 응용 프로그램 / 코드 / 공급 업체 / 모듈 / 기타 / di.xml 하다며 우선 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 () 메소드를 대체 할 새 오브젝트를 작성하고 product_custom_attribute 키로 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()),
        ];
    }
}

주사 중입니다

\ 마 젠토 \ 카탈로그 \ 모델 \ 제품 $ productModel

custom_attribute에 액세스하려면 전체 제품 데이터를로드해야하므로 생성 메소드에 더 좋은 방법이 있다면 알려주십시오.

마지막으로 새로운 속성을

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를 얻을 필요는 없지만 다른 제품 정보를 얻는 데 사용합니다. 마침내 환경 설정이 설정되어 실행되므로 메소드가 매력처럼 작동합니다!
동그라미 ixix

1
사용자 정의 속성의 경우 $productModel모든 속성으로 제품을로드 한 다음로 검색해야합니다 $this->helper. 작동하면 내 대답을 찬성 할 수 있습니다.
Miroslav Petroff

1
나는했고 그들은 한 번만 투표하게했다. Khoa의 답변뿐만 아니라 정답을 표시 할 수 있다면. 나는 아무도 다른 곳 에서이 문제에 대한 답변을 아직 보지 못하고이 공원에서 노크하기 때문에 우리가 당신을 위해 더 많은 표를 얻을 수 있는지 알 수 있습니다.
동그라미 ixix
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.