Issue

Here is the situation. One customer want to replace “Our Price:” in online shop pages because “Our Price: USD$100” is longer then the width of product image. This customer used Volusion.com to build his own E-Commerce website. In order to do that, you should login to manage your Volusion.com back-end system. Then, click [Design] and select [Site Content]. On the Article Group, select [Page Text] of the drop-down menu. You can see “Our Price” beside ID which is 335. If you remove “Our Price”, you will see “: USD$100” in the front-end page. You can refer the link of Volusion Support. Still, we have not meet the requirement. How can we replace “Our Price:” in pages? Especially, all this texts are in the same class name of DIV. If you see the source code of product list page, it will show like below:

..................
<div class="product_listprice"><b>Our Price: USD$100.00</b></div>
............ ......
<div class="product_listprice"><b>Our Price: USD$50.00</b></div>
.......

First of all, I recommend that leave “Our Price” on [Page Text] setting. Then, we can replace “Our Price:” on product list pages.
Suggestion

Let me repeat again! Our goal is to replace words  in the same DIV class name of page. So, what functions should we need? When will these functions be executed? What language should be used to build this function?

After some researches, I decided to use jQuery to implement this function. Here is a list that I referred:

• http://benalman.com/code/projects/jquery-replacetext/examples/replacetext/
• http://api.jquery.com/ready/
• http://stackoverflow.com/questions/2727303/jquery-counting-elements-by-class-what-is-the-best-way-to-implement-this
• http://stackoverflow.com/questions/22062416/jquery-loop-through-divs-with-the-same-class-and-create-array-for-each-of-them
• http://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class
• http://stackoverflow.com/questions/14587460/how-replace-to-same-class-names-with-foreach-each

Here is my solution to reach customer’s requirement.

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
 $( document ).ready(function() {
 $('.product_listprice').html(function(i, current) {
 return current.replace('Price:', '');
});
 });
 </script>