Product Catalogue

Contentful's Product Catalogue https://github.com/contentful/product-catalogue-js

HTML

<script src="https://npmcdn.com/[email protected]/browser-dist/contentful.js"></script>
<script src="https://npmcdn.com/[email protected]/marked.min.js"></script>
<body>
  <div id="content" class="content-container"></div>
</body>

CSS

body {
  padding: 0;
  margin: 0;
  border: none;
  font-family: 'Avenir', sans-serif;
}

a {
  border-bottom: 1px dotted #5B9FEF;
  color: #4A90E2;
  text-decoration: none;
}

.products {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

.product-in-list {
  display: flex;
  margin-bottom: 60px;
}

.product-image a {
  border-bottom: none;
}

.product-header h2 {
  display: inline;
}

.product-header h2 a {
  border-bottom: none;
}

.product-details {
  padding-left: 10px;
}

.product-details > * {
  margin-bottom: 10px;
}

.product-categories {
  font-weight: bold;
}

.product-tags span {
  font-weight: bold;
}

JavaScript

var contentfulClient = contentful.createClient({
  accessToken: 'dc294962aa22a820cad6968c87a6f3dca37c96ce99476ac2db90e2d47c71b5ae',
  space: 'pj6rh6opy50b'
})

var PRODUCT_CONTENT_TYPE_ID = 'recipeEntry'

var container = document.getElementById('content')

contentfulClient.getEntries({
    content_type: PRODUCT_CONTENT_TYPE_ID
  })
  .then(function(entries) {
  console.log(entries);
    container.innerHTML = renderProducts(entries.items)
  })

function renderProducts(products) {
  return '<h1>Products hello</h1>' +
    '<div class="products">' +
    products.map(renderSingleProduct).join('\n') +
    '</div>'
}

function renderSingleProduct(product) {
  var fields = product.fields
  console.log(fields)
  return '<div class="product-in-list">' +
    '<div class="product-image">' +
    renderImage(fields.image[0], fields.slug) +
    '</div>' +
    '<div class="product-details">' +
    renderProductDetails(fields) +
    '</div>' +
    '</div>'
}

function renderProductDetails(fields) {
  return renderProductHeader(fields) +
    '<p class="product-categories">' +
    fields.categories.map(function(category) {
      return category.fields.title
    }).join(', ') +
    '</p>' +
    '<p>' + marked(fields.productDescription) + '</p>' +
    '<p>' + fields.price + ' &euro;</p>' +
    '<p class="product-tags"><span>Tags:</span> ' + fields.tags.join(', ') + '</p>'
}

function renderProductHeader(fields) {
  return '<div class="product-header">' +
    '<h2>' +
    '<a href="product/' + fields.slug + '">' +
    fields.productName +
    '</a>' +
    '</h2>' +
    ' by ' +
    '<a href="brand/' + fields.brand.sys.id + '">' + fields.brand.fields.companyName + '</a>' +
    '</div>'
}

function renderImage(image, slug) {
  if (image && image.fields.file) {
    return '<a href="product/' + slug + '">' +
      '<img src="' + image.fields.file.url + '" width="150" height="150" />' +
      '</a>'
  } else {
    return ''
  }
}