Styling and Customizing

Here's the default look of your catalog:

Default Look

With some knowledge of CSS you can change the colors, typeface and layout. With knowledge of JS you can add new features and completely change how it works. To do these things, first grab the ProductWorld Client SDK:

Prerequisites

To use this SDK you will need to have Node.js installed. Node.js is a platform built on Chrome's JavaScript runtime. You can download its installer from the official NodeJS website.

Building a static HTML site

Once Node.js is installed, to build standard catalog site, do the following:

Here are the variables you need to update in settings.js:

exports.COMPANY change to short name of your company (same as your ProductWorld login)
exports.TITLE will be used in title tag of your site. Put a human friendly (with spaces and capitalization) name of your company or your catalog there
exports.SITE_URL change to location where your site will be hosted, e.g. http://catalog.yourcompany.com/

This will create a complete, self-contained static HTML website in build directory:

Console output after running build command

Development server

This SDK includes a rudimentary HTTP server that you can use during development instead of running "build" command over and over again. Start the server with command

node manage.js develop

and stop it by pressing Ctrl+C. Please note that this HTTP server is not suitable for use in production, as it recompiles HTML, JS and CSS files on each request.

Stylesheets

Customize the looks of your catalog site by editing LESS files in /less/ directory and HTML templates in /templates/ directory.

Stylesheets use .less syntax and are converted to standard CSS during build. You can either put standard CSS in them or use LESS-specific features like variables and mixins.

Find out more about LESS language on LESS website.

The standard site uses Bootstrap 3 for CSS grids and basic styling. Bootstrap's .less files are in less/bootstrap folder. Most of the Bootstrap modules are commented out from less/bootstrap/bootstrap.less to keep size of CSS file down.

A quick way to start customizing your site is to open less/bootstrap/variables.less and start customizing colors and fonts.

Find out more about Bootstrap on Bootstrap's website.

HTML templates

HTML templates in /templates/ directory define markup of each area of catalog site: category selector, filters, list of products, product details. Templates use EJS syntax.

For information on the syntax visit EmbeddedJS website

Deploying in production

First, run

node manage.js build

This creates a complete, self contained static website in /build/ folder. It does not have any special hosting requirements so you can publish it in any way that is convenient:

Making your site indexable by search engines

Since navigation of the standard catalog is dynamic and Javascript driven, it is hard for search engines to crawl and index your catalog on their own. To help them, we support AJAX crawling scheme, as specified by Google.

In essence, when a crawler requests page, the site must provide the page with all dynamic parts already filled in. This cannot be done with fully static site, some of the client-side logic now needs to run on server.

Here is a command to start the HTTP server in production mode:

node manage.js run

When this command runs, it starts a HTTP server on port 8001. This server will both work for normal visitors, and will also build appropriate responses to crawler requests.

It is a good practice to use Nginx or Apache as reverse proxy in front of node.js app (instead of exposing it to public directly). Here is a straightforward configuration example for Nginx which proxies incoming requests to port 8001:

server {
    listen   80;

    location / {
        proxy_pass http://localhost:8001/;
    }

}

Place it in /etc/nginx/sites-enabled/pw_browse and restart Nginx.