Shopify themes, liquid, logos, and UX
At some point over the past year or so my shipping calculator has stopped working as it used to. It is possible that I've changed something as I bumble my way through implementing new features from time to time.
Now when one clicks calculate on the page it just says calculating but nothing happens.
I have resolved as many conflics as I know how that I can see on inspect>console in my browser.
Website: www.kingdom3d.com.au
Theme: Classic (pretty old)
cart.liquid:
{% include 'elspw_cart' %}
<script type="text/javascript">
if(location.pathname=="/cart")
$(document).ready(function(){
document.getElementById("cart1").setAttribute('style', "display:block");
document.getElementById("cartm").setAttribute('style', "display:none");
})
</script>
{% comment %}
This is your /cart template. If you are using the Ajaxify Cart plugin,
your form (with action="/cart") layout will be used in the drawer/modal.
For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments
{% endcomment %}
{% if cart.item_count > 0 %}
<form action="/cart" method="post" novalidate class="cart">
<div class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</div>
<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item large--one-half push--large--one-half">
<div class="grid--full">
<div class="grid__item one-third medium-down--one-third">
<span class="h4">{{ 'cart.label.price' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-center">
<span class="h4">{{ 'cart.label.quantity' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-right">
<span class="h4">{{ 'cart.label.total' | t }}</span>
</div>
</div>
</div>
</div>
</div>
{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<div class="cart__row" data-id="{{ item.id }}">
<div class="grid--full cart__row--table-large">
<div class="grid__item large--one-half">
<div class="grid">
<div class="grid__item one-third">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h4">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}
{% if settings.cart_vendor_enable %}
<p>{{ item.vendor }}</p>
{% endif %}
{% comment %}
Optional, loop through custom product line items if available
For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
{% endcomment %}
{% assign propertySize = item.properties | size %}
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_properties" style="display:none !important;"></span>{% if propertySize > 0 %}
{% for p in item.properties %}
{%- if p.first.first == '_' -%}{%- continue -%}{%- endif -%}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
<br>
{{ p.first }}:
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}
<a href="/cart/change?line={{ forloop.index }}&quantity=0" data-id="{{ item.id }}" class="cart__remove">
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>
</div>
</div>
<div class="grid__item large--one-half">
<div class="grid--full cart__row--table-large">
<div class="grid__item one-third">
<span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
<span class="h5"><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" style="display:none !important;"></span>{{ item.price | money }}</span>
</div>
<div class="grid__item one-third text-center">
<span class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</span>
{% comment %}
Added data-id for the ajax cart implementation only.
{% endcomment %}
<input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}">
</div>
<div class="grid__item one-third text-right">
<span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>
<span class="h5">
{% if item.original_line_price != item.line_price %}
<small class="cart-item__original-price"><s>{{ item.original_line_price | money }}</s></small>
{% endif %}
<span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" style="display:none !important;"></span>{{ item.line_price | money }}
</span>
{% if item.original_line_price != item.line_price %}
{% for discount in item.discounts %}
<small class="cart-item__discount">{{ discount.title }}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row">
<div class="grid" id="ship_calc" name="ship_calc">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
{% assign noteSize = cart.note | size %}
<div class="grid__item large--five-twelfths">
<button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
{{ 'cart.label.add_note' | t }}
</button>
<div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item text-right{% if settings.cart_notes_enable %} large--seven-twelfths{% endif %}">
<p style="margin-bottom:0px;">
<span class="cart__subtotal-title"><span id="bk-cart-subtotal-label">{{ 'cart.general.subtotal' | t }}</span></span>
<span class="h5 cart__subtotal"><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span><span id="bk-cart-subtotal-price">{{ cart.total_price | money }}</span></span><br>
{% if cart.total_discounts > 0 %}
{% assign savings = cart.total_discounts | money %}
<small class="cart-subtotal__savings">{{ 'cart.general.savings_html' | t: price: savings }}</small>
{% endif %}
</p>
<p><i style="font-size:12px">All prices include GST</i></p>
<p id="cart1" style= "display:none";><em>{% comment %}See shipping estimate below{% endcomment %}{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
<p id="cartm"><em>Go to <a href="/cart"><u>cart page</u></a></em></p>
<input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
<input type="submit" name="checkout" class="btn" value="Calculate Shipping and {{ 'cart.general.checkout' | t }}">
<hr class="hr hr--tiny" style="height:1pt; visibility:hidden;" />
<a href="https://www.kingdom3d.com.au/collections/1-75mm-filament"{% comment %} href="{{ cart.items.first.product.collections.first.url }}" {% endcomment %} title="Continue Shopping">Continue Shopping...</a>
{% if additional_checkout_buttons %}
<div class="cart__additional_checkout_buttons">{% comment %}{{ content_for_additional_checkout_buttons }}{% endcomment %}</div>
{% endif %}
</div>
</div>
</div>
{% render 'shipping-calculator' %}
</form>
{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p>{{ 'cart.general.empty' | t }}</p>
<a href="https://www.kingdom3d.com.au/collections/1-75mm-filament" title="Continue Shopping">Continue Shopping</a>
{% comment %} <p>{{ 'cart.general.continue_browsing_html' | t }}</p> {% endcomment %}
{% endif %}
{% comment %}<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> {% endcomment %}
<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
shipping-calculator.liquid:
{% unless settings.shipping_calculator == 'Disabled' %}
<div id="shipping-calculator" name="shipping-calculator">
<h3>Shipping Estimate</h3> {% comment%}{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}{% endcomment %}
<div style="display:block">
<p class="field" style= "display:block; width: 200px">
<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="width: 200px; display:block;">
<label for="address_province" id="address_province_label" style="display:block;">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 }}{% elsif customer.default_address.province != '' %}Queensland{% endif %}" {% comment %}style="display:none;{% endcomment %}"></select>
</p>
<p class="field" style= "width: 200px; display:block;">
<label for="address_zip">Post Code</label>
<input type="text" id="address_zip" name="address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% else %}value="4000"{% endif %} />
</p>
</div>
<div>
<p class="field" style= "width: 180px">
<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 style="color:#888888;">*Delivery time estimates are for capital cities. Smaller cities, towns and rural areas will generally take 1-2 days longer than estimate.</div>
</div>
<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) { %>
<font color = "#ff0000">There are <%= rates.length %> shipping rates available for this order{% comment %}<%= address %> {% endcomment %}, starting at <%= rates[0].price %>:</font>
<% } else if (rates.length == 1) { %>
<font color = "#ff0000">Our best rate{% comment %}There is one shipping rate available for this order<%= address %> {% endcomment %}:</font>
<% } else { %>
Our shipping calculators are not capable of getting the best rate for this order, please leave your cart with the items you want to purchase and let us know you need a shipping quote -- we usually respond within an hour (if not immediately)
{% comment %} We do not ship to this destination. {% endcomment %}
<% } %>
<% } else { %>
<%= errorFeedback %>
<% } %>
</p>
<ul id="shipping-rates">
<% for (var i=0; i<rates.length; i++) { %>
<li>• <%= rates[i].name %> - <font color = "#9a38a3"><b><%= rates[i].price %></b></font></li>
<% } %>
</ul>
</script>
<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->
{{ '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.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: {{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' | json }},
submitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: 'Calculating...' | json }}{% if customer %},
customerIsLoggedIn: true{% endif %},
moneyFormat: {{ shop.money | json }}{% comment %}_with_currency_format{% endcomment %}
} );
</script>
{% endunless %}
Any help would be greatly appreciated.
There seems to be a lot of errors coming from ajxaxify and jquerie 1.10 even though I tried pulling newer jqueries it still had those errors. I could be waay off with this, but that's something I've looked at.
These errors come up in red only after pressing the calculate button if that helps anyone
ajaxify.js?v=981484081857460039:84 Uncaught TypeError: Cannot read property '1' of null
at Object.Shopify.formatMoney (ajaxify.js?v=981484081857460039:84)
at _formatRate (theme.js?v=1473935334297741069:12)
at _onCartShippingRatesUpdate (theme.js?v=1473935334297741069:12)
at Object.success (theme.js?v=1473935334297741069:12)
at c (jquery-1.10.1.min.js?v=9092792146091662929:4)
at Object.fireWith [as resolveWith] (jquery-1.10.1.min.js?v=9092792146091662929:4)
at k (jquery-1.10.1.min.js?v=9092792146091662929:6)
at XMLHttpRequest.r (jquery-1.10.1.min.js?v=9092792146091662929:6)
Shopify.formatMoney @ ajaxify.js?v=981484081857460039:84
_formatRate @ theme.js?v=1473935334297741069:12
_onCartShippingRatesUpdate @ theme.js?v=1473935334297741069:12
success @ theme.js?v=1473935334297741069:12
c @ jquery-1.10.1.min.js?v=9092792146091662929:4
fireWith @ jquery-1.10.1.min.js?v=9092792146091662929:4
k @ jquery-1.10.1.min.js?v=9092792146091662929:6
r @ jquery-1.10.1.min.js?v=9092792146091662929:6
XMLHttpRequest.send (async)
(anonymous) @ VM4082:1
n.send @ shop_events_listener-eb19870e6f215e4e4acd8067d24ecfcbfee2d96d96aa8607e8fd45edf40eacc6.js:1
send @ jquery-1.10.1.min.js?v=9092792146091662929:6
ajax @ jquery-1.10.1.min.js?v=9092792146091662929:6
t @ theme.js?v=1473935334297741069:12
c @ jquery-1.10.1.min.js?v=9092792146091662929:4
fireWith @ jquery-1.10.1.min.js?v=9092792146091662929:4
k @ jquery-1.10.1.min.js?v=9092792146091662929:6
r @ jquery-1.10.1.min.js?v=9092792146091662929:6
XMLHttpRequest.send (async)
(anonymous) @ VM4082:1
n.send @ shop_events_listener-eb19870e6f215e4e4acd8067d24ecfcbfee2d96d96aa8607e8fd45edf40eacc6.js:1
send @ jquery-1.10.1.min.js?v=9092792146091662929:6
ajax @ jquery-1.10.1.min.js?v=9092792146091662929:6
_getCartShippingRatesForDestination @ theme.js?v=1473935334297741069:12
(anonymous) @ theme.js?v=1473935334297741069:12
dispatch @ jquery-1.10.1.min.js?v=9092792146091662929:5
v.handle @ jquery-1.10.1.min.js?v=9092792146091662929:5
User | RANK |
---|---|
226 | |
155 | |
62 | |
52 | |
46 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023