-
Copy this code and paste it at the bottom of your
Assets/vendor.js
file, or if your theme doesn't have avendor.js
file, place it at the very top of thetheme.js
file. (At the moment, POP requires this to be added at the very bottom of the theme.js file, followed by the next bit). -
Add this to the bottom of the
Assets/theme.js
file:
Shopify.Cart.ShippingCalculator.show( {
submitButton: theme.strings.shippingCalcSubmitButton,
submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,
customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,
moneyFormat: theme.strings.shippingCalcMoneyFormat
} );
- Add this to the bottom of the
Sections/cart-template.liquid
file (In Brooklyn, Pop and Supply it is theTamplates/cart.liquid
file):
<script>
theme.strings = {
shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }},
{% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}
shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script src="/services/javascripts/countries.js"></script>
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
-
While you're in
Sections/cart-template.liquid
file, find the</form>
code and place{% include 'shipping-calculator' %}
just above it. -
Create a new snippet called
shipping-calculator.liquid
and place the following inside:
{% 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>
<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]-->
{% endunless %}
- Add this to the bottom of the
settings_scheme.json
file, on the line just before the last square bracket]
:
,
{
"name": "Shipping Rates Calculator",
"settings": [
{
"type": "select",
"id": "shipping_calculator",
"label": "Show the shipping calculator?",
"options": [
{
"value": "Disabled",
"label": "No"
},
{
"value": "Enabled",
"label": "Yes"
}
],
"default": "Enabled"
},
{
"type": "text",
"id": "shipping_calculator_heading",
"label": "Heading text",
"default": "Get shipping estimates"
},
{
"type": "text",
"id": "shipping_calculator_default_country",
"label": "Default country selection",
"default": "United States"
},
{
"type": "paragraph",
"content": "If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the spelling to use here, refer to the first checkout page."
},
{
"type": "text",
"id": "shipping_calculator_submit_button_label",
"label": "Submit button label",
"default": "Calculate shipping"
},
{
"type": "text",
"id": "shipping_calculator_submit_button_label_disabled",
"label": "Submit button label when calculating",
"default": "Calculating..."
},
{
"type": "paragraph",
"content": "Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) ."
}
]
}
Hey David,
I think this part:
Should go at the bottom of
theme.js
also, instead of incart.liquid