Cart - Add a shipping rates calculator to your cart

TyW
Community Manager
556 38 999

You can add a shipping rates calculator to your cart page that lets customers estimate their shipping costs before they proceed to the checkout page.

 

calc01.jpg

 

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, then click the Sectioned themes link and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes link and follow the instructions.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 126 (126)
chenster
Pathfinder
122 4 17

What did you mean by 'all forms of shipping'??  Is it relevant to this discussion? 

Cartoo
chenster
Pathfinder
122 4 17

Just following up, app In-Cart Shipping Rates it is now available in app store. It displays shipping rates right in the shopping cart. It works on Online Store 2.0 and older themes.

The app gets its shipping rates from zip code resolved from IP address. In addition, the shipping rate estimate can be updated on-the-fly by editing the destination via the autosuggestion input. 

It supports cart page, cart drawer and popup cart. 

 

chenster_0-1634782551608.png

Yeap, it's free. Enjoy!

(Disclaimer, I made this app.I've tried hard to support all themes, but it's just impossible to cover them all. Please let me know any issues so I can fix them promptly.)

Cartoo
DabsDesign
Excursionist
13 1 0

Hello @chenster.

In Brazil we work with many delivery methods. What I meant is that it displays all possible shipping forms for the address entered, for example:

  • delivery by car - "estimated price"
  • delivery by boat - "estimatede price"
  • delivery by airplane - "estimatede price"

And so on, this way it lists all the shipping options and not just the value that starts the shipping, because if I offer a free shipping, it will show that the shipping starts at a value of 0.

DabsDesign
Excursionist
13 1 0

@kabobmaster or @chenster how i change the currency. Actually is showing $ but I need to change to R$, the default currency for Brazil.

I using this code:

<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}}
        <br/>
        <span style="font-size: 16px; color: #9a0fee;">
        Os fretes disponíveis são:
  		</span>
        <br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
        
      {{/rates}}
    {{else}}
      Não foi possível realizar o calculo do frete. Tente novamente.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>

I change the currency in this place or another? Any help (from anyone) is welcome!

chenster
Pathfinder
122 4 17
chenster
Pathfinder
122 4 17

@DabsDesign wrote:

Hello @chenster.

In Brazil we work with many delivery methods. What I meant is that it displays all possible shipping forms for the address entered, for example:

  • delivery by car - "estimated price"
  • delivery by boat - "estimatede price"
  • delivery by airplane - "estimatede price"

And so on, this way it lists all the shipping options and not just the value that starts the shipping, because if I offer a free shipping, it will show that the shipping starts at a value of 0.


This app (not mine) offers estimate by delivery type. I'm not sure it can do exactly 100% what you need. Give it a try.

https://apps.shopify.com/shipping-based-on-zipcode

Cartoo
DabsDesign
Excursionist
13 1 0

@chenster can you be more specific, please. Like teach what I need to do? 

DabsDesign
Excursionist
13 1 0

@chenster I thank you anyway for your effort to respond but I have already found the solution. Just modify the JS code that according to the initial tutorial says to insert at the end of the vendor.js file.

 

