0

I need to move the shipping methods to the first step in the checkout but I want the "Next" button to stay at the bottom.

I can rearrange the position in shipping.html but I dont think this is the best way of doing it

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title"
             translate="'Shipping Methods'"
             data-role="title" />

        <each args="getRegion('before-shipping-method-form')" render="" />

        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <render args="shippingMethodListTemplate"/>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" />
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()" />
                </div>

            </form>
            <div class="no-quotes-block"
                 ifnot="rates().length > 0"
                 translate="'Sorry, no quotes are available for this order at this time'" />
        </div>
    </div>
</li>
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title" />
    <div id="checkout-step-shipping"
         class="step-content"
         data-role="content">

        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
        <each args="getRegion('address-list')" render="" />
        <each args="getRegion('address-list-additional-addresses')" render="" />

        <!-- Address form pop up -->
        <if args="!isFormInline">
            <div class="new-address-popup">
                <button type="button"
                        class="action action-show-popup"
                        click="showFormPopUp"
                        visible="!isNewAddressAdded()">
                    <span translate="'New Address'" />
                </button>
            </div>
            <div id="opc-new-shipping-address"
                 visible="isFormPopUpVisible()"
                 render="shippingFormTemplate" />
        </if>

        <each args="getRegion('before-form')" render="" />

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate" />
    </div>
</li>

<!--Next Button-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div  />

        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render="" />
                </div>
                <div role="alert"
                     if="errorValidationMessage().length"
                     class="message notice">
                    <span text="errorValidationMessage()" />
                </div>
                <div class="actions-toolbar" id="shipping-method-buttons-container">
                    <div class="primary">
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span translate="'Next'" />
                        </button>
                    </div>
                </div>
            </form>
            <div class="no-quotes-block"
                 ifnot="rates().length > 0"
                 translate="'Sorry, no quotes are available for this order at this time'" />
        </div>
    </div>
</li>

So basically I have copied the Shipping method template section to the bottom and removed the <render args="shippingMethodListTemplate"/>

1 Answer 1

0

Check this, I made some modifications.

<!-- Shipping method template -->
<li id="opc-shipping_method" class="checkout-shipping-method" data-bind="fadeVisible: visible(), blockLoader: isLoading" role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title" translate="'Shipping Methods'" data-role="title"></div>

        <each args="getRegion('before-shipping-method-form')" render=""></each>

        <div id="checkout-step-shipping_method" class="step-content" data-role="content" role="tabpanel" aria-hidden="false">
            <form id="co-shipping-method-form" class="form methods-shipping" if="rates().length" submit="setShippingInformation" novalidate="novalidate">

                <render args="shippingMethodListTemplate"></render>

                <div id="onepage-checkout-shipping-method-additional-load">
                    <each args="getRegion('shippingAdditional')" render=""></each>
                </div>
                <div role="alert" if="errorValidationMessage().length" class="message notice">
                    <span text="errorValidationMessage()"></span>
                </div>

            </form>
            <div class="no-quotes-block" ifnot="rates().length > 0" translate="'Sorry, no quotes are available for this order at this time'"></div>
        </div>
    </div>
</li>

<!-- Shipping Address -->
<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" translate="'Shipping Address'" data-role="title"></div>
    <div id="checkout-step-shipping" class="step-content" data-role="content">

        <each if="!quoteIsVirtual" args="getRegion('customer-email')" render=""></each>
        <each args="getRegion('address-list')" render=""></each>
        <each args="getRegion('address-list-additional-addresses')" render=""></each>

        <!-- Address form pop-up -->
        <if args="!isFormInline">
            <div class="new-address-popup">
                <button type="button" class="action action-show-popup" click="showFormPopUp" visible="!isNewAddressAdded()">
                    <span translate="'New Address'"></span>
                </button>
            </div>
            <div id="opc-new-shipping-address" visible="isFormPopUpVisible()" render="shippingFormTemplate"></div>
        </if>

        <each args="getRegion('before-form')" render=""></each>

        <!-- Inline address form -->
        <render if="isFormInline" args="shippingFormTemplate"></render>

        <!-- Next Button -->
        <div class="actions-toolbar" id="shipping-method-buttons-container">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span translate="'Next'"></span>
                </button>
            </div>
        </div>
    </div>
</li>

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.