1

how to show the dispatch date on the mini cart after adding the item the items? can anyone help me out with this?

Thank you in advance.

3
  • Can you please explain in detail about where the dispatch date information will come from? Nov 9, 2022 at 7:11
  • it will come form the Checkout/Helper/data.php Nov 9, 2022 at 7:19
  • i make the dispatchdate function on that Nov 9, 2022 at 7:20

1 Answer 1

1

Implement the below code to achieve your desired result.

Folder structure will be as below

enter image description here

Create app/code/Tarun/CustomizedMinicart/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="Tarun_CustomizedMinicart" >
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Create app/code/Tarun/CustomizedMinicart/registration.php

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Tarun_CustomizedMinicart', __DIR__);

Create app/code/Tarun/CustomizedMinicart/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\AbstractItem">
        <plugin name="appendData" type="Tarun\CustomizedMinicart\Plugin\DefaultItemPlugin" sortOrder="10" disabled="false" />
    </type>
</config>

Create app/code/Tarun/CustomizedMinicart/Plugin/DefaultItemPlugin.php

<?php


namespace Tarun\CustomizedMinicart\Plugin;

use Magento\Checkout\CustomerData\AbstractItem;
use Magento\Quote\Model\Quote\Item;

class DefaultItemPlugin
{
    /**
     * @param AbstractItem $subject
     * @param array $result
     * @param Item $item
     * @return array
     */
    public function afterGetItemData(AbstractItem $subject, array $result, Item $item): array
    {
        $dispatchDate = "03-01-1989"; //Set your date here from helper as mentioned by you in your comment
        $result['dispatch_date'] = $dispatchDate;
        return $result;
    }
}

Create app/code/Tarun/CustomizedMinicart/view/frontend/layout/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="config" xsi:type="array">
                                <item name="itemRenderer" xsi:type="array">
                                    <item name="default" xsi:type="string">defaultRenderer</item>
                                    <item name="simple" xsi:type="string">defaultRenderer</item>
                                    <item name="virtual" xsi:type="string">defaultRenderer</item>
                                </item>
                            </item>
                            <item name="children" xsi:type="array">
                                <item name="item.renderer" xsi:type="array">
                                    <item name="component" xsi:type="string">Magento_Checkout/js/view/cart-item-renderer</item>
                                    <item name="config" xsi:type="array">
                                        <item name="displayArea" xsi:type="string">defaultRenderer</item>
                                        <item name="template" xsi:type="string">Tarun_CustomizedMinicart/minicart/item/default</item> <!--Changed the template path here from Magento's to Custom-->
                                    </item>
                                    <item name="children" xsi:type="array">
                                        <item name="item.image" xsi:type="array">
                                            <item name="component" xsi:type="string">Magento_Catalog/js/view/image</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">Magento_Catalog/product/image</item>
                                                <item name="displayArea" xsi:type="string">itemImage</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Create app/code/Tarun/CustomizedMinicart/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 -->
                <!-- ko if: dispatch_date -->
                <span data-bind="text: dispatch_date"></span>
                <!-- /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: $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>

Just for your information :- I have copied the above template from vendor/magento/module-checkout/view/frontend/web/template/minicart/item/default.html and added below three lines

<!-- ko if: dispatch_date -->
    <span data-bind="text: dispatch_date"></span>
<!-- /ko -->

enter image description here

If this answer works as your expected, please mark it as accepted. That indicates your issue is solved and makes it easier for others with the same issue to find a verified answer. And that would be great if you click the upvote button for the answer in case you feel it is useful.

Happy Coding

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.