How to enable city field on cart page in Adobe Commerce (Magento 2)

Enable city field on cart page in Adobe Commerce (Magento 2)

Here we learn how to enable city field in Adobe Commerce (Magento 2) cart page.

1. create di.xml file to overwrite block Magento\Checkout\Block\Cart\LayoutProcessor Block.

<?xml version="1.0"?>
<!--
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_EnableCity
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Checkout\Block\Cart\LayoutProcessor"
                type="Webkul\EnableCity\Model\Checkout\Block\Cart\Shipping" />
</config>

Purpose of override Magento\Checkout\Block\Cart\LayoutProcessor is that we need to overwrite function isCityActive() because its return false by default.

We could create plugin for this method but its a protected function.

2. Now create own override block Webkul\EnableCity\Model\Checkout\Block\Cart\Shipping.

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_EnableCity
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */

namespace Webkul\EnableCity\Model\Checkout\Block\Cart;

/**
 * Checkout cart shipping block plugin
 */
class Shipping extends \Magento\Checkout\Block\Cart\LayoutProcessor
{
    /**
     * @var \Magento\Framework\App\Config\ScopeConfigInterface
     */
    protected $_scopeConfig;

    /**
     * @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Checkout\Block\Checkout\AttributeMerger $merger,
        \Magento\Directory\Model\ResourceModel\Country\Collection $countryCollection,
        \Magento\Directory\Model\ResourceModel\Region\Collection $regionCollection
    ) {
        $this->_scopeConfig = $scopeConfig;
        parent::__construct($merger, $countryCollection, $regionCollection);
    }

    /**
     * Show City in Shipping Estimation
     *
     * @return bool
     * @codeCoverageIgnore
     */
    protected function isCityActive()
    {
        return true;
    }
}

Still we will not able to see the city field at cart page. Because when you open Magento/Checkout/view/frontend/web/js/model/cart/totals-processor/default.js file, you would see there is ‘countryId’, ‘region’, ‘regionId’, ‘postcode’ passed in requiredFields array.

So now we need to override this js file in our module.

3. Create Webkul/EnableCity/view/frontend/requirejs-config.js file

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_EnableCity
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
 /*jshint jquery:true*/
var config = {
    map: {
        '*': {
            'Magento_Checkout/js/model/cart/totals-processor/default': 'Webkul_EnableCity/js/model/cart/totals-processor/default'
        }
    }
};

4. Create Webkul/EnableCity/view/frontend/web/js/model/cart/totals-processor/default.js file.

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_EnableCity
 * @author    Webkul
 * @copyright Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
define(
    [
        'underscore',
        'Magento_Checkout/js/model/resource-url-manager',
        'Magento_Checkout/js/model/quote',
        'mage/storage',
        'Magento_Checkout/js/model/totals',
        'Magento_Checkout/js/model/error-processor'
    ],
    function (_, resourceUrlManager, quote, storage, totalsService, errorProcessor) {
        'use strict';

        return {
            requiredFields: ['countryId', 'region', 'regionId', 'postcode', 'city'],

            /**
             * Get shipping rates for specified address.
             */
            estimateTotals: function (address) {
                var serviceUrl, payload;
                totalsService.isLoading(true);
                serviceUrl = resourceUrlManager.getUrlForTotalsEstimationForNewAddress(quote),
                    payload = {
                        addressInformation: {
                            address: _.pick(address, this.requiredFields)
                        }
                    };

                if (quote.shippingMethod() && quote.shippingMethod()['method_code']) {
                    payload.addressInformation['shipping_method_code'] = quote.shippingMethod()['method_code'];
                    payload.addressInformation['shipping_carrier_code'] = quote.shippingMethod()['carrier_code'];
                }

                storage.post(
                    serviceUrl, JSON.stringify(payload), false
                ).done(
                    function (result) {
                        quote.setTotals(result);
                    }
                ).fail(
                    function (response) {
                        errorProcessor.process(response);
                    }
                ).always(
                    function () {
                        totalsService.isLoading(false);
                    }
                );
            }
        };
    }
);

Now run php bin/magento setup:static-content:deploy command, and go to the cart page, you can see city filed there.

If you need technical support, please contact us at support@webkul.com. Additionally, explore a range of solutions to enhance your online store’s capabilities by visiting the Adobe Commerce extensions page.

For specialized advice or to develop custom features, consider hiring Adobe Commerce Developers for your project.

Any query please ask in comment.