0

I need to display custom product attribute in mini cart for each product in the cart. How to get attribute value. please see below screenshot.

https://prnt.sc/-99NK5eeFgAZ

Thanks, Kiran

10
  • Do you want to display custom product attribute in minicart only? or do you want to display it on both places minicart and cart page?
    – Dotsquares
    Jul 13, 2022 at 7:12
  • Please see below my answer, apply that, and it will be worked like a charm!!!!
    – Dotsquares
    Jul 13, 2022 at 10:02
  • Outcome screenshot: tinyurl.com/24r4asun
    – Dotsquares
    Jul 13, 2022 at 10:13
  • minicart only @Dotsquares
    – kiran
    Jul 13, 2022 at 13:19
  • ok @kiran, then it will work with my code which I post below as an Answer...
    – Dotsquares
    Jul 14, 2022 at 4:17

2 Answers 2

1

app/code/Dotsquares/CustomAttribute/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Checkout/template/minicart/item/default.html': 'Dotsquares_SellerLocator/template/minicart/item/default.html'
        }
    }
};

app/code/Dotsquares/CustomAttribute/etc/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="Magento\Checkout\CustomerData\DefaultItem">
        <plugin name="AddAttPlug" type="Dotsquares\CustomAttribute\Plugin\DefaultItem" />
    </type>
</config>

app/code/Dotsquares/CustomAttribute/Plugin/DefaultItem.php

<?php

namespace Dotsquares\SellerLocator\Plugin;

use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Catalog\Model\Product;
use Magento\Quote\Model\Quote\Item;

class DefaultItem
{
    protected $_productloader;

    public function __construct(
        \Magento\Catalog\Model\ProductFactory $_productloader
    )
    {
        $this->_productloader = $_productloader;
    }

    public function aroundGetItemData($subject, \Closure $proceed, Item $item)
    {
        $data = $proceed($item);

        /** @var Product $product */
        $product = $this->_productloader->create()->load($item->getProduct()->getId());

        $atts = [
            "custom_value" => $product->getCustomValue()
        ];

        return array_merge($data, $atts);
    }
}

app/code/Dotsquares/CustomAttribute/view/frontend/web/template/minicart/item/default.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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}, html: $parent.getProductNameUnsanitizedHtml(product_name)"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <span data-bind="html: $parent.getProductNameUnsanitizedHtml(product_name)"></span>
                <!-- /ko -->
            </strong>
            <!-- ko if: item.custom_value -->
        <div data-bind="html: 'Custom Value: ' + item.custom_value"></div>
        <!-- /ko -->

            <!-- 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: $parents[1].getOptionValueUnsanitizedHtml(option.value.join('<br>'))"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
                                <span data-bind="html: $parents[1].getOptionValueUnsanitizedHtml(option.value)"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
                            <span data-bind="text: 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 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"/>
                <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>
    <div class="message notice" if="$data.message">
        <div data-bind="text: $data.message"></div>
    </div>
</li>
7
  • prnt.sc/nFbH1d0vql90 how can I disable?
    – kiran
    Jul 14, 2022 at 21:08
  • Did you create an attribute in the product and assign it to them... then put a value in a specific product. Let me know if you have any issues?
    – Dotsquares
    Jul 15, 2022 at 4:44
  • can we display same attributes in checkout summary?
    – kiran
    Aug 2, 2022 at 20:54
  • Yes, we can add as well over the checkout summary. But we need to do some more work on the checkout XML file.
    – Dotsquares
    Aug 3, 2022 at 11:09
  • vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html I override this file in my theme. app\design\frontend\Vendor\themename\Magento_Checkout\web\template\summary\item\details.html
    – kiran
    Aug 3, 2022 at 11:21
0

How can we add the validations like,

if(attribute1 == "Some Text"){
 Then show Attribute2;

}

How can we achieve it in Default.html ? How to add the condition in html for the custom attribute. @Dotsquares

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.