How to enable city field on cart page in Magento2

Enable city field on cart page in Magento2

Here we learn how to enable city field in Magento2 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 Copyright (c) 2010-2016 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 Copyright (c) 2010-2016 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 Copyright (c) 2010-2016 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.

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
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.

Any query please ask in comment.