Cart - Add a shipping rates calculator to your cart

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

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.

• Sectioned themes
• Non-sectioned themes

[Bikes-Angel]

I don't know how to just reply to the whole post  as opposed to someone else's reply post but just wanted to say,
I tried this on simple theme a while back and could not get it to work.   I now tried it with supply theme and it works perfectly. ( I even changed the position of where it rendered and the css) There were so many good questions and answers here  Thank you everyone!

[DanAtK3D]

Did you ever get a fix for this?

Mine is doing the same thing

[PurpleMamba]

Troubleshooting

Depending on your theme and currency settings, you might see your shipping calculator price estimates displayed on the cart page with un-rendered HTML tags:

To remove these unwanted tags, you will need to make a change to your currency settings in the admin.

1. From your Shopify admin, go to Settings > General.
2. In the Store currency section, your shop currency is listed. Click Change formatting.
3. Remove the HTML tags from your currency formats. By default, the settings look like this:
   
   
   From both the HTML with currency and the HTML without currency text fields, remove the opening and closing HTML span tags. The result should look like this:
   
   
4. Click Save.

Your shipping calculator price estimates should now display without un-rendered HTML tags:

---

Do NOT change your store's currency settings as described here as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates, go into the shipping-calulator.liquid snippet you made earlier and find {{price}} (with double curly braces), and change that to {{{price}}} (with triple curly braces).

[PurpleMamba]

---

@TyW wrote:
Troubleshooting

Depending on your theme and currency settings, you might see your shipping calculator price estimates displayed on the cart page with un-rendered HTML tags:

To remove these unwanted tags, you will need to make a change to your currency settings in the admin.

1. From your Shopify admin, go to Settings > General.
2. In the Store currency section, your shop currency is listed. Click Change formatting.
3. Remove the HTML tags from your currency formats. By default, the settings look like this:
   
   
   From both the HTML with currency and the HTML without currency text fields, remove the opening and closing HTML span tags. The result should look like this:
   
   
4. Click Save.

Your shipping calculator price estimates should now display without un-rendered HTML tags:

---

Do NOT change your currency settings as described here in the "Sectioned Themes" post, as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates, go into the shipping-calculator.liquid snippet you made earlier and find {{price}} (with double curly braces). Change that to {{{price}}} (with triple curly braces). ( In Handlebars, which this script uses for this part, {{price}} is HTML-escaped, but {{{price}}} is not.)

[PurpleMamba]

Do NOT change your currency settings as described in the "Sectioned Themes" post, as this will break any currency selector you might have installed in your store.

Make sure to keep your store's currency settings WITH the span class tags, like this example:

HTML with currency: <span class=money>${{amount}} USD</span>

HTML without currency: <span class=money>${{amount}}</span>

To fix the issue where the span class appears in the shipping calculator rates estimates:

Go into the shipping-calculator.liquid snippet you made earlier and find {{price}} (with double curly braces). 

Change that to {{{price}}} (with triple curly braces). 

(In Handlebars, which this snippet uses, {{price}} will be HTML-escaped, but {{{price}}} will not.)

[ogeid]

This is great. Followed your steps and it works. Thanks for positing.

Is there are way to show all shipping option.?

Also, any suggestion on how we can add a tax estimate as well?

Thanks, Diego

[kabobmaster]

You can do this to display shipping method and the rate. I don't know how to do the taxes.

Modify the response in the shipping-calculator.liquid

