{"id":15143776,"url":"https://github.com/contentful/product-catalogue-js","last_synced_at":"2025-09-29T12:31:11.368Z","repository":{"id":66184196,"uuid":"55609387","full_name":"contentful/product-catalogue-js","owner":"contentful","description":"Product catalogue in JavaScript","archived":true,"fork":false,"pushed_at":"2023-10-26T13:45:19.000Z","size":36,"stargazers_count":38,"open_issues_count":3,"forks_count":33,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-09-27T10:04:04.002Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/contentful.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-04-06T13:43:13.000Z","updated_at":"2024-05-08T10:49:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f489d2d4-574f-4ad3-abdb-082b71dbcd38","html_url":"https://github.com/contentful/product-catalogue-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fproduct-catalogue-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fproduct-catalogue-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fproduct-catalogue-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/contentful%2Fproduct-catalogue-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/contentful","download_url":"https://codeload.github.com/contentful/product-catalogue-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234619456,"owners_count":18861456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-26T10:03:51.810Z","updated_at":"2025-09-29T12:31:06.084Z","avatar_url":"https://github.com/contentful.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Product Catalogue\n\n[Contentful](https://www.contentful.com) provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster.\n\nThis repository shows how to build a frontend JavaScript based application with Contentful for a Product Catalogue, based on the Contentful starter Product Catalogue example space.\n\nThis project uses no specific frameworks and is written in plain JavaScript, making use of browser APIs and HTML/CSS.\n\nThe 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.\n\nThe only external dependencies are:\n* the [Contentful SDK](https://github.com/contentful/contentful.js)\n* the [marked](https://github.com/chjj/marked) Markdown library for rendering markdown content\n* the [es6-promise](https://github.com/stefanpenner/es6-promise) polyfill for Promises in the browser\n\n## Who is this for?\n\nThis application was developed in order to show a very simple way of developing a frontend JavaScript application with Contentful, without the aid of any more complex frameworks or tools.\n\nIt's also focused on users who are newer to web development in general. The code is commented and explained, so even if you are not so experienced with webdevelopment you can get an understanding of what's happening in the code.\n\nIf you'd like to see more complex examples you can look at the [React discovery app](https://github.com/contentful/discovery-app-react) and more will come in the future.\n\nThis code makes some use of Promises, which are also used by the Contentful SDK. If you are new to promises, read [this introduction](http://www.html5rocks.com/en/tutorials/es6/promises/) and [this article](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) to learn some more common usage patterns.\n\n## Trying it out\n\nYou can try this app at http://contentful.github.io/product-catalogue-js\n\n## Try it on JSFiddle\n\nYou can try and play with a subsection of this app at the following fiddle: https://jsfiddle.net/trodrigues/btvhh4ma/\n\nThere you can see how to get and display a list of products.\n\n## Running it locally\n\nBecause 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.\n\nYou'll need an http server in order to run this.\n\nIf you have node.js and [npm](http://npmjs.com/) available, you can run `npm install http-server` and then run `http-server`. Now you can open http://localhost:8080 in your browser.\n\nIf you are on Mac OSX you can also run `python server.py` in the project directory. Now open http://localhost:8000 in your browser.\n\nIf you use any other server and serve this in a subdirectory, make sure to set the appropriate value in the `\u003cbase\u003e` tag on `index.html`\n\nFor instance, for http://contentful.github.io/product-catalogue-js the tag would look as `\u003cbase href='/product-catalogue-js/' /\u003e`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Fproduct-catalogue-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontentful%2Fproduct-catalogue-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontentful%2Fproduct-catalogue-js/lists"}