.-.-.-.-.-

{% extends 'shop/_private/layouts' %}

{% if cart is defined and cart.availableShippingMethodOptions|length < 2 and cart.shippingMethod %}
  {% redirect 'shop/checkout/payment-method' %}
{% endif %}

{% block main %}
  
  <div class="md:flex md:-mx-8">
    <div class="md:w-2/3 md:px-8">
      <h1 class="font-bold text-xl">
        {{- 'How should your order be shipped?'|t -}}
      </h1>

{% if not cart.availableShippingMethodOptions|length %}
        <p class="my-3">
          {{- 'No shipping methods available.'|t -}}
        </p>
        <div>
          <a href="{{ url('/shop/checkout/payment-method') }}"
             class="cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white"
          >
            {{- 'Continue to payment method'|t -}}
          </a>
        </div>
      {% else %}
        <div class="mt-3">
          <form method="post">
            {{ csrfInput() }}
            {{ actionInput('commerce/cart/update-cart') }}
            {{ redirectInput('shop/checkout/payment-method') }}
            {{ successMessageInput('Shipping option updated.') }}

{% for handle, method in cart.availableShippingMethodOptions %}
              <div class="js-shipping-select mt-2">
                <label class="block border-blue-300 border-b-2 px-6 py-4 rounded-md shadow-md hover:shadow-lg">
                  <div class="flex justify-start items-center">
                    <div class="pr-3">
                      {{ input('radio', 'shippingMethodHandle', handle, {
                        checked: handle == cart.shippingMethodHandle
                      }) }}
                    </div>
                    <div>
                      <strong>{{ method.name }}</strong><br>
                      <span class="price">{{ method.getPrice()|commerceCurrency(cart.currency) }}</span>
                    </div>
                  </div>
                </label>
              </div>
            {% endfor %}
            <span class="flash">{{ cart.getErrors('shippingMethod')|join }}</span>

<div class="mt-6 text-right">
              {{ tag('button', {
                type: 'submit',
                class: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white',
                text: 'Select shipping method'|t
              }) }}
            </div>
          </form>
        </div>
      {% endif %}
    </div>
    <div class="mt-8 md:w-1/3 md:pr-8 md:mt-0">
      {{ include('shop/checkout/_includes/order-summary', {
        showShippingAddress: true
      }) }}
    </div>
  </div>

{% endblock %}

/srv/users/craft4/apps/craft4-newsite-space/templates/shop/checkout/shipping.twig