Skip to content

How to add a PhoneNumber field in Minicart in magento2

enter image description here

enter image description here

I need to save this phonenumber on quote_item table in phoneno coloumn (I add the extra coloumn through upgradeschema.php). I want to update this phonenumber as how the Quantity of a product is updating by default in magento2

i have these files
appcodeMagelearnPlusMinusQuantityetcmodule.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="Magelearn_PlusMinusQuantity" setup_version="2.0.1"/>
</config>

appcodeMagelearnPlusMinusQuantityregistration.php

<?php
MagentoFrameworkComponentComponentRegistrar::register(
    MagentoFrameworkComponentComponentRegistrar::MODULE,
    'Magelearn_PlusMinusQuantity',
    __DIR__
);

appcodeMagelearnPlusMinusQuantitySetupUpgradeSchema.php

<?php
namespace MagelearnPlusMinusQuantitySetup;

use MagentoFrameworkSetupUpgradeSchemaInterface;
use MagentoFrameworkSetupModuleContextInterface;
use MagentoFrameworkSetupSchemaSetupInterface;

class UpgradeSchema implements UpgradeSchemaInterface
{
    public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
    {
        $setup->startSetup();

        if (version_compare($context->getVersion(), '2.0.1', '<')) {
            // Code to run when upgrading to version 2.0.1 or later
            $quoteItemTable = $setup->getTable('quote_item');

            if ($setup->getConnection()->isTableExists($quoteItemTable) == true) {
                $connection = $setup->getConnection();

                $connection->addColumn(
                    $quoteItemTable,
                    'phoneno',
                    [
                        'type' => MagentoFrameworkDBDdlTable::TYPE_TEXT,
                        'nullable' => true,
                        'length' => 255,
                        'comment' => 'Phone Number'
                    ]
                );
            }
        }

        $setup->endSetup();
    }
}

appcodeMagelearnPlusMinusQuantityviewfrontendwebtemplateminicartitemdefault.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: 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"
                            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>

            <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="details-phone qty">
    <label class="label" data-bind="i18n: 'Phone Number', attr: {
           for: 'cart-item-'+item_id+'-phone'}"></label>
    <input data-bind="attr: { id: 'cart-item-'+item_id+'-phone', 'data-cart-item': item_id, 'data-cart-item-id': product_sku}, value: $parent.phoneNumber"
            type="tel"
            class="item-phone cart-item-phone"
            maxlength="15"/>
</div>
<button type="button" data-bind="click: updatePhoneNumber">Update</button>

</li>

So what next I have to do ?