Obtener el SKU del producto en el mini carrito de cabecera

10

Quiero poder mostrar el producto SKUen el carrito pequeño de un sitio de Magento 2. Pero no estoy seguro de cómo usar KnockoutJSpara obtener información adicional del producto. La plantilla que se llama está aquí:

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

Y contiene código como:

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

Entonces, mi pregunta directa sería: ¿dónde están los valores para el conjunto de productos y cómo puedo cambiarlos para agregar o eliminar detalles del producto?

Círculosix
fuente

Respuestas:

12

Hasta donde yo sé, el minicart de encabezado obtendrá los datos de los datos del cliente

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

Mire los datos del cliente js vendor/magento/module-customer/view/frontend/web/js/customer-data.js, podemos obtener los datos del cliente del almacenamiento local. Por ejemplo, en la consola de su navegador, ejecute la línea: localStorage.getItem('mage-cache-storage')también podemos obtener la información del carrito. ingrese la descripción de la imagen aquí

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

Navegue a 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()
    );
}

Para obtener el elemento SKU, creo que necesitamos agregar datos a getItemData()(Debería intentarlo con el complemento ). Y luego anular la plantilla html vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html

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

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

Actualización de la versión Magento 2.1.0

En Magento 2.1.0, solo necesita anular default.html. Esto se debe a que el método doGetItemDataya tiene el producto sku.

Khoa TruongDinh
fuente
¡Gracias! Completado un montón de 'cómo' en esta pregunta!
circlesix
@Khoa TruongDinh gracias por la gran respuesta. Esto funciona perfecto ¿Puede decirme cómo podemos hacer esto en la sección de resumen de pago? He encontrado mucho pero no puedo encontrar una ubicación donde agregar el nuevo atributo en lugar del nombre en el resumen de pago.
Rohit Goel
1
Tenga cuidado, si tiene productos configurables, también debe anular esta clase: Magento\ConfigurableProduct\CustomerData\ConfigurableItemy para productos agrupados:Magento\GroupedProduct\CustomerData\GroupedItem
Franck Garnier
@FranckGarnier que acabo de comprobar parece que no necesitamos anular estas clases. Solo agregue !-- ko text: product_sku --><!-- /ko -->, el sku se mostrará para el producto configurable. Mi versión de Magento es 2.1.5.
Khoa TruongDinh
1
Correcto para product_sku, pero si necesita agregar información adicional que no está presente de forma nativa, tenga cuidado con estas clases, intente usar complementos en su lugar.
Franck Garnier
7

En primer lugar, una muy buena explicación de @Khoa TruongDinh sobre el flujo de obtener el elemento en la plantilla de minicart.

¿Cómo puedo cambiarlos para agregar o eliminar detalles del producto?

Encontré una manera de extender la plantilla de minicart con atributos personalizados del producto. Para hacer eso primero, debe anular vendor / magento / module-checkout / CustomerData / DefaultItem.php con DI Preferences

Crear aplicación / código / Proveedor / Módulo / etc / di.xml para anular el objeto 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>

Luego, cree un nuevo objeto para anular el método doGetItemData () y agregue custom_attribute con la clave product_custom_attribute

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

Note que estoy inyectando

\ Magento \ Catálogo \ Modelo \ Producto $ productModel

al método de construcción porque necesito cargar datos completos del producto para acceder a mi atributo personalizado. Si hay una mejor manera, por favor dígame.

Y finalmente puede mostrar el nuevo atributo en

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

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

                    <!-- ko text: product_custom_attribute --><!-- /ko -->
Miroslav Petroff
fuente
El uso 'product_sku' => $this->item->getProduct()->getSku()funciona para extraer el sku, por lo que, aunque no necesito \Magento\Catalog\Model\Product $productModelusarlo, lo usaré para obtener otra información del producto. Finalmente conseguí la preferencia en funcionamiento, ¡así que su método funciona de maravilla!
circlesix
1
Para los atributos personalizados, debe $productModelcargar el producto con todos los atributos y luego recuperarlos $this->helper. Si funciona, puedes votar mi respuesta.
Miroslav Petroff
1
Lo hice, y solo me dejaron votar una vez. Si pudiera marcar tu respuesta tan correcta como la de Khoa, lo haría. Publicaré y veré si podemos obtener más votos para usted, ya que aún no he visto a nadie responder a este problema en ningún otro lugar y este lo deja fuera del parque.
circlesix