Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
sectioned themes shipping calculator snippet
{% unless settings.shipping_calculator == 'Disabled' %}
<div id="shipping-calculator">
<h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
<div>
<p class="field">
<label for="address_country">Country</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>
</p>
<p class="field" id="address_province_container" style="display:none;">
<label for="address_province" id="address_province_label">Province</label>
<select id="address_province" name="address[province]" data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}"></select>
</p>
<p class="field">
<label for="address_zip">Zip/Postal Code</label>
<input type="text" id="address_zip" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% endif %} />
</p>
<p class="field">
<input type="button" class="get-rates btn button" value="{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}" />
</p>
</div>
<div id="wrapper-response"></div>
</div>
{% endunless %}
<script id="shipping-calculator-response-template" type="text/template">
{% raw %}
<p id="shipping-rates-feedback" {{#if success}} class="success" {{else}} class="error" {{/if}}>
{{#if success}}
{{#if rates}}
{{#rates}}
{{#if @first}}
Rates start at {{price}}.
{{/if}}
{{/rates}}
{{else}}
We do not ship to this destination.
{{/if}}
{{else}}
{{ errorFeedback }}
{{/if}}
</p>
{% endraw %}
</script>
<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->
@konnerdudley
Copy link

konnerdudley commented Mar 28, 2018

Hey I have a question that is really racking my brain. Instead of simply showing the response "Rates start at {{price}}" I am trying to get this to list out the rates. I've already adjusted the fist rate to read:

{{#if @FIRST}}
{{name}} at {{price}}.
{{/if}}

which prints something like:

Priority USPS Envelope at $4.25

...but I can't figure out how to list the rest of the rates. Please help! I love this addition to my shop, great work!

@konnerdudley
Copy link

konnerdudley commented Mar 28, 2018

Actually I think I figure d it out. These seems to work:

`<script id="shipping-calculator-response-template" type="text/template">
{% raw %}

{{#if success}} {{#if rates}} {{#rates}}

    {{#if @first}}
        {{name}} at <b>{{price}}</b>
     <br />
     {{/if}}
     
     {{#if @index}}
        {{name}} at <b>{{price}}</b>
     <br />
     {{/if}}
     
  {{/rates}}
{{else}}
  We do not ship to this destination.
{{/if}}    

{{else}}
{{ errorFeedback }}
{{/if}}

{% endraw %} </script>`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment