1

Magento2 by default automatically calculates the shipping rates and shows on the frontend if the user enters the data in the cart sidebar.

I need to add a button so once the user enters the details like Country, zip code, and then click on the apply button shipping method should be shown. enter image description here

2
  • this is default feature in Magento for estimate shipping on the Cart page.
    – Sumit
    May 18, 2020 at 10:42
  • By default when you select the country and enter zip code on cart page it automatically calculate..I want button at the end so that once user select the country and enter zip code it should show shipping method.
    – John
    May 18, 2020 at 12:59

1 Answer 1

1

I hope this code help you add below html/js file to your theme and apply changes.

1. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/layout/checkout_cart_index.xml

<referenceBlock name="checkout.cart.shipping">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">                        
                <item name="block-summary" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="block-shipping" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="address-fieldsets" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="city" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <item name="country_id" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="visible" xsi:type="boolean">false</item>
                                            </item>
                                        </item>
                                        <item name="region_id" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <!-- The following items override configuration of corresponding address attributes -->
                                        <item name="region" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <item name="postcode" xsi:type="array">
                                            <!-- post-code field has custom UI component -->
                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                            <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
                                            <item name="sortOrder" xsi:type="string">114</item>
                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                            <item name="placeholder" xsi:type="string">Test placeholder</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

2. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/web/template/cart/shipping-estimation.html

<form method="post" id="shipping-zip-form">
    
    <!-- ko foreach: getRegion('address-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="actions-toolbar">
        <div class="primary">
            <button class="action apply primary" type="button" data-bind="click: showShippingMethods()">
                <span data-bind="text: $t('Get Estimate') "></span>
            </button>
        </div>
    </div>
</form>

3. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/web/js/view/cart/shipping-estimation.js

<!-- Comment field change event for auto estimation -->
initElement: function (element) {
    this._super();

    // uncomment if need estimate on change
    /*if (element.index === 'address-fieldsets') {
        shippingRatesValidator.bindChangeHandlers(element.elems(), true, 500);
        element.elems.subscribe(function (elems) {
            shippingRatesValidator.doElementBinding(elems[elems.length - 1], true, 500);
        });
    }*/

    return this;
},

<!-- Add this new function after getEstimationInfo() -->
showShippingMethods: function () {
     this.getEstimationInfo();
}

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.