Add a rating tool into your webshop
Add a rating widget in your SimplyEdit webpage or webshop
Adding a rating tool into your SimplyEdit webpage or webshop is really simple. Here’s a short guide about building the starry tool into your code.
Rating-Widget is a popular tool to include and it is simple as well. First create an account at http://rating-widget.com/. Just click on ‘Get my free widget’. There you can set all kinds of styling preferences and download a small piece of javascript, like this:
<script type=”text/javascript”>(function(d, t, e, m){
// Async Rating-Widget initialization.
window.RW_Async_Init = function(){
RW.init({
huid: “…”,
uid: “…”,
source: “website”,
options: {
“size”: “medium”,
“style”: “oxygen”,
“isDummy”: false
}
});
RW.render();
};
// Append Rating-Widget JavaScript library.
var rw, s = d.getElementsByTagName(e)[0], id = “rw-js”,
l = d.location, ck = “Y” + t.getFullYear() +
“M” + t.getMonth() + “D” + t.getDate(), p = l.protocol,
f = ((l.search.indexOf(“DBG=”) > -1) ? “” : “.min”),
a = (“https:” == p ? “secure.” + m + “js/” : “js.” + m);
if (d.getElementById(id)) return;
rw = d.createElement(e);
rw.id = id; rw.async = true; rw.type = “text/javascript”;
rw.src = p + “//” + a + “external” + f + “.js?ck=” + ck;
s.parentNode.insertBefore(rw, s);
}(document, new Date(), “script”, “rating-widget.com/”));</script>You can add this to your webpage, and add the rating widget container to the product template. However, there are two things that need a tweak to work with SimplyEdit:
First, if you have more than one product on a page, you also need more than one rating widget. So you need the `data-title` attribute and you must be able to edit this in SimplyEdit as well. So add the following to the product template:
<p class=”product-hidden”
data-simply-field=”rating.data-title”
data-simply-content=”text”>my rating</p>
<div class=”rw-ui-container”
data-title=”my rating”
data-simply-field=”rating”
data-simply-content=”attributes”
data-simply-attributes=”data-title”></div>Second, the Rating-Widget javascript code must run after SimplyEdit has rendered all the content, otherwise it may run before the `data-title` fields are set correctly. So instead of the original javascript, change it slightly like this:
<script type=”text/javascript”>
document.addEventListener(‘simply-content-loaded’, function() {
(function(d, t, e, m){
// Async Rating-Widget initialization.
window.RW_Async_Init = function(){
RW.init({
huid: “…”,
uid: “…”,
source: “website”,
options: {
“size”: “medium”,
“style”: “oxygen”,
“isDummy”: false
}
});
RW.render();
};
// Append Rating-Widget JavaScript library.
var rw, s = d.getElementsByTagName(e)[0], id = “rw-js”,
l = d.location, ck = “Y” + t.getFullYear() +
“M” + t.getMonth() + “D” + t.getDate(), p = l.protocol,
f = ((l.search.indexOf(“DBG=”) > -1) ? “” : “.min”),
a = (“https:” == p ? “secure.” + m + “js/” : “js.” + m);
if (d.getElementById(id)) return;
rw = d.createElement(e);
rw.id = id; rw.async = true; rw.type = “text/javascript”;
rw.src = p + “//” + a + “external” + f + “.js?ck=” + ck;
s.parentNode.insertBefore(rw, s);
}(document, new Date(), “script”, “rating-widget.com/”));
});
</script>As you can see, we wrapped the original javascript code inside an EventListener. SimplyEdit fires an event called ‘simply-content-loaded’ immediately after the page is rendered and all the information is available. At that point the rating widget has the data-title attribute and only then can it initialize its javascript code.
And that’s it. You’ve added a simple rating tool into your webshop or website.
If you have read our previous article: You now have a complete webshop, with user ratings. You may need to setup some more stuff in Snipcart, but the Snipcart website and dashboard will help you get that sorted.
