Shipping Calculator for Shopify

gistfile1.txt

{% assign country = shop.address.country %}

{% if customer.default_address %}
  {% assign country = customer.default_address.country %}
  {% assign zip = customer.default_address.zip %}
{% endif %}

<div class="tab shipping-calculator">
  <input class="tab__input" id="tab1" type="checkbox" name="tabs" checked>
  <label class="tab__label" for="tab1">Shipping Calculator</label>
  <div class="tab__content js-shipping-calculator">
      <form class="form-vertical shipping-calculator__form clearfix js-shipping-form">

        <label for="ShippingCountry">
          Country
        </label>
        <select id="ShippingCountry"
           name="country">
          <option selected="true" value="{{ country }}">
            {{ country }}
          </option>
        </select>

            <label for="ShippingPostcode">
          Postcode
        </label>
        <input name="zip"
           id="ShippingPostcode"
           spellcheck="false"
           autocomplete="off"
           autocapitalize="true"
           autofocus
           value="{% if zip %}{{ zip }}{% endif %}">

        <button class="btn btn--secondary">Estimate shipping rate</button>

      </form>

      <div class="shipping-calculator__result js-shipping-results" style="display: none;">
        <ul>
        </ul>
      </div>
  </div>
</div>

<script src="/services/javascripts/countries.js"></script>
<script>
  var shipping_calculator = $('.js-shipping-calculator'),
    calculator_form   = shipping_calculator.find('.js-shipping-form'),
    calculator_result = shipping_calculator.find('.js-shipping-results'),
    shipping_country  = calculator_form.find('select[name=country]'),
    shipping_zip    = calculator_form.find('input[name=zip]');

  $.each(Countries, function(i, item) {
    shipping_country.append($('<option></option>').attr('value', i).text(i));
  });
  
  calculator_form.on('submit', function(e) {
    calculator_result
      .empty()
      .removeClass('errors form-success')
      .append('<ul></ul>');

    $.get('/cart/shipping_rates.json', { 
      'shipping_address[zip]': shipping_zip.val(),
      'shipping_address[country]': shipping_country.val()
    })
    .done(function(data) {
      $.each(data.shipping_rates, function(i, item) {
        calculator_result.find('ul').append('<li>'+ item.name +' - '+ Shopify.formatMoney(item.price, theme.moneyFormat) +'</li>');
      });

      calculator_result
        .prepend('<p>We found <b>'+ data.shipping_rates.length +' shipping options.</b> Only applicable options will be shown during checkout.</p>')
        .addClass('form-result form-success')
        .show();
    })
    .fail(function(data) {
      $.each(JSON.parse(data.responseText), function(i, item) {
        calculator_result.find('ul').append('<li>'+ i +' - '+ item +'</li>');
      });

      calculator_result
        .prepend('<p>There were some errors</p>')
        .addClass('errors')
        .show();
    });

    e.preventDefault();
  });
</script>