Shipping Calculator

<div class="shipping-calculator">
  <h3>Calculate Shipping</h3>
  <form id="shipping-form">
    <input type="text" 
           name="zip" 
           placeholder="Postal Code" 
           required>
    <select name="country">
      {% for country in shop.countries %}
        <option value="{{ country.iso_code }}">
          {{ country.name }}
        </option>
      {% endfor %}
    </select>
    <button type="submit">Calculate</button>
  </form>
  <div id="shipping-results"></div>
</div>

<script>
document.getElementById('shipping-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const response = await fetch('/cart/shipping_rates.json?' + new URLSearchParams(formData));
  const data = await response.json();
  document.getElementById('shipping-results').innerHTML = 
    data.shipping_rates.map(rate => 
      `<p>${rate.name}: ${rate.price}</p>`
    ).join('');
});
</script>