API test

by AaronLayton

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<h1>...</h1>

<div class="row" id="product-list">
  
</div>

<template id="product-template">
  <div class="col-xs-6 col-sm-3">
    <div class="associated-product text-center" data-id="{{ProductID}}">
      <div class="associated-product__image text-center">
          <a href="{{BuyUrl}}" title="{{Title}}" itemprop="url">
              <img src="{{ImageUrl}}" class="img-responsive img-center " alt="{{Title}}">
          </a>
      </div>
      
      <div class="associated-product__meta">
        <a href="{{BuyUrl}}">
          <h2 class="associated-product__title">
            {{Title}}
          </h2>

          <div class="pricing-block pricing-block--inline">
            <span class="pricing-block__now" title="Price">
              &pound;{{Price}}
            </span>
          </div>
          
        </a>
      </div>
    </div>
  </div>
</template>

CSS

.associated-product {
    cursor: pointer;
    padding: 8px;
    position: relative;
    border: 1px solid transparent;
    -webkit-transition: border .2s cubic-bezier(.4,0,.2,1);
    transition: border .2s cubic-bezier(.4,0,.2,1)
}

.associated-product>a {
    display: inline-block;
    text-decoration: none;
    width: 100%
}

.associated-product:hover {
    border-color: #dbdbdb
}

.associated-product:hover .associated-product__title,.associated-product:hover a {
    color: #333
}

.span2 .associated-product .associated-product__sash img {
    max-width: 33px
}

.span2 .associated-product .pricing-block {
    font-size: 13px
}

.associated-product .col-xs-12 {
    display: none
}

.associated-product .buy-text {
    display: none
}

.associated-product .col-has-video {
    display: block!important
}

.associated-product .quick-buy {
    margin-top: 15px
}

.associated-product__image {
    position: relative
}

.associated-product__image>a {
    display: block
}

.associated-product__image:hover .associated-product__controls {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.associated-product__image .landing-basket-svg {
    margin-top: 7px
}

.associated-product__image picture img {
    width: 100%
}

.associated-product__loader {
    display: none
}

.associated-product__loader.loading {
    display: block;
    position: absolute;
    width: 100%;
    top: 45%
}

.associated-product__loader img {
    width: auto!important;
    margin: 0 auto!important
}

.associated-product__meta {
    margin-top: 10px;
    position: relative;
    text-align: left
}

.associated-product__colours {
    font-size: 0;
    margin-top: 5px
}

.associated-product__colours a {
    display: inline-block;
    line-height: initial;
    margin: 0 2px;
    padding: 1px;
    border: 1px solid #ccc;
    width: 35px;
    height: 35px;
    -webkit-transition: -webkit-transform .2s...

JavaScript

var container = document.getElementById('product-list'),
    template = document.getElementById('product-template');
    
fetch("https://api.vybe.com/api/product?items=130").then(function(response){
	return response.json();
}).then(function(data){
	var newHtml = "";
	data.Products.forEach(function(entry){
  	var newTemplateHtml = template.innerHTML;
    
    // tmp fix
    entry.ImageUrl = entry.ImageUrl.replace("vybe.co.uk", "vybe.com");
    
    for (var key in entry) {
      if (entry.hasOwnProperty(key)) {
      	newTemplateHtml = newTemplateHtml.replace(new RegExp("{{" + key + "}}", "g"), entry[key]);
      }
    }
    
    newHtml += newTemplateHtml
  });
  
  container.innerHTML = newHtml;
}).catch(function(err){
	console.log(err);
});