Skip to content

Instantly share code, notes, and snippets.

@fredryk
Created December 29, 2014 16:25
Show Gist options
  • Select an option

  • Save fredryk/ea274b9911b7e0192926 to your computer and use it in GitHub Desktop.

Select an option

Save fredryk/ea274b9911b7e0192926 to your computer and use it in GitHub Desktop.
shipping-rates-calculator
{% if settings.show_shipping_calculator %}
<div id="shipping-calculator">
<h5>{{ 'cart.shipping_calculator.title' | t }}</h5>
<div class="grid">
<div class="grid-item col-3 medium--col-6 small--col-12">
<label for="address_country">{{ 'cart.shipping_calculator.country' | t }}</label>
<select id="address_country" name="address[country]" data-default="{% if shop.customer_accounts_enabled and customer %}{{ customer.default_address.country }}{% elsif settings.shipping_calculator_default_country != '' %}{{ settings.shipping_calculator_default_country }}{% endif %}">{{ country_option_tags }}</select>
</div>
<div class="grid-item col-3 medium--col-6 small--col-12" id="address_province_container" style="display:none;">
<label for="address_province" id="address_province_label">{{ 'cart.shipping_calculator.state' | t }}a</label>
<select id="address_province" class="address_form" name="address[province]" data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}"></select>
</div>
<div class="grid-item col-2 medium--col-6 small--col-12">
<label for="address_zip">{{ 'cart.shipping_calculator.zip' | t }}</label>
<input type="text" id="address_zip" class="styled-input" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% endif %}>
</div>
<div class="grid-item col-4 medium--col-6 small--col-12">
<label for="get-rates-submit" class="small--hide">&nbsp;</label>
<input type="submit" id="get-rates-submit" class="get-rates styled-submit" value="{{ 'cart.shipping_calculator.submit' | t }}">
</div>
</div><!-- .grid -->
<div id="wrapper-response"></div>
</div><!-- #shipping-rates-calculator -->
<script id="shipping-calculator-response-template" type="text/template">
<p id="shipping-rates-feedback" <% if (success) { %> class="success" <% } else { %> class="error" <% } %>>
<% if (success) { %>
<% if (rates.length > 1) { %>
<%= rates.length %> {{ 'cart.shipping_calculator.multiple_rates' | t }} <%= rates[0].price %>.
<% } else if (rates.length == 1) { %>
{{ 'cart.shipping_calculator.single_rate' | t }} <%= address %>.
<% } else { %>
{{ 'cart.shipping_calculator.no_rates' | t }}
<% } %>
<% } else { %>
<%= errorFeedback %>
<% } %>
</p>
<ul id="shipping-rates">
<% for (var i=0; i<rates.length; i++) { %>
<li><%= rates[i].name %> at <%= rates[i].price %></li>
<% } %>
</ul>
</script>
<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->
{{ '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js' | script_tag }}
{{ '/services/javascripts/countries.js' | script_tag }}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'jquery.cart.min.js' | asset_url | script_tag }}
<script>
Shopify.Cart.ShippingCalculator.show( {
submitButton: {{ 'cart.shipping_calculator.submit' | t | json }},
submitButtonDisabled: {{ 'cart.shipping_calculator.submit' | t | json }}{% if shop.customer_accounts_enabled and customer %},
customerIsLoggedIn: true{% endif %},
moneyFormat: {{ shop.money_format | json }}
} );
</script>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment