Streaming live at 10am (PST)

$$ offered - Integrate code into WebFlow site

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: https://www.puzzlefactory.uk/pricing.php
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>

I sent you a PM but putting a solution here in case anyone is interested.

I would just change one line in the code:
$('[name=ukprice]').each(function (index) {
to
$('[id=ukprice]').each(function (index) {

and then wrap the price in a span and give it the “ukprice” id like this:

I think that’s all it would take. I tested it out on a scratch page and it worked great, even with the country/continent thing which apparently you don’t even need in this case.

1 Like

Hi @jmkriz, I tried what you suggested, but wasn’t able to get it to work, unfortunately.
The test code is still live on this links above if you wanted to take a look at it?

I also tried adding the “FXhidden” style as well, since that seems to be part of the code, right?

Thanks again!

By the way, after this initial part is working, I’m thinking that it would be best to always show £GBP prices and only show the exchange-rate prices when IP geolocation indicates country is not United Kingdom. I can talk to my friend who wrote the original code about that, though. It’s just this initial Webflow integration that I’m having trouble with.

This code needs to be in the <head> not the <body>:

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Ahh, I omitted jquery on purpose because I know that when the site is exported it’s automatically included, so I figured that would be the case when hosted on WebFlow test servers, too.
I’ve added it and the code works perfectly! Let me know via PM how I can buy you a beer! :slight_smile: Thanks again @jmkriz!