Bubble Parse

by pphheerroonn

HTML

<div id="category">
<ul class="products-grid products-grid--max-3-col first last odd">
<li class="item last">
                <a href="https://www.compub.com/catalog/product/view/id/28/s/eol-ipad-pro-9-7-inch-wi-fi-32gb-silver/category/13/" title="EOL iPad Pro 9.7-inch Wi-Fi 32GB Silver" class="product-image">
                                        <img id="product-collection-image-28" src="https://www.compub.com/media/catalog/product/cache/1/small_image/252x/9df78eab33525d08d6e5fb8d27136e95/M/L/MLMP2B_10.jpg" alt="EOL iPad Pro 9.7-inch Wi-Fi 32GB Silver">
                </a>
            <h2 class="product-name"><a href="https://www.compub.com/catalog/product/view/id/28/s/eol-ipad-pro-9-7-inch-wi-fi-32gb-silver/category/13/">EOL iPad Pro 9.7-inch Wi-Fi 32GB Silver</a></h2>

                    
                <div class="product-information">

                    

                        
    <div class="price-box">
                                            
                    <p class="old-price">
                <span class="price-label">Regular Price:</span>
                <span class="price" id="old-price-28">
                
                    €599.00                </span>
            </p>

                            <p class="special-price">
                    <span class="price-label">Special Price</span>
                <span class="price" id="product-price-28">
                    €449.00                </span>
                </p>
                    
    
        </div>

                                        <div class="">


                        
			<!-- RK CompuB stockfix 28-10-2016 -->
                            			<!-- RK CompuB stockfix 28-10-2016 END -->

									<p class="action"><a title="View Details" class="button" href="https://www.compub.com/catalog/product/view/id/28/s/eol-ipad-pro-9-7-inch-wi-fi-32gb-silver/category/13/">View Details</a></p>
							<!-- RK CompuB stockfix 28-10-2016 -->
			    			                       ...

CSS

.item.last{
  position: relative;
}

.priceBubble{
  position: absolute;
  top: 20px;
  left: 30px;
  padding: 30px;
  background: #222;
  width: 70px;
  height:70px;
  color: white;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-family: sans-serif;
  font-size: 26px;
}

.priceBubble {
  display: inline-block;
}
.priceBubble .bubbleSave{
  clear: both;
}
.priceBubble .bubbleDecimal {
  font-size: 0.5em;
  float: right;
  padding-top:0.85em;
  transform: translate(-2px, 1px);
}
.priceBubble .bubblePrice {
  float: left;
}

JavaScript

function getElementInsideContainer(ID, CLASS) {
   var targetDiv = document.getElementById(ID).getElementsByClassName(CLASS)[0];
}

function parseProductsIn(ELEMENT){
	var scope = document.getElementsByClassName(ELEMENT)[0].children;
  var arrayLength = scope.length;
	for (var i = 0; i < arrayLength; i++) {
  	    appendBubble(fetchSavePriceOf(scope[i]), scope[i]);
  }
}


parseProductsIn('products-grid');
function fetchSavePriceOf(ELEMENT){

    var oldPrice;
    var newPrice = ELEMENT.querySelector('[id^=product-price-]').innerHTML;
    if(ELEMENT.querySelector('[id^=old-price-]') === null){
       return false;
       
    }
    else{
       oldPrice = ELEMENT.querySelector('[id^=old-price-]').innerHTML
       var parsedOld = oldPrice.replace(/[€,]/g, "");
       var parsedNew = newPrice.replace(/[€,]/g, "");
       //var save = parseFloat(parsedOld) - parseFloat(parsedNew);
       var save = Math.round(((parseFloat(parsedOld) - parseFloat(parsedNew)) + 0.00001) * 100) / 100;
       //Math.round((num + 0.00001) * 100) / 100
       return save;
    }
}


function appendBubble(SAVEAMOUNT, ELEMENT) {

if (!SAVEAMOUNT){ 
    return false;
}
else{
  var node = document.createElement("DIV");
  node.className = "priceBubble";
  
  var save = document.createElement("DIV");
  save.className = "bubbleSave";
  var contentSave = document.createTextNode("Save");
  save.appendChild(contentSave);
  node.appendChild(save);
  
  
  var price = document.createElement("DIV");
  price.className = "bubblePrice";
  var content = document.createTextNode("€" + Math.floor(SAVEAMOUNT));
  price.appendChild(content);
  node.appendChild(price);
  
  
  var decimal = SAVEAMOUNT - Math.floor(SAVEAMOUNT);
  var decimalRounded = decimal.toFixed(2)*100;
  var decimalPoint = "." + decimalRounded;


  if (decimalRounded > 0){
  	var node2 = document.createElement("DIV");
  	node2.className = "bubbleDecimal";
 		var content2 = document.createTextNode(decimalPoint);
...