Shipping Calculator on Cart

In LemonStand there is a built in feature that allows for the customer to calculate the shipping cost on the cart page.

Make sure your Shipping Config is filled out under Business Settings.

You will have to input this code on the cart page. Note that should be inside a form, and you can place it inside the cart page's existing form.

<div class="six columns">
  <h3>Shipping rates calculator</h3>
  <div class="row">
    <div class="four columns">
      <label for="country">Country</label>
      <select id="countryId" name="countryId" data-state-selector="#stateId" data-current-state="{{ shippingInfo.shop_state_id }}">
        {% for country in countries %}
          <option value="{{ country.id }}" {{ option_state(country.id, shippingInfo.shop_country_id) }}>{{ country.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="four columns">
      <label for="stateId">State</label>
      <select id="stateId" name="stateId" data-ajax-refresh> 
        {{ partial('shop-stateoptions', {'states': states, 'selected': shippingInfo.shop_state_id}) }}
      </select>
    </div>
    <div class="four columns">
      <label for="postalCode">Zip/Postal Code</label>
      <input name="postalCode" type="text" value="{{ shippingInfo.postalCode }}"/>
    </div>
  </div>
  <a class="button" href="#" data-ajax-handler="shop:onEvalShippingRate" data-ajax-update="#shippingOptions=shop-estimatedshippingmethods">Calculate</a>
  <div id="shippingOptions"></div>
</div>

In addition to the cart page content, you will have to create a new partial called shop-estimatedshippingmethods with this code:

<h4>Available shipping methods</h4>
{% if shippingOptions %}
  <table class="compact full-width striped">
    {% for index, option in shippingOptions %}
      <tr>
        {% if not option.error_hint %}
          <td>
            {% if option.shippingServiceName %}<strong>{{ option.shippingServiceName }}</strong> - {% endif %}
            {{ option.shippingMethodName }}
          </td>
          <td class="narrow">
                {% if not option.error_hint  %}
                  {{ option.quote ? option.quote|currency : 'free' }}
                {% endif %}
            </td>
        {% else %}
          <td colspan="2">
            <strong>{{ option.shippingMethodName }}</strong>
            <p class="error-hint">{{ option.error_hint }}</p>
          </td>
        {% endif %}
      </tr>
    {% endfor %}
  </table>
{% else %}
  <p>We are sorry, there are no shipping options available for your location.</p>
{% endif %}