I want to customize my minicart in Magento 2. I need to add 3 attributes
I want to customize my minicart in Magento 2. I need to add 3 attributes: SKU, Manufacturer, and Manufacturer part number. These are existing attributes. I see where to add the output values but not where to call them from.
magento2 mini-cart knockoutjs
add a comment |
I want to customize my minicart in Magento 2. I need to add 3 attributes: SKU, Manufacturer, and Manufacturer part number. These are existing attributes. I see where to add the output values but not where to call them from.
magento2 mini-cart knockoutjs
add a comment |
I want to customize my minicart in Magento 2. I need to add 3 attributes: SKU, Manufacturer, and Manufacturer part number. These are existing attributes. I see where to add the output values but not where to call them from.
magento2 mini-cart knockoutjs
I want to customize my minicart in Magento 2. I need to add 3 attributes: SKU, Manufacturer, and Manufacturer part number. These are existing attributes. I see where to add the output values but not where to call them from.
magento2 mini-cart knockoutjs
magento2 mini-cart knockoutjs
asked Sep 1 '16 at 18:48
Matthew McLennanMatthew McLennan
76031028
76031028
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these values.
This is the module directory:
| registration.php
|
+---etc
| | module.xml
| | catalog_attributes.xml
| |
| ---frontend
| di.xml
|
+---Plugin
| DefaultItem.php
|
---view
+---frontend
| ---layout
| checkout_cart_sidebar_item_renderers.xml
|
---web
---template
---mini cart
---item
default.html
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="manufacturer"/>
<attribute name="part_number"/>
</group>
</config>
di.xml
<?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="MagentoCheckoutCustomerDataAbstractItem">
<plugin name="AddAttPlug" type="YourModulePluginDefaultItem" disabled="false" sortOrder="10"/>
</type>
</config>
DefaultItem.php
<?php
namespace YourModulePlugin;
use MagentoQuoteModelQuoteItem;
class DefaultItem
{
public function aroundGetItemData($subject, Closure $proceed, Item $item)
{
$data = $proceed($item);
$product = $item->getProduct();
$atts = [
"product_manufacturer" => $product->getAttributeText('manufacturer'),
"product_part_number" => $product->getAttributeText('product_part_number')
];
return array_merge($data, $atts);
}
}
SKU already exists in data so no need to add it.
checkout_cart_sidebar_item_renderers.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="children" xsi:type="array">
<item name="item.renderer" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
default.html is a copy of Magento/Checkout/view/frontend/web/template/minicart/item/default.html
with changes made at line 66
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<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>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: option.value.join('<br>')"></span>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div data-bind="html: 'SKU#: ' + item.product_sku"></div>
<div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
<div data-bind="html: 'Part #: ' + item.product_part_number"></div>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
</li>
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
|
show 2 more comments
i have slove my query by 2 simple step in magento 2.1:
Change into file :->
1.DefaultItem.php
Add line :
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$this->product = $objectManager->get('MagentoCatalogModelProduct')-
>load($this->item->getId());
*Add element into return array result:*
'short_description' => $this->product->getShortDescription(),
2.default.html
Add line:
<a data-bind="text: short_description"></a>
i hope this will help you.
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f134338%2fi-want-to-customize-my-minicart-in-magento-2-i-need-to-add-3-attributes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these values.
This is the module directory:
| registration.php
|
+---etc
| | module.xml
| | catalog_attributes.xml
| |
| ---frontend
| di.xml
|
+---Plugin
| DefaultItem.php
|
---view
+---frontend
| ---layout
| checkout_cart_sidebar_item_renderers.xml
|
---web
---template
---mini cart
---item
default.html
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="manufacturer"/>
<attribute name="part_number"/>
</group>
</config>
di.xml
<?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="MagentoCheckoutCustomerDataAbstractItem">
<plugin name="AddAttPlug" type="YourModulePluginDefaultItem" disabled="false" sortOrder="10"/>
</type>
</config>
DefaultItem.php
<?php
namespace YourModulePlugin;
use MagentoQuoteModelQuoteItem;
class DefaultItem
{
public function aroundGetItemData($subject, Closure $proceed, Item $item)
{
$data = $proceed($item);
$product = $item->getProduct();
$atts = [
"product_manufacturer" => $product->getAttributeText('manufacturer'),
"product_part_number" => $product->getAttributeText('product_part_number')
];
return array_merge($data, $atts);
}
}
SKU already exists in data so no need to add it.
checkout_cart_sidebar_item_renderers.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="children" xsi:type="array">
<item name="item.renderer" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
default.html is a copy of Magento/Checkout/view/frontend/web/template/minicart/item/default.html
with changes made at line 66
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<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>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: option.value.join('<br>')"></span>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div data-bind="html: 'SKU#: ' + item.product_sku"></div>
<div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
<div data-bind="html: 'Part #: ' + item.product_part_number"></div>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
</li>
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
|
show 2 more comments
You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these values.
This is the module directory:
| registration.php
|
+---etc
| | module.xml
| | catalog_attributes.xml
| |
| ---frontend
| di.xml
|
+---Plugin
| DefaultItem.php
|
---view
+---frontend
| ---layout
| checkout_cart_sidebar_item_renderers.xml
|
---web
---template
---mini cart
---item
default.html
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="manufacturer"/>
<attribute name="part_number"/>
</group>
</config>
di.xml
<?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="MagentoCheckoutCustomerDataAbstractItem">
<plugin name="AddAttPlug" type="YourModulePluginDefaultItem" disabled="false" sortOrder="10"/>
</type>
</config>
DefaultItem.php
<?php
namespace YourModulePlugin;
use MagentoQuoteModelQuoteItem;
class DefaultItem
{
public function aroundGetItemData($subject, Closure $proceed, Item $item)
{
$data = $proceed($item);
$product = $item->getProduct();
$atts = [
"product_manufacturer" => $product->getAttributeText('manufacturer'),
"product_part_number" => $product->getAttributeText('product_part_number')
];
return array_merge($data, $atts);
}
}
SKU already exists in data so no need to add it.
checkout_cart_sidebar_item_renderers.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="children" xsi:type="array">
<item name="item.renderer" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
default.html is a copy of Magento/Checkout/view/frontend/web/template/minicart/item/default.html
with changes made at line 66
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<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>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: option.value.join('<br>')"></span>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div data-bind="html: 'SKU#: ' + item.product_sku"></div>
<div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
<div data-bind="html: 'Part #: ' + item.product_part_number"></div>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
</li>
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
|
show 2 more comments
You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these values.
This is the module directory:
| registration.php
|
+---etc
| | module.xml
| | catalog_attributes.xml
| |
| ---frontend
| di.xml
|
+---Plugin
| DefaultItem.php
|
---view
+---frontend
| ---layout
| checkout_cart_sidebar_item_renderers.xml
|
---web
---template
---mini cart
---item
default.html
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="manufacturer"/>
<attribute name="part_number"/>
</group>
</config>
di.xml
<?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="MagentoCheckoutCustomerDataAbstractItem">
<plugin name="AddAttPlug" type="YourModulePluginDefaultItem" disabled="false" sortOrder="10"/>
</type>
</config>
DefaultItem.php
<?php
namespace YourModulePlugin;
use MagentoQuoteModelQuoteItem;
class DefaultItem
{
public function aroundGetItemData($subject, Closure $proceed, Item $item)
{
$data = $proceed($item);
$product = $item->getProduct();
$atts = [
"product_manufacturer" => $product->getAttributeText('manufacturer'),
"product_part_number" => $product->getAttributeText('product_part_number')
];
return array_merge($data, $atts);
}
}
SKU already exists in data so no need to add it.
checkout_cart_sidebar_item_renderers.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="children" xsi:type="array">
<item name="item.renderer" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
default.html is a copy of Magento/Checkout/view/frontend/web/template/minicart/item/default.html
with changes made at line 66
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<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>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: option.value.join('<br>')"></span>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div data-bind="html: 'SKU#: ' + item.product_sku"></div>
<div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
<div data-bind="html: 'Part #: ' + item.product_part_number"></div>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
</li>
You can create a module to do this. It will use a plugin to add the attributes to the data array which is read by the knockout js template. Then we need to override the template to display these values.
This is the module directory:
| registration.php
|
+---etc
| | module.xml
| | catalog_attributes.xml
| |
| ---frontend
| di.xml
|
+---Plugin
| DefaultItem.php
|
---view
+---frontend
| ---layout
| checkout_cart_sidebar_item_renderers.xml
|
---web
---template
---mini cart
---item
default.html
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="manufacturer"/>
<attribute name="part_number"/>
</group>
</config>
di.xml
<?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="MagentoCheckoutCustomerDataAbstractItem">
<plugin name="AddAttPlug" type="YourModulePluginDefaultItem" disabled="false" sortOrder="10"/>
</type>
</config>
DefaultItem.php
<?php
namespace YourModulePlugin;
use MagentoQuoteModelQuoteItem;
class DefaultItem
{
public function aroundGetItemData($subject, Closure $proceed, Item $item)
{
$data = $proceed($item);
$product = $item->getProduct();
$atts = [
"product_manufacturer" => $product->getAttributeText('manufacturer'),
"product_part_number" => $product->getAttributeText('product_part_number')
];
return array_merge($data, $atts);
}
}
SKU already exists in data so no need to add it.
checkout_cart_sidebar_item_renderers.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="minicart">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="minicart_content" xsi:type="array">
<item name="children" xsi:type="array">
<item name="item.renderer" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
default.html is a copy of Magento/Checkout/view/frontend/web/template/minicart/item/default.html
with changes made at line 66
<li class="item product product-item" data-role="product-item">
<div class="product">
<!-- ko if: product_has_url -->
<a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</a>
<!-- /ko -->
<!-- ko ifnot: product_has_url -->
<span class="product-item-photo">
<!-- ko foreach: $parent.getRegion('itemImage') -->
<!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
<!-- /ko -->
</span>
<!-- /ko -->
<div class="product-item-details">
<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>
<!-- ko if: options.length -->
<div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
<span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
<div data-role="content" class="content">
<strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
<dl class="product options list">
<!-- ko foreach: { data: options, as: 'option' } -->
<dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
<dd class="values">
<!-- ko if: Array.isArray(option.value) -->
<span data-bind="html: option.value.join('<br>')"></span>
<!-- /ko -->
<!-- ko ifnot: Array.isArray(option.value) -->
<span data-bind="html: option.value"></span>
<!-- /ko -->
</dd>
<!-- /ko -->
</dl>
</div>
</div>
<!-- /ko -->
<div class="product-item-pricing">
<!-- ko if: canApplyMsrp -->
<div class="details-map">
<span class="label" data-bind="i18n: 'Price'"></span>
<span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
</div>
<!-- /ko -->
<!-- ko ifnot: canApplyMsrp -->
<!-- ko foreach: $parent.getRegion('priceSidebar') -->
<!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<div data-bind="html: 'SKU#: ' + item.product_sku"></div>
<div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
<div data-bind="html: 'Part #: ' + item.product_part_number"></div>
<div class="details-qty qty">
<label class="label" data-bind="i18n: 'Qty', attr: {
for: 'cart-item-'+item_id+'-qty'}"></label>
<input data-bind="attr: {
id: 'cart-item-'+item_id+'-qty',
'data-cart-item': item_id,
'data-item-qty': qty,
'data-cart-item-id': product_sku
}, value: qty"
type="number"
size="4"
class="item-qty cart-item-qty"
maxlength="12"/>
<button data-bind="attr: {
id: 'update-cart-item-'+item_id,
'data-cart-item': item_id,
title: $t('Update')
}"
class="update-cart-item"
style="display: none">
<span data-bind="i18n: 'Update'"></span>
</button>
</div>
</div>
<div class="product actions">
<!-- ko if: is_visible_in_site_visibility -->
<div class="primary">
<a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<!-- /ko -->
<div class="secondary">
<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
</div>
</div>
</div>
</li>
edited 2 mins ago
Ashish Ramchandani
3
3
answered Sep 2 '16 at 0:06
Aaron AllenAaron Allen
6,59421027
6,59421027
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
|
show 2 more comments
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
What is in registration.php and module.xml?
– Matthew McLennan
Sep 2 '16 at 12:52
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
I added this and now my output states "UNDEFINED." Does that mean its working but I have my attributes are misnamed?
– Matthew McLennan
Sep 2 '16 at 13:33
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
Registration.php and module.xml are boilerplate files, you should check out this tutorial alanstorm.com/magento_2_mvvm_mvc to get a handle on how m2 modules are defined. Could you maybe post a screenshot of the error your getting or else be more specific?
– Aaron Allen
Sep 2 '16 at 20:08
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
@AaronAllen, Its work for me, but I also want to override the content.html of the same minicart and want to add some dynamic data in that file. Can you please explain how I can achieve this. Thanks in advance !
– Ashish Jagnani
Sep 5 '16 at 13:32
2
2
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
Instead if loading the attributes in aroundGetItemData() it is possible to add them to etc/catalog_attributes.xml. Having done that the attributes can be accessed with $item->getProduct()->getAttributeText('attribute_code'); _productRepo is no longer needed.
– Andreas Riedmüller
Sep 28 '17 at 11:49
|
show 2 more comments
i have slove my query by 2 simple step in magento 2.1:
Change into file :->
1.DefaultItem.php
Add line :
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$this->product = $objectManager->get('MagentoCatalogModelProduct')-
>load($this->item->getId());
*Add element into return array result:*
'short_description' => $this->product->getShortDescription(),
2.default.html
Add line:
<a data-bind="text: short_description"></a>
i hope this will help you.
add a comment |
i have slove my query by 2 simple step in magento 2.1:
Change into file :->
1.DefaultItem.php
Add line :
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$this->product = $objectManager->get('MagentoCatalogModelProduct')-
>load($this->item->getId());
*Add element into return array result:*
'short_description' => $this->product->getShortDescription(),
2.default.html
Add line:
<a data-bind="text: short_description"></a>
i hope this will help you.
add a comment |
i have slove my query by 2 simple step in magento 2.1:
Change into file :->
1.DefaultItem.php
Add line :
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$this->product = $objectManager->get('MagentoCatalogModelProduct')-
>load($this->item->getId());
*Add element into return array result:*
'short_description' => $this->product->getShortDescription(),
2.default.html
Add line:
<a data-bind="text: short_description"></a>
i hope this will help you.
i have slove my query by 2 simple step in magento 2.1:
Change into file :->
1.DefaultItem.php
Add line :
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$this->product = $objectManager->get('MagentoCatalogModelProduct')-
>load($this->item->getId());
*Add element into return array result:*
'short_description' => $this->product->getShortDescription(),
2.default.html
Add line:
<a data-bind="text: short_description"></a>
i hope this will help you.
answered Feb 8 '18 at 6:04
Sejal ShahSejal Shah
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f134338%2fi-want-to-customize-my-minicart-in-magento-2-i-need-to-add-3-attributes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown