With the recent updates made to Merchandising Central it is easier than ever to create customised merchandising widgets for your EAN site. But your customizations don’t have to end when you generate your widget – there are some simple tweaks that can be made to change the appearance of your widget on your page.
We’re going to look at several tweaks all put together on the same widget to create the desired effect. Here is the widget we are starting out with in context on the page:
As you can see, there are several display issues in the widget:
- The scroll bar on the side is unnecessary
- There is white space at the bottom of the widget
- The state may not be necessary
- The font options may not fit in with the rest of the site
- The USD letters after the price are not needed
- The width of this widget needs adjusting for this particular placement.
By following these instructions, you will be able to change all of these aspects of this widget to make sure that it displays correctly on your site.
Getting the perfect format
Let’s start by changing the CSS code to fix the side bar and the white space at the bottom.
The first thing you need to do is use a program such as Firebug to find out the ID of your widget. You can do this by right clicking on the widget and going to “inspect element”. Take the widget ID from Firebug and input it into the code. In this instance, our widget ID is destination-widgets-image-336×280-1 – change the parts of code below where this ID appears to display your widget ID before placing in your CSS file:
#destination-widgets-image-336×280-1 { width: 290px !important; height: 290px !important;}
#destination-widgets-image-336×280-1 li { font: bold 12px Arial !important;}
#destination-widgets-image-336×280-1 div {height: 260px !important;}
Note that you can change the font attributes to whatever you use on your site by adjusting the fields within the second line of code above.
Once you have this code in place, you will see that your widget’s width is adjusted, you have no scroll bar to the side of the widget and you eliminate the white space at the bottom.
Removing the USD currency code
Now let’s look at how to remove the USD letters after the prices. Go to where you have pasted your widget’s code within your site, and place this code below it, remembering to change your widget name where it appears (highlighted):
<script type=”text/javascript”>
for(i=0; idestination-widgets-image-336×280-1“).getElementsByTagName(“li”).length;i++)
{
document.getElementById(“destination-widgets-image-336×280-1“).getElementsByTagName(“li”)[i].innerHTML = document.getElementById(“destination-widgets-image-336×280-1“).getElementsByTagName(“li”)[i].innerHTML.replace(‘USD’,”);
}
</script>
Removing the state from US destinations
The final tweak we will look at is how to remove the state from your US destinations. This code, like the above code to remove the USD, needs to be placed alongside your widget code within your site – again, remember to change the widget name to match that of your widget (highlighted):
<script type=”text/javascript”>
for(i=0; idestination-widgets-image-336×280-1“).getElementsByTagName(“a”).length;i++)
{
if(document.getElementById(“destination-widgets-image-336×280-1“).getElementsByTagName(“a”)[i].innerHTML.indexOf(“img”) > 0)
{}
else
{
document.getElementById(“destination-widgets-image-336×280-1“).getElementsByTagName(“a”)[i].innerHTML = document.getElementById(“destination-widgets-image-336×280-1“).getElementsByTagName(“a”)[i].innerHTML.split(‘,’)[0];
.replace(“area”,””);
}
}
</script>
The finished product!
To the right you can see the widget with all of these changes applied.
- The CSS changes have removed the white space from the bottom of the widget.
- The scroll bar has been removed with the CSS changed.
- The width of the widget has been adjusted by the CSS code to better fit with the booking box which appears above.
- The USD letters at the end of the prices have been removed.
- The state is no longer displayed for the US destinations.
These are just some of the changes you can make to our merchandising widgets – if you have worked out some of your own cool tweaks to a widget, why not share it below or on one of our Social Media channels?
Happy Merchandising!
Other Posts that may interest you
