In this post, we'll see a tutorial for NodeJS eCommerce applications. If you want to create an awesome eCommerce application using nodeJs and Marketcloud, this is the place for you.

First of all, let's install all the required software that we will use in this tutorial.

  • Install NodeJS
  • Install Yeoman
    npm install -g yo
  • Install the Express generator (I'm using the one made by Peetecop)
    npm install -g generator-express

further information can be found on the official documentation of those projects. 

We need now to launch the Yeoman generator, so let's open the terminal and type

yo express

and select the following setup

? Would you like to create a new directory for your project? (Y/n) Y
? Enter directory name demoCommerceNode
? Select a version to install: Basic
? Select a view engine to use: EJS
? Select a css preprocessor to use (Sass Requires Ruby): None
? Select a build tool to use: Gulp

this way, thanks to the Yeoman generator, your NodeJS project is ready to go. 

If you don't have Yeoman installed or you don't know how to work with Yeoman's generators, just clone this clean express repository from GitHub and you are ready for the tutorial.

To launch the app let's cd into the demoCommerceNode folder and install npm and bower pakages

cd  yourPathTo/demoCommerceNode
npm install && bower install
gulp

the output on terminal should be something like

Express server listening on port 3000

To ensure that everything is working correctly, point your browser to http://localhost:3000 and you should see the Express welcome page.

To make our eCommerce API easier to use in NodeJS, we made an SDK which can be installed through npm.
Since the Yeoman express generator made by peetecop uses livereload, we don't need to kill the process to apply edits so let just open a new terminal (ctrl+shift+t) in the demoCommerceNode folder and type

npm install --save marketcloud-node

Now you are ready to link your code to your first Marketcloud application. Open app.js with the editor and add the following lines:

var Marketcloud = require('marketcloud-node');
var marketcloud = new Marketcloud.Client({
	public_key : 'YOUR_PUBLIC_KEY',
	secret_key : 'YOUR_SECRET_KEY'
})

and replace the pair of keys with the one you can find in the dashboard. Store a reference to the client inside the express application

var app = express();
app.set('mc-client', marketcloud);

To test that everything is working fine, open routes/index.js and add the following code before the res.render() function

router.get('/', function(req, res) {
     var marketcloud = req.app.get('mc-client');
     marketcloud.products.list()
	.then(function(products){
		console.log('Products retrieved')
		console.log(products)
	})
	.catch(function(error){
		console.log(error)
	})
     res.render('index', { title: 'Express'});
});

In the terminal you should see the "Products retrieved" output and, if you have created some products in your account using the dashboard or the API, you can see them as JSON objects in the response.

Now, we force the API to return an error so that we can test the catch() handler.

By changing one of the Marketcloud's keys to an invalid one (the public or the secret), we can see in the terminal the log of the error object. 

Well, the server side setup is ready. How can we render those data client side?

Since we are using EJS, all we have to do is to call the res.render() method, and send the products variable as a key in the JSON object.

Now open the routes/index.js and delete the res.render() method we used before and edit it as follows:

marketcloud.products.list()
	.then(function(products){
		console.log('Products retrieved')
		console.log(products)
  		res.render('index', { title: 'Express' , 
						products: products});
	})
	.catch(function(error){
		console.log(error)
		res.render('error',{message: 'Error', 
				             error: error})
	})

In order to see the data from the browser, we still need to add them in the EJS view. Open views/index.ejs and add the following paragraph under the title tag

<%- JSON.stringify(products) %>

this will allow you to render the products you send with the res.render() method, if you set them on your dashboard. Same way, set up the error rendering page

Open view/error.ejs, delete all the content except for header and footer and replace it with

<%- message %>
<p><%- JSON.stringify(error) %></p>

This will render the error you might have on your terminal, client side

You can check the output on http://localhost:3000

If you have done all the steps of this NodeJS tutorial ecommerce, you are ready to play a bit with the NodeJS Marketcloud SDK. In the next tutorial, we will see how to create a simple interface, using more endpoints.

If you are too lazy to do this all yourself, download the tutorial from Github and just cd into the folder and launch the app with Gulp.

What are you waiting? Grab a betakey now!