"object"==typeof Countries&&(Countries.updateProvinceLabel=function(e,t){if("string"==typeof e&&Countries[e]&&Countries[e].provinces){if("object"!=typeof t&&(t=document.getElementById("address_province_label"),null===t))return;t.innerHTML=Countries[e].label;var r=jQuery(t).parent();r.find("select");r.find(".custom-style-select-box-inner").html(Countries[e].provinces[0])}}),"undefined"==typeof Shopify.Cart&&(Shopify.Cart={}),Shopify.Cart.ShippingCalculator=function(){var _config={submitButton:"Calcular",submitButtonDisabled:"Calculando...",templateId:"shipping-calculator-response-template",wrapperId:"wrapper-response",customerIsLoggedIn:!1,moneyFormat:"R${{amount}}"},_render=function(e){var t=jQuery("#"+_config.templateId),r=jQuery("#"+_config.wrapperId);if(t.length&&r.length){var templateSettings={evaluate:/<%([\s\S]+?)%>/g,interpolate:/<%=([\s\S]+?)%>/g,escape:/<%-([\s\S]+?)%>/g};var n=Handlebars.compile(jQuery.trim(t.text())),a=n(e);if(jQuery(a).appendTo(r),"undefined"!=typeof Currency&&"function"==typeof Currency.convertAll){var i="";jQuery("[name=currencies]").size()?i=jQuery("[name=currencies]").val():jQuery("#currencies span.selected").size()&&(i=jQuery("#currencies span.selected").attr("data-currency")),""!==i&&Currency.convertAll(shopCurrency,i,"#wrapper-response span.money, #estimated-shipping span.money")}}},_enableButtons=function(){jQuery(".get-rates").removeAttr("disabled").removeClass("disabled").val(_config.submitButton)},_disableButtons=function(){jQuery(".get-rates").val(_config.submitButtonDisabled).attr("disabled","disabled").addClass("disabled")},_getCartShippingRatesForDestination=function(e){var t={type:"POST",url:"/cart/prepare_shipping_rates",data:jQuery.param({shipping_address:e}),success:_pollForCartShippingRatesForDestination(e),error:_onError};jQuery.ajax(t)},_pollForCartShippingRatesForDestination=function(e){var t=function(){jQuery.ajax("/cart/async_shipping_rates",{dataType:"json",success:function(r,n,a){200===a.status?_onCartShippingRatesUpdate(r.shipping_rates,e):setTimeout(t,500)},error:_onError})};return t},_fullMessagesFromErrors=function(e){var t=[];return jQuery.each(e,function(e,r){jQuery.each(r,function(r,n){t.push(e+" "+n)})}),t},_onError=function(XMLHttpRequest,textStatus){jQuery("#estimated-shipping").hide(),jQuery("#estimated-shipping em").empty(),_enableButtons();var feedback="",data=eval("("+XMLHttpRequest.responseText+")");feedback=data.message?data.message+"("+data.status+"): "+data.description:"Error : "+_fullMessagesFromErrors(data).join("; ")+".","Error : country is not supported."===feedback&&(feedback="We do not ship to this destination."),_render({rates:[],errorFeedback:feedback,success:!1}),jQuery("#"+_config.wrapperId).show()},_onCartShippingRatesUpdate=function(e,t){_enableButtons();var r="";if(t.zip&&(r+=t.zip+", "),t.province&&(r+=t.province+", "),r+=t.country,e.length){"0.00"==e[0].price?jQuery("#estimated-shipping em").html("FREE"):jQuery("#estimated-shipping em").html(_formatRate(e[0].price));for(var n=0;n<e.length;n++)e[n].price=_formatRate(e[n].price)}_render({rates:e,address:r,success:!0}),jQuery("#"+_config.wrapperId+", #estimated-shipping").fadeIn()},_formatRate=function(e){function t(e,t){return"undefined"==typeof e?t:e}function r(e,r,n,a){if(r=t(r,2),n=t(n,","),a=t(a,"."),isNaN(e)||null==e)return 0;e=(e/100).toFixed(r);var i=e.split("."),o=i[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1"+n),s=i[1]?a+i[1]:"";return o+s}if("function"==typeof Shopify.formatMoney)return Shopify.formatMoney(e,_config.moneyFormat);"string"==typeof e&&(e=e.replace(".",""));var n="",a=/\{\{\s*(\w+)\s*\}\}/,i=_config.moneyFormat;switch(i.match(a)[1]){case"amount":n=r(e,2);break;case"amount_no_decimals":n=r(e,0);break;case"amount_with_comma_separator":n=r(e,2,".",",");break;case"amount_no_decimals_with_comma_separator":n=r(e,0,".",",")}return i.replace(a,n)};return _init=function(){new Shopify.CountryProvinceSelector("address_country","address_province",{hideElement:"address_province_container"});var e=jQuery("#address_country"),t=jQuery("#address_province_label").get(0);"undefined"!=typeof Countries&&(Countries.updateProvinceLabel(e.val(),t),e.change(function(){Countries.updateProvinceLabel(e.val(),t)})),jQuery(".get-rates").click(function(){_disableButtons(),jQuery("#"+_config.wrapperId).empty().hide();var e={};e.zip=jQuery("#address_zip").val()||"",e.country=jQuery("#address_country").val()||"",e.province=jQuery("#address_province").val()||"",_getCartShippingRatesForDestination(e)}),_config.customerIsLoggedIn&&jQuery(".get-rates:eq(0)").trigger("click")},{show:function(e){e=e||{},jQuery.extend(_config,e),jQuery(function(){_init()})},getConfig:function(){return _config},formatRate:function(e){return _formatRate(e)}}}();

 

Inside this code, there is the currency written together with the {{amount}} tag. Replace the currency that comes standard in the tutorial code with that of your country (in my case Brazil - R$), leaving:

moneyFormat:"${{amount}}"

for:

moneyFormat:"R${{amount}}"


IMPORTANT: if you are reading this comment, the entire script is necessary. What I commented above is just a part of it focusing to modify the currency that appears in the freight calculation.

For reference only, the tutorial that refers to vendor.js is this: https://community.shopify.com/c/shopify-design/cart-add-a-shipping-rates-calculator-to-your-cart/m-p...

 

 

DabsDesign
Excursionist
13 1 0

@TyW hello, thank you very much for all this information, it is really helpful and helped me in an incredible way.

But I would like to know if you can teach how the shipping calculation should also work within the product page, but without the customer having to add the product to the cart? It would only be for him to estimate the shipping cost of the product to his address, but doing so from within the product page!

Can you help?

chenster
Pathfinder
122 4 17

Glad you figured out

Cartoo