Changing the checkout form dependent on delivery rate chosen

There are certain circumstances where you may want to change the display of the checkout/address page depending on the delivery zone/rate chosen by the visitor on the checkout/basket page.

For example, you may not want to show the delivery address section on your checkout if the customer chooses to collect their order from your store.

The delivery zone and delivery rate chosen on the checkout/basket page can be returned on the checkout/address page using the variables described below.

global.basket.country_id

Will return the ID of the country chosen by the user.

A list of countries and their IDs can be rendered by using the following code on the checkout_basket.twig view on your website.

{% for country in basket.shipping_countries %}
    {{ country.id }} - {{ country.name }}<br>
{% endfor %}

Alternatively, when viewing the delivery settings page within your account, hovering over the 'delete zone' button for a delivery zone will show (in your browser's status bar) a URL, e.g.

https://v5.shopwired.co.uk/business/manage-ecommerce-shipping-settings/del-246

The final number is the ID of the shipping country.

global.basket.shipping_rate_id

Will return the ID of the delivery rate chosen by the user.

When viewing the delivery settings page within your account, hovering over the delete icon for an individual delivery rate will show (in your browser's status bar) a URL, e.g.

https://v5.shopwired.co.uk/business/manage-ecommerce-shipping-settings/delRate-10415

The final number is the ID of the delivery rate.

Using the variables

On the checkout/address page, these variables can be used to detect the delivery zone chosen or the delivery rate chosen and perform actions accordingly.

As described at the top of this article, you might want to hide the 'delivery address' section on your website's checkout page if the user chooses the click & collect delivery zone at checkout.

You should note that you cannot simply hide the delivery address section as it is a platform requirement that certain fields are completed on the checkout form.

Instead, the required fields from the shipping section can be included in the view as hidden fields with the values repopulated.

For example,

<div class="column medium-6 checkout-details checkout-shipping-details">
    <h4>Your Delivery Details</h4>
    {# Render delivery fields #}
    {% for name, field in checkout.shipping %}
        {{ theme.checkout_form_field(name, field, labels) }}
    {% endfor %}
</div>

becomes...

{% if global.basket.country_id == '246' %}{# click & collect #}
    <input type="hidden" name="shipping_name" value="Click & Collect">
    <input type="hidden" name="shipping_email" value="Click & Collect">
    <input type="hidden" name="shipping_address1" value="Click & Collect">
    <input type="hidden" name="shipping_city" value="Click & Collect">
    <input type="hidden" name="shipping_postcode" value="Click & Collect">
    <input type="hidden" name="shipping_country" value="United Kingdom"><!-- This must be a valid country name -->
{% else %}
    <div class="column medium-6 checkout-details checkout-shipping-details">
        <h4>Your Delivery Details</h4>
        {# Render delivery fields #}
        {% for name, field in checkout.shipping %}
            {{ theme.checkout_form_field(name, field, labels) }}
        {% endfor %}
    </div>
{% endif %}