Adding Shipping Calculator which shows multiple rates on cart page

[jehdlee]

Hello,

My website link is turboturbos.com. 

I've managed to add the shipping calculator mentioned in the shopify theme tutorials here: https://help.shopify.com/en/themes/customization/cart/add-shipping-calculator

Because I have the minimal sectioned theme, I believe it uses the handlebars.js template instead of the original underscore template for the nonsectional.

Therefore, pressing the calculate button returns only the starting shipping price 

 Rates start at {{price}}

 However, I would like to implement the functionality in the original script, which shows amount of rates available for address and each rate with name following the heading: 

<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) { %> 
    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 %>
  <% } %>
  </p>
  <ul id="shipping-rates">
    <% for (var i=0; i<rates.length; i++) { %>
    <li><%- rates[i].name %> at <%= rates[i].price %></li>
    <% } %>
  </ul> 
</script>

I've tried converting this into handlebars (I have very little as to how it works and how to create a block helper) and have been able to display the rate array's length + first price but not the address nor the object identifiers (nonsectioned version shows "Next Day at $Price", "Within the Hour at", etc.).

Here is my code and the result on my site: 

<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}}
      {{#each rates}}
        {{#if @first}}
           <h3>There are {{rates.length}} shipping rates available for {{address}}, starting at {{price}}.</h3>
        {{/if}}
       	<li>{{this}} at {{price}}</li>
      {{/each}}
    {{else}}
      We do not ship to this destination.
    {{/if}}    
  {{else}}
    {{ errorFeedback }}
  {{/if}}
  </p>
  {% endraw %}
</script>

Would really appreciate the help!

[PurpleMamba]

Did you ever figure this out?

---

[Admin2021]

I've been battling with this issue for days ... then found your post which explains about the change from _underscore - thank you.

The old code was fine.  You could display shipping options e.g.

Standard Postage         $x
Signed & Signed For    $y

Now it seems Shopify just displays:    "Rates start at $x"     How does that help a potential customer!

This really needs fixing.   Can anyone assist?

[Ela_V_TSM]

Hey there! Wanted to ask if you already solved this one? Would be a big help. Thanks~