We have just published a sample Single Page Application that showcases building a storefront shopping website, displaying categories, products, product search, add to cart and checkout functionality and hosting it on Watson Content Hub. Besides leveraging the hosting capabilities of Watson Content Hub, content such as a blog, terms of use, other policy information, and contact information is stored as content items in Watson Content Hub – showcasing content that a business user would modify to change information displayed in the site without having to involve the development team.
The complete source code is available here and can be adjusted as desired: Download
We have included the ability to develop and test the application locally through a npm web server. After local development and bundling of the application, it can be uploaded to Watson Content Hub where it is available on the provided CDN. The application includes a configuration file that allows you to configure the server details of the WebSphere Commerce Server that holds the shopping catalog data.
The goal of this sample is to allow a quick start for implementing a custom ecommerce site. The main flow has been implemented as a sample and can be customized; additional flows can be added as required; and the user interface can easily be extended and modified. The catalog and shopping features come from a WebSphere Commerce Server version 8 or higher.

In the sample the main flows for a shopping site were implemented:
1. General Information:
Header, Footer, Navigation, Blog and Contact US pages, Terms of use and Policy information.

2. Authentication:
Sign up, Login and Logout of the store. User data is stored in WebSphere Commerce.

3. Browsing the catalog:
Drilling down into categories, allowing to select brands or filtering by price.

4. Searching for a product:
Searching the product catalog.

5. Showing product detail information:
Ability to select product characteristics like for instance color or size of shoes.

6. Shopping cart:
Adding and removing products from the shopping cart and triggering a checkout. Also reviewing what is in the cart for the current session.

7. Checkout flow:
Guest checkout flow, allowing to enter address and payment information and checking out including success message.

Characteristics of the site:
– Responsive design and implementation
– Best of breed open source technologies: Angular, jQuery, Bootstrap
– Leveraging a free html shopping template: Eshopper template
– Leveraging the power of headless eCommerce via WebSphere Commerce integration
– Leveraging the power of Watson Content Hub for hosting and content management and delivery

Update: We have extended the sample package with new features. Check out the details here: Extended storefront sample

2 comments on"New sample for hosting a storefront on Watson Content Hub"

  1. […] have updated the original storefront sample we shipped in August (can be found here: Storefront sample release) with additional features you can leverage in your storefront. The added capabilities include the […]

  2. […] new update for our storefront sample is available (see also: original and first update). The package is now fully integrated with the WCH sites feature, […]

Join The Discussion

Your email address will not be published. Required fields are marked *