Render more product list info and single product page

varanek27 · Apr 7, 2016 · a8a8190 · a8a8190
1 parent 3eab194
commit a8a8190
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 13 deletions.
diff --git a/app.js b/app.js
@@ -6,6 +6,11 @@ PC.init = function () {
  space: 'wl1z0pal05vy'
  })
 
+ PC.config = {
+ productContentTypeId: '2PqfXUJwE8qSYKuM0U6w8M',
+ categoryContentTypeId: '6XwpTaSiiI2Ak2Ww0oi6qa'
+ }
+
  setupHistory()
  setupNavAnchorListeners()
 
@@ -21,9 +26,9 @@ function setupHistory() {
 }
 
 function setupNavAnchorListeners() {
- document.querySelector('main > nav').addEventListener('click', function (ev) {
+ document.querySelector('body').addEventListener('click', function (ev) {
  ev.preventDefault()
- if(ev.target.tagName.toLowerCase() === 'a') {
+ if(ev.target.tagName.toLowerCase() === 'a' && 'nav' in ev.target.dataset) {
  history.pushState({href: ev.target.href}, '', ev.target.href)
  loadPage(ev.target.href)
  }
@@ -32,15 +37,16 @@ function setupNavAnchorListeners() {
 
 function loadPage(href) {
  href = href.replace(/(^http(s)?:\/\/\w+(:\d+)?\/|^\/)/, '')
- switch(href) {
+ var urlParts = href.split('/')
+ switch(urlParts[0]) {
  case 'categories':
  PC.pages.categories()
  break
  case 'about':
  PC.pages.about()
  break
  case 'product':
- PC.pages.product(id)
+ PC.pages.product(urlParts[1])
  break
  case 'brand':
  PC.pages.brand(brand)

diff --git a/index.html b/index.html
@@ -9,9 +9,9 @@
  <main>
  <nav>
  <ul>
- <li><a href="/">Products</a></li>
- <li><a href="/categories">Categories</a></li>
- <li><a href="/about">About</a></li>
+ <li><a href="/" data-nav>Products</a></li>
+ <li><a href="/categories" data-nav>Categories</a></li>
+ <li><a href="/about" data-nav>About</a></li>
  </ul>
  </nav>
  <div id="content">
@@ -28,6 +28,7 @@
  <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/product.js" charset="utf-8"></script>
  <script src="./pages/categories.js" charset="utf-8"></script>
  <script src="./pages/about.js" charset="utf-8"></script>
  <script>

diff --git a/pages/categories.js b/pages/categories.js
@@ -1,7 +1,9 @@
 (function () {
 
 PC.pages.categories = function () {
- PC.contentfulClient.getEntries({content_type: '6XwpTaSiiI2Ak2Ww0oi6qa'})
+ PC.contentfulClient.getEntries({
+ content_type: PC.config.categoryContentTypeId
+ })
  .then(function (entries) {
  var categories = entries.items.map(function (entry) {
  return '<p>'+entry.fields.title+'</p>'

diff --git a/pages/product.js b/pages/product.js
@@ -0,0 +1,43 @@
+(function () {
+
+PC.pages.product = function (slug) {
+ PC.contentfulClient.getEntries({
+ content_type: PC.config.productContentTypeId,
+ 'fields.slug': slug
+ })
+ .then(function (entries) {
+ PC.container.innerHTML = renderSingleProduct(entries.items[0])
+ })
+}
+
+function renderSingleProduct(product) {
+ var fields = product.fields
+ return '<div>' +
+ '<div>' +
+ renderImage(fields.image[0]) +
+ '</div>' +
+ '<div>' +
+ '<h2>' + fields.productName + '</h2>' +
+ ' by ' +
+ '<a href="/brands/' + fields.brand.sys.id + '" data-nav>' + 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) {
+ if(image && image.fields.file) {
+ return '<img src="' + image.fields.file.url + '" width="150" height="150" />'
+ } else {
+ return ''
+ }
+}
+
+}());
diff --git a/pages/products.js b/pages/products.js
@@ -1,7 +1,9 @@
 (function () {
 
 PC.pages.products = function () {
- PC.contentfulClient.getEntries({content_type: '2PqfXUJwE8qSYKuM0U6w8M'})
+ PC.contentfulClient.getEntries({
+ content_type: PC.config.productContentTypeId
+ })
  .then(function (entries) {
  PC.container.innerHTML = renderProducts(entries.items)
  })
@@ -15,19 +17,18 @@ function renderProducts(products) {
 
 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="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/products/' + fields.slug + '">' +
+ '<a href="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/product/' + fields.slug + '" data-nav>' +
  fields.productName +
  '</a>'+
  '</h2>' +
  ' by ' +
- '<a href="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/brands/' + fields.brand.sys.id + '">' + fields.brand.fields.companyName + '</a>'
+ '<a href="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/brands/' + fields.brand.sys.id + '" data-nav>' + fields.brand.fields.companyName + '</a>'
  '</div>' +
  '<p>' +
  fields.categories.map(function (category) {
@@ -42,7 +43,7 @@ function renderSingleProduct(product) {
 
 function renderImage(image, slug) {
  if(image && image.fields.file) {
- return '<a href="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/products/' + slug + '">' +
+ return '<a href="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/product/' + slug + '" data-nav>' +
  '<img src="' + image.fields.file.url + '" width="150" height="150" />' +
  '</a>'
  } else {