v3 - hailey add sup to price - slice ans substr

by ian_smithz

HTML

<ul class="products-grid products-grid--max-5-col first last odd">
<li class="item">
<a href="https://www.screwfix.eu/opp-ft-30eii-12-desk-fan-220-240v.html" title="FT-30EII 12&quot; Desk Fan 220-240V" class="product-image">
<img id="product-collection-image-85301" src="https://www.screwfix.eu/media/catalog/product/cache/3/small_image/210x/9df78eab33525d08d6e5fb8d27136e95/s7/6/5/6545K_P" alt="FT-30EII 12&quot; Desk Fan 220-240V">
</a>
<div class="product-info" style="height: 165px;">
<h2 class="product-name" style="height: 64px;"><a href="https://www.screwfix.eu/opp-ft-30eii-12-desk-fan-220-240v.html" title="FT-30EII 12&quot; Desk Fan 220-240V">FT-30EII 12" Desk Fan 220-240V</a>
<span class="product-sku">6545K</span>
</h2>
 
<div id="BVRRInlineRating-6545K"> <div class="bv-cleanslate bv-cv2-cleanslate"> <div data-bv-v="ratingItem:4" class="bv-shared bv-core-container-185 bv-rating-top-statistic">
 <!--[if lt IE 7]> <div class="bv-compat bvie6 bvie-lt8 bvie"> <![endif]--> <!--[if IE 7]> <div class="bv-compat bvie7 bvie-lt8 bvie"> <![endif]--> <!--[if IE 8]> <div class="bv-compat bvie8 bvie"> <![endif]--> <!--[if IE 9]> <div class="bv-compat bvie9 bvie"> <![endif]--> <!--[if gt IE 9]> <!--><div class="bv-compat"> <!--<![endif]--> <div class="bv-inline-rating-container">   <dl class="bv-stars-container" role="presentation">    <dd class="bv-rating-ratio" role="presentation">  <a href="https://www.screwfix.eu/opp-ft-30eii-12-desk-fan-220-240v.html" class="bv-rating-stars-container bv-focusable">   <span class="bv-rating-stars bv-rating-stars-off" aria-hidden="true">  ★★★★★  </span> <span class="bv-rating-stars-on bv-rating-stars" style="width:88% !important;" aria-hidden="true">  ★★★★★  </span>     <span class="bv-off-screen">4.4 out of 5 stars. Read reviews.</span>     </a>  </dd>      <dd class="bv-rating-ratio-count" role="presentation"> <span class="bv-rating-label bv-text-link">   (15)  </span>  </dd>   </dl>   </div> </div> 
</div> </div></div>
 
<div...

CSS

.item:nth-child(1) {
  width: 305px !important;
  height: 274px !important;
  background-size: 305px 274px !important;
}

.from {
  position: absolute;
  left: -30px;
  top: -10px;
  width: 305px !important;
  text-align: center;
  font-family: "Screwfix Beta Heavy" !important;
  font-size: 90px !important;
  z-index: 9999;
  color: #FFF200;
}

.colouredbox {
  position: absolute;
  width: 285px !important;
  height: 204px !important;
  left: -21px;
  top: -6px;
  background-color: #0153A0;
  color: #ffffff !important;
}

.products-grid li {
  border: none;
}

.textoverwrite {
  position: absolute;
  top: 220px;
  left: -32px;
  width: 305px !important;
  text-align: center !important;
  color: #00539f !important;
  font-family: "Archivo Narrow Bold" !important;
  font-size: 17px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.pricecontainer {
  position: relative;
  top: 15px !important;
  left: -30px !important;
  width: 305px !important;
  height: 300px !important;
  text-align: center;
  color: red !important;
  z-index: 9998 !important;
}

.actualprice {
  font-family: "Screwfix Beta Heavy" !important;
  font-size: 90px !important;
  color: #ffffff !important;
  margin-top: -20px !important;
  z-index: 9996 !important;
}

sup.sup-pound {
  position: relative;
  top: -24px;
  font-size: 60px!important;
  color: #ffffff !important;
  font-family: "Screwfix Beta Heavy" !important;
}

sup.sub-pence {
  position: relative;
  top: -24px;
  font-size: 60px !important;
  color: #ffffff !important;
  font-family: "Screwfix Beta Heavy" !important;
}


/* HIDE ELEMENTS */

.item:nth-child(n+2),
#product-filters-wrap,
.toolbar-bottom,
.product-image,
.product-sku,
.you-save,
.tax-details,
.old-price,
.bv-compat div {
  display: none !important;
}


/*.lii {*/


/*  width:305px !important; height:274px !important; background-size:305px 274px !important; box-shadow:none;*/


/*}*/


/*.lii__btm {*/


/* ...

JavaScript

(function () {

 var targetPrice = jQuery('.products-grid li:first-child span[id^=product-price]').text();
  console.log('untrimmed targetprice is ' + targetPrice);
  targetPrice = targetPrice.trim();
  console.log('trimmed targetprice is ' + targetPrice);
  var firstCharacter = targetPrice.slice(0,1);
  console.log('firstCharacter is ' + firstCharacter);
  var lastThreeCharacters = targetPrice.slice(-3);
  console.log('lastThreeCharacters are ' + lastThreeCharacters);
  var price = targetPrice.substr(1, targetPrice.length-4); 
  console.log('price is ' + price);

  jQuery('span[id*="product-price"]').replaceWith("<div class='pricecontainer'>" + "<sup class='sup-pound'>" + firstCharacter + "</sup>" + "<span class='actualprice'>" + price + "</span>" + "<sup class='sub-pence'>" + lastThreeCharacters + "</sup>" + "</div>");

})();