Agregar custom atributo en informacion de producto del minicarrito y checkout

En ocaciones necesitamos colocar ciertos atributos del producto en el minicarrito y resumenes de compra del checkout, sin embargo no siempre tenemos disponibles todos los atributos del producto, por tanto aqui mostrare como podemos agregar informacicon de un atributo en estos espacios.

Creare un campo desde el admin de magento 2 llamado nuevo_atributo y asignare cualquier valor para la demostracion.

Nuevo atributo producto magento2

Creamos un modulos a partir de los archivos minimos encesarios module.xml y registration.php

Vendor/NombreModulo/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_NombreModulo" setup_version="1.0.0">
</module>
</config>

Vendor/NombreModulo/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_NombleModulo',
__DIR__
);

Añadiremos un archivo llamado catalog_attributes.xml donde especificaremos los atributos extra.

Vendor/NombreModulo/etc/forntend/ catalog_attributes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
<group name="quote_item">
<attribute name="nuevo_atributo" />
</group>
</config>


Creamos un archivo di.xml para declarar 2 plugins que seran los encargados de añadir los atributos a los objetos que magento 2 usa para la informacion del minicarrito y de los resumenes de checkout.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Model\DefaultConfigProvider">
<plugin name="checkout-summary-product-attribute" type="Vendor\NombreModulo\Plugin\Checkout\Model\DefaultConfigProviderPlugin" />
</type>
<type name="Magento\Checkout\CustomerData\AbstractItem">
<plugin name="minicar-attributes" type="Vendor\NombreModulo\Plugin\DefaultItem" />
</type>
</config>


Creamos el plugin Vendor/NombreModulo/Plugin/DefaultItem.php que nos servira para agregar atributos al minicarrito.

<?php
namespace Vendor\NombreModulo\Plugin;
use Magento\Quote\Model\Quote\Item;
use Magento\Catalog\Model\ProductRepository as ProductRepository;
class DefaultItem
{
protected $_productRepository;
public function __construct(
ProductRepository $productRepository
){$this->_productRepository = $productRepository;
} public function aroundGetItemData($subject, \Closure $proceed, Item $item){$data = $proceed($item);
$product = $item->getProduct();
$product = $this->_productRepository->getById($product->getId());
$atts = [
"nuevo_atributo" => $product->getNuevoAtributo()
];
return array_merge($data, $atts);
} }


Creamos el plugin Vendor/NombreModulo/Plugin/Checkout/Model/DefaultConfigProviderPlugin.php que nos servira para agregar atributos al resumen del checkout.

<?php
namespace Vendor\NombreModulo\Plugin\Checkout\Model;
use Magento\Checkout\Model\Session as CheckoutSession;
use Magento\Catalog\Model\ProductRepository as ProductRepository;
class DefaultConfigProviderPlugin extends \Magento\Framework\Model\AbstractModel
{
protected $checkoutSession;
protected $_productRepository;
public function __construct(
CheckoutSession $checkoutSession,
ProductRepository $productRepository
){$this->checkoutSession = $checkoutSession;
$this->_productRepository = $productRepository;
} public function afterGetConfig(
\Magento\Checkout\Model\DefaultConfigProvider $subject,
array $result
){$items = $result['totalsData']['items'];
foreach ($items as $index => $item){$quoteItem = $this->checkoutSession->getQuote()->getItemById($item['item_id']);
$product = $this->_productRepository->getById($quoteItem->getProduct()->getId());
$result['quoteItemData'][$index]['nuevo_atributo'] = $product->getNuevoAtributo();
} return $result;
} }

Para agregar el atributo de minicarrito los hacemos sobre Magento_Checkout/web/template/minicart/item/default.html que deve estar sobreescrito en nuestro tema o modulo.

<div>
<span class="price-label" data-bind="i18n: 'New Attribute'"></span>
<span class="value" data-bind="html: item.nuevo_atributo"></span>
</div>

Para los resumenes de checkout de igual forma sobreescribremos Magento_Checkout/web/template/summary/item/details.html y agregamos el nuevo atributo.

<div>
<span class="label old-price">New Attribute</span>
<span class="old-price" data-bind="text: getNewAtribute($parent)"></span>
</div>

A diferencia del minicarrito en el resumen del checkout es necesario sobreescribir Magento_Checkout/web/js/view/summary/item/details.js para agregar una funcion que nos regrese el valor de nuestro atributo ya que la fuente de la informacion para el resumen varia de pestaña en pestaña (informacion envio, informacion pago).

define([
'uiComponent'
], function (Component){'use strict';
var quoteItemData = window.checkoutConfig.quoteItemData;
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/item/details'
},
quoteItemData: quoteItemData,
/**
* @param {Object} quoteItem
* @return {String} */
getValue: function (quoteItem){return quoteItem.name;
},
getNuevoAtributo: function(quoteItem){var itemProduct = this.getItemProduct(quoteItem.item_id);
return itemProduct.nuevo_atributo;
},
getItemProduct: function(item_id){var itemElement = null;
_.each(this.quoteItemData, function(element, index){if (element.item_id == item_id){itemElement = element;
} });
return itemElement;
} });
});


El resultado que obtendriamos seria el siguiente:

Minicarrito magento 2

Checkout magento 2

 

 

Fecha: 10 Jul 2018 12:18 Hrs.

Acerca del autor

Sombrero de paja molder