Using JavaScript to Change Text in ePages (Part 1)

Another day, another ePages fix!

Many people will often complain about the limitations of the ePages software when it comes to not being able to edit the source code.  With that said, most core functions are hard coded by the provider, and unfortunately since ePages is a German product, a lot of things get lost in translation to English.

My case in point: every product page, for example this one, features “Detail View” underneath the image, to view a larger image.

“Detail View”? It’s a mistranslation of “Detailansicht” which in most English e-commerce sites should really read “View Larger Image”.

Here’s how I fixed it.

Go to Design>Advanced Design, and in the footer area, click the yellow button “Insert new Element”. Navigate to “User-Defined Page Elements” and choose “Text (HTML)”.

Copy the following code into the text box you are presented with (For this example, you don’t HAVE to understand how it works):

<script type="text/javascript">
(function() {
 var list, index, element, filename;
 list = document.getElementsByClassName('ep-ViewProductDetailImage');
 for (index = 0; index < list.length; ++index) {
 element = list[index];
 filename = element.innerHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,'');
 element.innerHTML = "View Larger Image";
 }
})();
</script>

Save your design. Update the page cache and have a look at any of your products. The text should now read “View Larger Image”, just like it should.

Stay tuned for my next post, which will explain how I devised this code.