The ShopDemo shows a simple web shop application (for ordering LaxarJS merchandise) implemented in LaxarJS.

It consists of a small set of LaxarJS widgets implemented in AngularJS. Storage is realised using PouchDB.

An upcoming tutorial will illustrate the implementation step-by-step.


1. Getting started

This tutorial explains how to create a simple web-based shopping application using LaxarJS. It provides a step-by-step introduction into creating widgets and activities and using them in an application. (…) Read more

2. Hello world!

This step is about developing our first LaxarJS widget and integrating it into our application. We are going to create the simple HeadlineWidget which displays a headline and an optional introductory text. (…) Read more

3. Defining the Application Flow

After completing the initial two steps, we have a simple application with a first page, its layout and the first widget. In this step we are going to make some modification in order to add a second page and to make for a nicer appearance of the application. (…) Read more

4. ArticleSearchBoxWidget

By this time, our application only displays a headline and does not allow the user to do anything. To change this we implement the DummyArticlesActivity that provides articles for us, simulating an actual network-based data source. Also, we add another widget, the ArticleSearchBoxWidget, helping us to filter articles by name and description. The activity and widget will use events to publish and filter a list of articles to each other and to other widgets. (…) Read more

5. ArticleBrowserWidget

In this step we are going to implement the ArticleBrowserWidget which displays a list of articles to the user and allows to select an individual article. Another widget (to be implemented in the next step) will show details on the currently selected article. This part of the tutorial will allow you to learn how widgets safely share resources through the event bus, and how resources can be displayed to the user. (…) Read more

6. ArticleTeaserWidget

The ArticleTeaserWidget that we will implement in this step is going to have two features: It will display details on a given article, and it will allow the user to confirm adding that article to the shopping cart. Having learned about the event bus and the resource-pattern already, this part of the tutorial will introduce the action-pattern and explain how widgets may respond to events asynchronously. (…) Read more

7. ShoppingCartWidget

The next step for our ShopDemo application is to implement the ShoppingCartWidget. It will display the current shopping cart contents with all articles added by the user and allows the user change the order quantity for each article. You will learn how widgets can use events to trigger flow-based navigation. (…) Read more

8. Final Steps

All that is left to do now is writing the order confirmation page for our application. In this final part of the tutorial, you will also learn how to create an optimized version of your application for production. (…) Read more