Shopify Shipping Rates Calculator for Dawn Theme and more - NO APP/ Library

Shopify Shipping Rates Calculator for Dawn Theme and more - NO APP/ Library

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Any version of Dawn, and any Shopify 2.0 FREE themes

A lot of Shopify developers were disappointed that old codes does not work with new Shopify 2.0 themes. The Shopify 2.0 FREE themes are faster compared to the old themes. This is because of less usage of external libraries, like jquery.

I know a lot of developers might have told you that shipping calculators cannot be done in Shopify 2.0 FREE themes. I take negativity as a challenge and wrote the code below WITHOUT any use of library. 

Shipping information will be base on your Shopify Shipping and delivery settings. You can check the said setting by clicking the Settings on your left hand bottom corner at your Admin page, then go to Shipping and delivery.

Please check the demo store here before purchasing. Password: Made4Uo

See the Get shipping estimates section below. UPSELL section not included.

Shipping calculator image

 What you are buying:

  • Add shipping calculator to your cart page
  • Assign a default country
  • Design might have to depend to the Shopify theme being use

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Snipper folder, create a snippet. Name it  shipping-calculator. The file must show shipping-calculator.liquid under the snippet folder.
3. Paste the code below in the file. Make sure to click SAVE.

{% if settings.shipping_calculator %}
<shipping-calculator data-currency="{{ 0 | money | remove: "0.00" }}" data-cart-total="{{ cart_total }}" data-cart-money-total="{{ cart_total | money_with_currency }}">
<h3>{{ settings.shipping_calculator_heading | default: 'Get shipping estimates' }}</h3>
<form>
<label class="form__label" for="address_country">Country</label>
<p class="select">
<select class="select__select" id="address_country" name="shipping_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>
{% render 'icon-caret' %}
</p>

<div class="province-container">
<label class="form__label" for="address_province" id="address_province_label">Province / State</label>
<p class="select" id="address_province_container">
<select class="select__select" id="address_province" name="shipping_address[province]"
data-default="{% if shop.customer_accounts_enabled and customer and customer.default_address.province != '' %}{{ customer.default_address.province }}{% endif %}">
{{ province_option_tags | escape }}
</select>
{% render 'icon-caret' %}
</p>
</div>

<label class="form__label" for="address_zip">Zip / Postal Code</label>
<p class="select">
<input type="text" class="field__input" id="address_zip" name="shipping_address[zip]"{% if shop.customer_accounts_enabled and customer %} value="{{ customer.default_address.zip }}"{% endif %} />
</p>

