First app version

- basic structure and routing - readme instructions - basic page rendering methods
varanek27 · Apr 7, 2016 · e81443d · e81443d
1 parent b8e8c7c
commit e81443d
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,29 @@
-# product-catalogue-js
-Product catalogue in JavaScript
+# JavaScript Product Catalogue
+
+This repository shows how to build a Product Catalogue with JavaScript on a website, based on the Contentful starter Product Catalogue example space.
+
+This project uses no specific frameworks and is written in plain JavaScript, making use of browser APIs and HTML/CSS.
+
+The application is split over multiple files which are included via script tags in the `index.html` file. While this approach is taken here for simplicity, **this is not advised for production deployments**. Make sure you always bundle up and minify your JavaScript code.
+
+The only external dependencies are the [Contentful SDK](https://github.com/contentful/contentful.js) and the [marked](https://github.com/chjj/marked) Markdown library for rendering markdown content.
+
+Feel free to look at the code and understand how to use Contentful on a bare bones, web based, JavaScript enabled website.
+
+## Trying it out
+
+You can try this app at http:https://contentful.github.io/product-catalogue-js
+
+## Running it locally
+
+Because this app makes use of the browser's [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) you can't just open the index.html file locally on a browser.
+
+You'll need an http server in order to run this.
+
+If you have node.js and [npm](http:https://npmjs.com/) available, you can run `npm install http-server` and then run `http-server`. Now you can open http:https://localhost:8080 in your browser.
+
+If you are on Mac OSX you can also run `python -m SimpleHTTPServer` in the project directory. Now open http:https://localhost:8000 in your browser.
+
+If you use any other server and serve this in a subdirectory, make sure to set the appropriate value in the `<base>` tag on `index.html`
+
+For instance, for http:https://contentful.github.io/product-catalogue-js the tag would look as `<base href='/product-catalogue-js/' />`
diff --git a/app.js b/app.js
@@ -0,0 +1,53 @@
+(function () {
+
+PC.init = function () {
+ PC.contentfulClient = contentful.createClient({
+ accessToken: '0e3ec801b5af550c8a1257e8623b1c77ac9b3d8fcfc1b2b7494e3cb77878f92a',
+ space: 'wl1z0pal05vy'
+ })
+
+ setupHistory()
+ setupNavAnchorListeners()
+
+ PC.container = document.getElementById('content')
+
+ loadPage('')
+}
+
+function setupHistory() {
+ window.onpopstate = function (ev) {
+ loadPage(ev.state && ev.state.href || '')
+ }
+}
+
+function setupNavAnchorListeners() {
+ document.querySelector('main > nav').addEventListener('click', function (ev) {
+ ev.preventDefault()
+ if(ev.target.tagName.toLowerCase() === 'a') {
+ history.pushState({href: ev.target.href}, '', ev.target.href)
+ loadPage(ev.target.href)
+ }
+ }, false)
+}
+
+function loadPage(href) {
+ href = href.replace(/(^http(s)?:\/\/\w+(:\d+)?\/|^\/)/, '')
+ switch(href) {
+ case 'categories':
+ PC.pages.categories()
+ break
+ case 'about':
+ PC.pages.about()
+ break
+ case 'product':
+ PC.pages.product(id)
+ break
+ case 'brand':
+ PC.pages.brand(brand)
+ break
+ default:
+ PC.pages.products()
+ }
+}
+
+}());
diff --git a/categories.html b/categories.html
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <base href='' />
+ <head>
+ <meta charset="utf-8">
+ <title></title>
+ </head>
+ <body>
+ <main>
+ <nav>
+ <ul>
+ <li><a href="/">Products</a></li>
+ <li><a href="/categories">Categories</a></li>
+ <li><a href="/about">About</a></li>
+ </ul>
+ </nav>
+ <div id="content">
+ </div>
+ </main>
+ <script>
+ window.PC = {}
+ </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="./app.js" charset="utf-8"></script>
+ <script src="./pages.js" charset="utf-8"></script>
+ <script>
+ PC.init()
+ </script>
+ </body>
+</html>
diff --git a/pages.js b/pages.js
@@ -0,0 +1,29 @@
+(function () {
+
+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')
+ })
+ },
+
+ categories: function () {
+ PC.contentfulClient.getEntries({content_type: '6XwpTaSiiI2Ak2Ww0oi6qa'})
+ .then(function (entries) {
+ var categories = entries.items.map(function (entry) {
+ return '<p>'+entry.fields.title+'</p>'
+ })
+ PC.container.innerHTML = categories.join('\n')
+ })
+ },
+
+ about: function () {
+ PC.container.innerHTML = 'about'
+ }
+}
+
+}());