Integrating code into CSS classes?

Design help Custom code
1

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’m sorry for the crappy title, but I have no idea how to even label this request/function.

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>
2

Rename post bump. Hopefully this is clearer?

3

@Admin @mods Please delete this thread.