Magento – Use a dropdown select for the shipping address on the Onepage Checkout

knockoutjslayoutmagento2onepage-checkout

In Magento 2, I would like to be able to select the shipping address with a dropdown, similar to how you can if you choose to change the billing address.

This is how it currently works:

I would like it to work similarly to when you change the billing address, with a dropdown:

I can see the dropdown for the billing address is set in:
app/code/Magento/Checkout/view/frontend/web/template/billing-address/list.html

But I can't find the knockout template for the shipping address section, I thought it would be on of the files in:
app/code/Magento/Checkout/view/frontend/web/template/shipping-information/
or
app/code/Magento/Checkout/view/frontend/web/template/shipping-information/

But I couldn't find any here which worked.

Any ide

Best Answer

The templates for shipping address section are here :

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/list.html

and

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

You can override the same in your theme like this app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-address/list.html

As you wish to list the addresses in select dropdown you need to change the code like this:

<div class="field field-select-shipping">
    <div class="control" >
        <select class="select" name="shipping_address_id" data-bind="
        options: addressOptions,
        optionsText: addressOptionsText,
        optionsValue: addressOptionsValue,
        value: selectedAddress,
        selectedOptions: selectedAddress,
        event: {change: selectAddress(selectedAddress())};
    "></select>
    </div>
</div>

The js files are located here:

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/list.js

and

vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

You can override the same like this: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/shipping-address/list.js

You can refer to this file vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js for writing functions like addressOptions, addressOptionsText etc.

Related Solutions

Onepage Checkout – Displaying Billing/Shipping Address Outside Progress Sidebar in Magento 1.9

I'm not an expert of Prototype.js, but it seems like the progress sidebar is modified by the reloadStep function of the skin/frontend/base/default/js/opcheckout.js script.

reloadStep: function(prevStep) {
    var updater = new Ajax.Updater(prevStep + '-progress-opcheckout', this.progressUrl, {
        method:'get',
        onFailure:this.ajaxFailure.bind(this),
        onComplete: function(){
            this.checkout.resetPreviousSteps();
        },
        parameters:prevStep ? { prevStep:prevStep } : null
    });
},

Where prevStep + '-progress-opcheckout' (prevStep could be billing, payment etc.) determines which block has to be edited.

One solution, but clearly not the best way, would be to add the code below just after the step-title div.

<div id="<?php echo $_stepId ?>-progress-opcheckout"></div>

As an id has to be unique, you would have to disable completely the progress sidebar, so not only hiding it.

Magento – Magento 2 Change Billing Address format from select dropdown to box as the Shipping address format

You need to override the knockout/html template in your own custom design. I believe the template in question is vendor/magento/module-checkout/view/frontend/web/template/billing-address/list.html.

But in my opinion, it's always best to keep the core functionality of Magento intact. If you want to replace the select with custom HTML, you must also keep in mind all the events that are bound to it. For example, if you select 'New Address ...' in the dropdown, knockout triggers the visibility of the new form (and probably some other parameters underneath the surface).

An approach that I like to use (but which is also frowned upon), is:

Create your (p)HTML template as well (so you have both your style and the dropdown on screen)
Use CSS to hide the dropdown (give it's wrapping container a height of 0px, not display:none, due to Magento validation JS that will not be triggered when display is none).
Use JavaScript to manipulate the value of the hidden dropdown when the user selects a different address (or wants to add a new one). Don't forget to dispatch your JavaScript event! ;-)

With this approach, the core JS/Knockout functionality of Magento stays intact, and your adjustments will be a layer above it.

A different approach of cours will be to overrule the Knockout html template in your design, but chances are you have to rewrite the JS UI Components as well then.

Good luck!

Best Answer

Related Solutions

Onepage Checkout – Displaying Billing/Shipping Address Outside Progress Sidebar in Magento 1.9

Magento – Magento 2 Change Billing Address format from select dropdown to box as the Shipping address format

Related Topic