<button type="submit" class="get-rates button">
<span>{{ settings.shipping_calculator_submit_button_label | default: 'Calculate shipping' }}</span>
<div class="loading-overlay__spinner calculator-loader hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</form>
<div class="wrapper-response"></div>
<span class="error-message-box hidden"></span>
</shipping-calculator>
<script>
class e extends HTMLElement {
constructor() {
super();
this.cS = this.querySelector("#address_country");
this.pS = this.querySelector("#address_province");
this.pC = this.querySelector(".province-container");
this.i();

this.cT = this.dataset.cartTotal;

this.l = this.querySelector(".calculator-loader");
this.cS.addEventListener("change", this.cU.bind(this));
this.gRb = this.querySelector(".get-rates");
this.gRb.addEventListener("click", this.gSr.bind(this));

this.wR = this.querySelector(".wrapper-response");
this.wR.addEventListener("change", this.rTp.bind(this));
this.eMb = this.querySelector(".error-message-box")
}
i() {
this.cS.value = this.cS.dataset["default"];
this.cU()
}

c(e) {
return {
method: e,
headers: {
Accept: `application/json`,
"X-Requested-With": "XMLHttpRequest"
}
}
}

cU() {
if (this.pLu().length > 0) {
let t = ``;
for (let e = 0; e < this.pLu().length; e++) {
t += `<option value="${this.pLu()[e][1]}">${this.pLu()[e][0]}</option>`
}
this.pS.innerHTML = t;
this.pC.style.display = "block"
} else {
this.pC.style.display = "none"
}
}
pLu() {
return JSON.parse(this.cS.options[this.cS.selectedIndex].dataset.provinces)
}
gSr(e) {
e.preventDefault();
const t = new FormData(e.target.closest("form"));
const s = new URLSearchParams(t).toString();
this.l.classList.toggle("hidden");
this.gRb.querySelector("span").classList.toggle("hidden");
const r = `cart/shipping_rates.json?${s}`;
fetch(r, this.c("GET")).then(e => e.json()).then(e => {
if (e.zip || e.country) {
this.cF(e);
this.wR.innerHTML = ""
this.rOp();
} else {
this.eMb.classList.add("hidden");
let r = ``;
const i = e.shipping_rates;
for (let s = 0; s < i.length; s++) {
const a = i[s].source;
let e;
switch (a) {
case "dhl_express":
e = "DHL Express";
break;
case "usps":
e = "USPS";
break;
case "ups":
e = "UPS";
break;
case "dpd":
e = "DPD";
break;
case "canada_post":
e = "Canada Post";
break;
case "evri":
e = "Evri";
break;
case "sendle":
e = "Sendle";
break;
case "chronopost":
e = "Chronopost";
break;
case "colissimo":
e = "Colissimo";
break;
case "correos":
e = "Correos";
break;
case "mondial_relay":
e = "Mondial Relay";
break;
case "poste_italiane":
e = "Poste Italiane";
break;
case "shopify":
e = "Shopify";
break;
default:
e = "Unknown carrier"
}
let t;
if (i[s].price == 0) {
t = "FREE shipping"
} else {
t = `${this.dataset.currency}${i[s].price} ${i[s].currency}`
}
r += `<label class="form__label"for="shipping-${s}">
<input type="radio" name="shipping-info" id="shipping-${s}" class="shippingInfo" value="${i[s].price}">
<div>
<span>${e} ${i[s].name} for <strong>${t}</strong>.</span>
<span>Expected delivery in ${i[s].delivery_days[0]} to ${i[s].delivery_days[1]} days.</span>
</div>
</label>`
}
this.wR.innerHTML = r;
}
})["catch"](e => {
if (e) {
this.eMb.classList.remove("hidden")
}
})["finally"](() => {
this.l.classList.toggle("hidden");
this.gRb.querySelector("span").classList.toggle("hidden")
})
}

rTp(e) {
const t = document.querySelector(".totals__subtotal-value");
const _mC = this.dataset.cartMoneyTotal.split(" ");
const mC = _mC[_mC.length - 1]
const r = Array.from(e.currentTarget.querySelectorAll("input")).find(e => e.checked).value;
const i = (parseInt(this.cT) + parseInt(r.replace(".", ""))) / 100;
let a = "";
if (r == 0) a = "FREE";

function pFm (price, currency){
var fm = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return fm.format(price);
}

t.innerHTML = `<strong>${pFm(i, mC)}</strong><small> with ${a} shipping</small>`;
document.querySelector(".tax-note").textContent = "Taxes calculated at checkout"
}

rOp(){
const t = document.querySelector(".totals__subtotal-value");
t.innerHTML = `${this.dataset.cartMoneyTotal}`
document.querySelector(".tax-note").textContent = "Taxes and shipping calculated at checkout"
}

cF(e) {
let t;
if (e.zip) t = `Please ${s(e.zip[0])}.`;
if (e.country) t = `${e.country[0]}`;

function s(e) {
return e.charAt(0).toLowerCase() + e.slice(1)
}
this.eMb.classList.remove("hidden");
this.eMb.textContent = t
}
}
customElements.define("shipping-calculator", e);
</script>
<style>
.cart__footer shipping-calculator {
width: 40rem;
}

shipping-calculator form {
max-width: 30rem;
width: 100%;
}

shipping-calculator .select {
margin: 0 0.6em 0.5em 0;
width: 100%;
}

.form__label {
display: inline-block;
margin-bottom: 0.6rem;
}

.shippingInfo {
transform: translateY(2px);
}

.get-rates.button {
width: 100%;
margin: 1rem 0 2rem;
}

.wrapper-response{
display: flex;
flex-direction: column;
justify-content: center;
}

.loading-overlay__spinner.calculator-loader circle.path {
stroke: white;
}

.wrapper-response span {
display: inline-block;
}

.form__label {
display: flex;
white-space: nowrap;
gap: 5px;
align-items: flex-start;
}

.wrapper-response div {
display: inline-block;
width: 100%;
white-space: normal;
}

.totals__subtotal-value small {
white-space: nowrap;
}

h2.totals__subtotal {
white-space: nowrap;
}

@media (max-width: 750px) {
.cart__footer shipping-calculator {
width: 100%;
}

shipping-calculator h3, .error-message-box, shipping-calculator form {
max-width: 36rem;
margin: auto;
display: block;
}

.wrapper-response {
padding: 0 1rem;
width: 100%;
}
}
</style>
{% endif %}

 

4. We need to place this shipping calculator to our cart page. Open the main-cart-footer.liquid under the Section folder. Refer to image below where to paste the code. Make sure to SAVE.

{% render "shipping-calculator", cart_total: cart.total_price %}

 

shipping calculator

5. Next, go to config folder, and open the settings_schema.json. Before the last "]", click enter to have a new line, then place the code below. Make sure to SAVE.

,{
"name": "Shipping Rates Calculator",
"settings": [
{
"type": "checkbox",
"id": "shipping_calculator",
"label": "Show the shipping calculator?",
"default": true
},
{
"type": "text",
"id": "shipping_calculator_heading",
"label": "Heading text",
"default": "Get shipping estimates"
},
{
"type": "text",
"id": "shipping_calculator_default_country",
"label": "Default country selection",
"info": "If customer is logged in, customer's country will be selected.",
"default": "Australia"
},
{
"type": "text",
"id": "shipping_calculator_submit_button_label",
"label": "Submit button label",
"default": "Calculate shipping"
}
]
}

 

This settings will be available when you go to Theme editor, and click Settings

 

That is it (",)

Copied!
Voltar para o blogue

Deixe um comentário