{{#if success}}
    {{#if rates}}
      {{#rates}}
      
        {{#if @first}}
        <br/>
        Available rates are:
        <br/><br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
        
      {{/rates}}
    {{else}}
      We do not ship to this destination.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}

[ogeid]

Thanks.

[DabsDesign]

Thanks for sharing this piece of code, it's a great improvement to the implementation. So there is the possibility to show all forms of shipping and not just the price. For Brazil, it works perfectly!

[chenster]

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

[DabsDesign]

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.

[chenster]

---

@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

[DabsDesign]

@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]

You can check out https://www.techonthenet.com/js/number_tolocalestring.php for symbol display

[DabsDesign]

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

[DabsDesign]

@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...

[ogeid]

Thank you @TyW  and everybody else for posting.

I have been using a variation of this on a couple Shopify sites in the USA for a 2 years. It still works great. There are some expedited services from FedEx and UPS that won't show, since it requires a full address to get a price. However it works in 95% of the cases.

Is there someone that uses this code and might have added an automation to populate the state field based on the zip code? It seems silly to have to add both. It should be easy to add a zip code reference chart. Do zip codes change a lot? Is it worth looking for an online reference to get the corresponding state for a zip code and always be up-to-date? 

[chenster]

Don't think zip can change, at least the first 5 digital in US, the last digits in zip+4 format can change over time.

http://www.mymarathoncountyaddress.org/faq/what-zip4-code-and-why-may-it-change

Have you tried https://apps.shopify.com/in-cart-shipping-rates? It's free at the moment. Disclaimer: I'm the developer. Let me know should you have any questions please.

[ogeid]

I changed "shipping-calculator.liquid", so it can automatically set the state based on the zip code. For now I just works for the USA. It doesn't do anything for provinces/states in other countries.

{% unless settings.shipping_calculator == 'Disabled' %}
<hr>
<div id="shipping-calculator">
  <h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
  <h4>Total cart weight: {{ cart.total_weight | times: 0.00220462 | round: 1 }} lbs</h4>
  <div>
    <p class="field">
      <label for="address_zip">Zip/Postal Code</label>
      <input type="text" id="address_zip" name="address[zip]" oninput="getState(this.value)" />
    </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=""></select>
    </p> 
    <p class="field">
      <label for="address_country">Country</label>
      <select id="address_country" name="address[country]" data-default="United States">{{ country_option_tags }}</select>
    </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>
function getState(zipString) {

  /* Ensure param is a string to prevent unpredictable parsing results */
  if (typeof zipString !== 'string') {
      console.log('Must pass the zipcode as a string.');
      return;
  }

  /* Ensure we have exactly 5 characters to parse */
  if (zipString.length !== 5) {
      console.log('Must pass a 5-digit zipcode.');
      return;
  }

  /* Ensure we don't parse strings starting with 0 as octal values */
  const zipcode = parseInt(zipString, 10);

  let st;
  let state;

  /* Code cases alphabetized by state */
  if (zipcode >= 35000 && zipcode <= 36999) {
      st = 'AL';
      state = 'Alabama';
  } else if (zipcode >= 99500 && zipcode <= 99999) {
      st = 'AK';
      state = 'Alaska';
  } else if (zipcode >= 85000 && zipcode <= 86999) {
      st = 'AZ';
      state = 'Arizona';
  } else if (zipcode >= 71600 && zipcode <= 72999) {
      st = 'AR';
      state = 'Arkansas';
  } else if (zipcode >= 90000 && zipcode <= 96699) {
      st = 'CA';
      state = 'California';
  } else if (zipcode >= 80000 && zipcode <= 81999) {
      st = 'CO';
      state = 'Colorado';
  } else if ((zipcode >= 6000 && zipcode <= 6389) || (zipcode >= 6391 && zipcode <= 6999)) {
      st = 'CT';
      state = 'Connecticut';
  } else if (zipcode >= 19700 && zipcode <= 19999) {
      st = 'DE';
      state = 'Delaware';
  } else if (zipcode >= 32000 && zipcode <= 34999) {
      st = 'FL';
      state = 'Florida';
  } else if ( (zipcode >= 30000 && zipcode <= 31999) || (zipcode >= 39800 && zipcode <= 39999) ) {
      st = 'GA';
      state = 'Georgia';
  } else if (zipcode >= 96700 && zipcode <= 96999) {
      st = 'HI';
      state = 'Hawaii';
  } else if (zipcode >= 83200 && zipcode <= 83999) {
      st = 'ID';
      state = 'Idaho';
  } else if (zipcode >= 60000 && zipcode <= 62999) {
      st = 'IL';
      state = 'Illinois';
  } else if (zipcode >= 46000 && zipcode <= 47999) {
      st = 'IN';
      state = 'Indiana';
  } else if (zipcode >= 50000 && zipcode <= 52999) {
      st = 'IA';
      state = 'Iowa';
  } else if (zipcode >= 66000 && zipcode <= 67999) {
      st = 'KS';
      state = 'Kansas';
  } else if (zipcode >= 40000 && zipcode <= 42999) {
      st = 'KY';
      state = 'Kentucky';
  } else if (zipcode >= 70000 && zipcode <= 71599) {
      st = 'LA';
      state = 'Louisiana';
  } else if (zipcode >= 3900 && zipcode <= 4999) {
      st = 'ME';
      state = 'Maine';
  } else if (zipcode >= 20600 && zipcode <= 21999) {
      st = 'MD';
      state = 'Maryland';
  } else if ( (zipcode >= 1000 && zipcode <= 2799) || (zipcode == 5501) || (zipcode == 5544 ) ) {
      st = 'MA';
      state = 'Massachusetts';
  } else if (zipcode >= 48000 && zipcode <= 49999) {
      st = 'MI';
      state = 'Michigan';
  } else if (zipcode >= 55000 && zipcode <= 56899) {
      st = 'MN';
      state = 'Minnesota';
  } else if (zipcode >= 38600 && zipcode <= 39999) {
      st = 'MS';
      state = 'Mississippi';
  } else if (zipcode >= 63000 && zipcode <= 65999) {
      st = 'MO';
      state = 'Missouri';
  } else if (zipcode >= 59000 && zipcode <= 59999) {
      st = 'MT';
      state = 'Montana';
  } else if (zipcode >= 27000 && zipcode <= 28999) {
      st = 'NC';
      state = 'North Carolina';
  } else if (zipcode >= 58000 && zipcode <= 58999) {
      st = 'ND';
      state = 'North Dakota';
  } else if (zipcode >= 68000 && zipcode <= 69999) {
      st = 'NE';
      state = 'Nebraska';
  } else if (zipcode >= 88900 && zipcode <= 89999) {
      st = 'NV';
      state = 'Nevada';
  } else if (zipcode >= 3000 && zipcode <= 3899) {
      st = 'NH';
      state = 'New Hampshire';
  } else if (zipcode >= 7000 && zipcode <= 8999) {
      st = 'NJ';
      state = 'New Jersey';
  } else if (zipcode >= 87000 && zipcode <= 88499) {
      st = 'NM';
      state = 'New Mexico';
  } else if ( (zipcode >= 10000 && zipcode <= 14999) || (zipcode == 6390) || (zipcode == 501) || (zipcode == 544) ) {
      st = 'NY';
      state = 'New York';
  } else if (zipcode >= 43000 && zipcode <= 45999) {
      st = 'OH';
      state = 'Ohio';
  } else if ((zipcode >= 73000 && zipcode <= 73199) || (zipcode >= 73400 && zipcode <= 74999) ) {
      st = 'OK';
      state = 'Oklahoma';
  } else if (zipcode >= 97000 && zipcode <= 97999) {
      st = 'OR';
      state = 'Oregon';
  } else if (zipcode >= 15000 && zipcode <= 19699) {
      st = 'PA';
      state = 'Pennsylvania';
  } else if (zipcode >= 300 && zipcode <= 999) {
      st = 'PR';
      state = 'Puerto Rico';
  } else if (zipcode >= 2800 && zipcode <= 2999) {
      st = 'RI';
      state = 'Rhode Island';
  } else if (zipcode >= 29000 && zipcode <= 29999) {
      st = 'SC';
      state = 'South Carolina';
  } else if (zipcode >= 57000 && zipcode <= 57999) {
      st = 'SD';
      state = 'South Dakota';
  } else if (zipcode >= 37000 && zipcode <= 38599) {
      st = 'TN';
      state = 'Tennessee';
  } else if ( (zipcode >= 75000 && zipcode <= 79999) || (zipcode >= 73301 && zipcode <= 73399) ||  (zipcode >= 88500 && zipcode <= 88599) ) {
      st = 'TX';
      state = 'Texas';
  } else if (zipcode >= 84000 && zipcode <= 84999) {
      st = 'UT';
      state = 'Utah';
  } else if (zipcode >= 5000 && zipcode <= 5999) {
      st = 'VT';
      state = 'Vermont';
  } else if ( (zipcode >= 20100 && zipcode <= 20199) || (zipcode >= 22000 && zipcode <= 24699) || (zipcode == 20598) ) {
      st = 'VA';
      state = 'Virginia';
  } else if ( (zipcode >= 20000 && zipcode <= 20099) || (zipcode >= 20200 && zipcode <= 20599) || (zipcode >= 56900 && zipcode <= 56999) ) {
      st = 'DC';
      state = 'Washington DC';
  } else if (zipcode >= 98000 && zipcode <= 99499) {
      st = 'WA';
      state = 'Washington';
  } else if (zipcode >= 24700 && zipcode <= 26999) {
      st = 'WV';
      state = 'West Virginia';
  } else if (zipcode >= 53000 && zipcode <= 54999) {
      st = 'WI';
      state = 'Wisconsin';
  } else if (zipcode >= 82000 && zipcode <= 83199) {
      st = 'WY';
      state = 'Wyoming';
  } else {
      st = 'none';
      state = 'none';
      console.log('No state found matching', zipcode);
  }
  
  var temp = state; 
  $("#address_province").val(temp);
   
}
</script>


<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/>
           More shipping methods might become available after entering shipping address in checkout:
            <br/><br/>
        {{/if}}
        
        {{name}}: {{price}}
        <br/>
      {{/rates}}
    {{else}}
      No shipping estimate was found. Please proceed to checkout to find more shipping options.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>


<!--[if lte IE 8]>
<style> #shipping-calculator { display: none; } </style>
<![endif]-->​

PS: I just copy&pasted zip code script from stack overflow

[ogeid]

As I stated in a previous post, the calculator works great, but for some reason it disables the password protection button on my development site. When I click on the "Enter Using Password" button, my login prompt doesn't load.

Not a deal breaker, but thought this is odd. Some of the code must be overlapping (my guess the part that goes into theme.js from step 6.).

[nstipic]

Is there a way to making calculator this working well in cart drawer/popup?

---

[3rdmiracle]

Hi, I have a sectioned theme. Though I don't have neither vendor.js nor theme.js under the folder 'Asset' 

So I tried to follow the steps for Non-sectioned theme and everything seeemed to be okay but then there was an error when it's selceted. Id' like to follow the right step but not sure which one is for me. If I don't have those files, theme.js or vendor.js, where should I start with?  Thanks for your help in advance!

Best,

Erin

[mrkasmith]

Hello,  I've implemented the shipping rates calculator and it works perfectly on our stock Debut theme.  Only thing is when at the Shopping Cart page, if you adjust the cart quantity up or down the cart will no longer automatically update the total.  Anyone else seen this?  

[ogeid]

@mrkasmith: What theme are you using? I use a modified version of Debut and my cart total never automatically updated, but I have an "Update" button next to the "Check Out" button.

Now, if I do a shipping cost estimation and then change the quantities in my cart, the shipping cost doesn't change automatically either, I have to press the "Calculate Shipping" button again.

[mrkasmith]

Thanks for the reply,  I'm using the most recent available 'Debut' version.  My duplicated version with the Estimator would not auto update the cart price when I increased the quantity.  It does update the quantity automatically with increased with the Original version of Debut.  It's not a problem, I just switched off the auto update feature in settings for the Cart and manually select the Update button.  Does that make sense?

[alibabyph]

How to make it look like this? I don't like how mine turns out. I want to have that total weight too and that width. Thank you!

[TAGSAngel]

The calculator works off the css for your theme. (as far as colors / fonts)  I do not believe this will give weights etc.  This is merely to give your customer a preview of what their estimated shipping costs are prior to filling everything out in check out.  If it works with your theme, then it's perfect for what it's meant to do.  (customers don't want to give all info just to see if they are agreeable to shipping prices) Actual shipping prices are then calculated at the time of check out when they put in their shipping address.  So it does what it's meant to do.  

[ogeid]

@TAGSAngel :  Yes, this is meant to allow customers to see the shipping cost before typing in all their information.

As for the weight, I just added this :

Total cart weight: {{ cart.total_weight | times: 0.00220462 | round: 1 }} lbs

I'm using the Debut theme and this how I display it:

[TAGSAngel]

Cool!  I'm sure that will make others very happy.   Wish you (or someone) could get it to work with Simple theme! 🙂

[Zhuangwei]

I'm also using Debut theme, I followed the tutorial and the shipping calculator works, but when I modified the quantity in cart, the products disappeared, I have to refresh the page, and it shows up, do you know what wrong it is ?

[mrkasmith]

I'm using the Supply theme and this too is happening on our site.  Customers have to manually update the cart after changing a quantity in the cart to see the updated price.

[Zhuangwei]

I have the same question, when I adjust the quantity of the products in cart, the products disappeared, and a exclamation mark shows below the check out button. Anyone can fix this without infecting the cart products display when we adjust the quantity.

[DifferentDogs]

I think I've followed all the instructions and it shows nicely on the cart in my debut theme. But when I actually test the Estimate Shipping Button, the results are not good:

class="success" <% } else { %> class="error" <% } %>> <% if (success) { %> <% if (rates.length > 1) { %> There are <%- rates.length %> shipping rates available for <%- address %>, starting at <%= rates[0].price %>. <% } else if (rates.length == 1) { %> There is one shipping rate available for <%- address %>. <% } else { %> We do not ship to this destination. <% } %> <% } else { %> <%- errorFeedback %> <% } %>

<% for (var i=0; i<rates.length; i++)="" {="" %="">
• <%- rates[i].name %> at <%= rates[i].price %>
<% } %></rates.length;>

Where did I go wrong?

[Bikes-Angel]

1. Make sure that you FULLY copy pasted everything correctly.  If you miss a ;  you’re going to end up with a result like that. ( happened to me).  Re trace your steps.  Something is missing or in the wrong spot.  Get a cup of coffee, go nice and slow.   Also there are 2 different versions of the shipping-calculator.  One that ends in some type of if IE8 stuff (sorry, not on the computer right now I can’t check). I found that that is the correct one.

But..... with all that being said,  I’m not on Debut...  but I think for the most part it’s somewhat the same as far as the results you’re getting

[NomarAdea]

I'm not sure what the problem is, but I followed the steps and made it appear on the preview of the store but when it's not on preview, the calculator only shows Country and Postal Code.

Preview

Live

Does anyone here experienced this issue?