Question

I am running this cool product widget (show-space) on my website that puts selected products on there. It uses the following script:

<script>
  (function(d, s, id) {
    if (d.getElementById(id)) return;
    var fjs = d.getElementsByTagName(s)[0],
        js  = d.createElement(s); js.id = id;
    js.src = "http://www.show-space.com/widgets/manager.js?api_key=0qslzweoj79lp7h03ki9";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, "script", "showspace-manager-js"));
</script>

which is called by something like this: [ss-widget id=my_widget]

The problem I am encountering now is that the widget (which is no longer supported) uses USD (“$”) for all the product widgets while I prefer to show them in Swedish Krona (“kr”), which is typically placed after the number.

I would prefer:
a. change “$99” to “99 kr”
but
b. change “$99” to “SEK 99”
would work as well

I hardly know any JavaScript but was told that this could be solved with a JavaScript. So, what can I do in order to fix this?

Example on how the widget looks like: http://www.presenttips.se/fars-dag

Answer 1

I would use a regex, personally.

with jQuery:

$(document).ready(function(){
    var contents=$('#my_widget').html();
    var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
    $('#my_widget').html(contents.replace(rgx,"$1 kr"));
});

With vanilla:

var contents=document.getElementById("my_widget").innerHTML;
var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
document.getElementById("my_widget").innerHTML=contents.replace(rgx,"$1 kr"));

Notes:

This looks for prices in the following forms:

$20

$ 20

$20.50

$ 20.50

Some examples of prices it would not find:

$      20

$20.999

$20.9

with the vanilla version you’ll need an event to trigger the javascript. This will likely be the body loading, so you’ll have something in your script tag like:

body.onload=function() {
var content=...
...
};

Edit: I’ve had a look at your page and can see (at least in that particular case) that your widget is defined by class name, rather than id. I’ve made the following change to the vanilla script and it works fine on the page you’ve linked – BUT you should be aware that in this implementation it will only work on the first occurrence of the widget it finds on each page… I think you are unlikely to have more than one to a page anyway, so it should be no biggie.

Works on your page:

var contents=document.getElementsByClassName("ss-widget")[0].innerHTML;
var rgx=/\$\s?(\d*(?:\.\d{2})?)/g;
document.getElementsByClassName("ss-widget")[0].innerHTML=contents.replace(rgx,"$1 kr");

Final edit:
As the above is shown to fudge some other things in the widget, here’s the working, jQuerified version including event handler registration and script tags

<script> 
    jQuery(document).ready( //When the document is ready, run the following function...
        function(){
            jQuery('.ss-widget .product-price').each( //Pick everything with class product-price inside everything with class ss-widget and run the following function on each
                function() {
                    var contents=jQuery(this).html(); //Get the contents of this element
                    var rgx=/\$\s?(\d*(?:\.\d{2})?)/g; //Define a regex to search for a dollar sign, followed by an optional space, followed by an arbitary amount of digits, optionally followed by a decimal plus 2 digits. Group everything but the dollar sign and space.
                    jQuery(this).html(contents.replace(rgx,"$1 kr")); //Replace any text found by the regex with it's grouped result, a space, then the text kr.
                }
            );
        }
    );
</script>