Hey all!
A friend has written some geo-autocurrency code which works very nicely, but is completely vanilla.
I would like to integrate it into my WebFlow site (exported) without having to shoe-horn it in each time I update and export the site.
I am willing to offer some cash for your time. Please PM me with details.
The desired end result: I have pricing on the Pricing page of my website, shown in British Pounds (£). I would like to automatically show another currency when the user is outside of the UK. As mentioned, the functionality for this script is already developed, I just need to know how to integrate it into my site.
Site is live here: Pricing
Same site on WF: https://pfss-2020-1.webflow.io/pricing
Read-only link: https://preview.webflow.com/preview/pfss-2020-1?utm_medium=preview_link&utm_source=dashboard&utm_content=pfss-2020-1&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview
Any help would be greatly appreciated! And if it’s quite involved, happy to send a little cash to someone for the help.
Cheers!
Dax.
<html>
<head>
<style>
.FXhidden {
display: none;
}
.FXshown {
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$.getJSON('https://www.iplocate.io/api/lookup/', function (data) {
var country = data.country;
var continent = data.continent;
// not needed for the real script, just to show the result in the body
document.getElementById("country").innerHTML = "<b>" + country + "</b>"
document.getElementById("continent").innerHTML = "<b>" + continent + "</b>"
switch (true) {
// case (country == "United Kingdom"):
// newCur = "GBP"
// newCurSymbol = "£"
// break;
case (continent == "Europe"):
newCur = "EUR"
newCurSymbol = "€"
break;
case (country == "United States"):
newCur = "USD"
newCurSymbol = "$"
break;
// default:
// newCur = "GBP"
// newCurSymbol = "£"
}
if (newCur != "GBR") {
$.ajaxSetup({
// this makes the $.getJSON call synchronous so we get an answer before continuing
async: false
});
t = $.getJSON('https://api.exchangeratesapi.io/latest?base=GBP&symbols=' + newCur, function (data) {
// get the valud for selected currency and return that from the script
return data.rates[newCur]
})
factor = t.responseJSON.rates[newCur] // could maybe multiply by 1.05 to add 5% 'fudge'
} else {
factor = 1 // as there's no fudging needed for the UK
}
// loop through each 'ukprice' named object, and apply the factor and currency symbol...
$('[name=ukprice]').each(function (index) {
oldPrice = this.innerText
this.innerText = newCurSymbol + Math.ceil(oldPrice * factor)
this.classList = "FXshown"
});
});
</script>
</head>
<body>
<p>The script has two styles - <i>FXhidden</i> and <i>FXshown</i>. Initially the values are set to <i>FXhidden</i> during
calculations</p>
<p>The script leverages jQuery (already present in the PuzzleFactory template, so no additional overhead).</p>
<p>This makes a single call to IPLocate.io which gets the country name. IPLocate.io allows up to 1000 calls/day for
free. This call also takes about .3s. The country located is: <span id="country">Checking...</span> in <span
id="continent">Checking...</span></p>
<p>The returned value is then used to determine which currency conversion we need (USD or EUR), which then calls
https://api.exchangeratesapi.io</p>
<p>Once we have a conversion factor, then the calculation is performed, the correct currency symbol inserted, the
text updated and finally the class set to <i>FXshown</i></p>
<p>Potentially, the time for these calls could be reduced by storing a cookie for a user (under <a
href="https://en.wikipedia.org/wiki/EPrivacy_Regulation_(European_Union)">ePR</a> that might not require
consent, but those rules are not in place yet). We could also embed the API call in the underlying PHP code
itself (if that can be changed) as well as only do the currency rate look up (say) daily.</p>
<p>Item One Price: <span class="FXhidden" name="ukprice">10.50</span></p>
<p>Item Two Price: <span class="FXhidden" name="ukprice">11.75</span></p>
<p>Item Three Price: <span class="FXhidden" name="ukprice">543.21</span></p>
</body>
</html>
Thanks again