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 '20 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 '20 at 12:59
0

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, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.