render list of products

index.html

@@ -19,11 +19,13 @@
  </main>
  <script>
  window.PC = {
- pages: {}
+ pages: {},
+ utils: {}
  }
  </script>
  <script src="https://npmcdn.com/[email protected]/browser-dist/contentful.min.js" charset="utf-8"></script>
  <script src="https://npmcdn.com/[email protected]/marked.min.js" charset="utf-8"></script>
+ <script src="./utils.js" charset="utf-8"></script>
  <script src="./app.js" charset="utf-8"></script>
  <script src="./pages/products.js" charset="utf-8"></script>
  <script src="./pages/categories.js" charset="utf-8"></script>

pages/products.js

@@ -3,11 +3,51 @@
 PC.pages.products = function () {
  PC.contentfulClient.getEntries({content_type: '2PqfXUJwE8qSYKuM0U6w8M'})
  .then(function (entries) {
- var products = entries.items.map(function (entry) {
- return '<p>'+entry.fields.productName+'</p>'
- })
- PC.container.innerHTML = products.join('\n')
+ PC.container.innerHTML = renderProducts(entries.items)
  })
 }
 
+function renderProducts(products) {
+ return '' +
+ '<h1>Products</h1>' +
+ products.map(renderSingleProduct).join('\n')
+}
+
+function renderSingleProduct(product) {
+ var fields = product.fields
+ console.log(fields.description)
+ return '<div>' +
+ '<div>' +
+ renderImage(fields.image[0], fields.slug) +
+ '</div>' +
+ '<div>' +
+ '<h2>' +
+ '<a href="/products/' + fields.slug + '">' +
+ fields.productName +
+ '</a>'+
+ '</h2>' +
+ ' by ' +
+ '<a href="/brands/' + fields.brand.sys.id + '">' + fields.brand.fields.companyName + '</a>'
+ '</div>' +
+ '<p>' +
+ fields.categories.map(function (category) {
+ return category.fields.title
+ }).join(', ') +
+ '</p>' +
+ '<p>' + PC.utils.truncate(fields.productDescription, 100) + '</p>' +
+ '<p>' + fields.price + ' &euro;</p>' +
+ '<p>Tags: ' + fields.tags.join(', ')+ '</p>' +
+ '</div>'
+}
+
+function renderImage(image, slug) {
+ if(image && image.fields.file) {
+ return '<a href="/products/' + slug + '">' +
+ '<img src="' + image.fields.file.url + '" width="150" height="150" />' +
+ '</a>'
+ } else {
+ return ''
+ }
+}
+
 }());

utils.js

@@ -0,0 +1,11 @@
+(function () {
+
+PC.utils.truncate = function (str, len) {
+ if(str && str.length > len) {
+ return str.substr(0, len) + '…'
+ } else {
+ return str
+ }
+}
+
+}());