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 using Vue.JS.


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. The tutorial is intended for developers who are familiar with standard web technologies (HTML, JavaScript) and a basic familiarity with a UI-technologies such as React, AngularJS or Vue.js, with Vue.js being used throughout this tutorial. (…) 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 a headline-widget that simply shows a headline, optionally followed by an introductory text.(…) Read more

3. The article-browser-widget

In this step we are going to implement the article-browser-widget which displays a list of articles to the user and allows to select an individual article. To obtain the articles in the first place, we also create an activity. 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

4. The article-teaser-widget

The article-teaser-widget introduced 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. We will also change the layout to a more sophisticated three-column version. (…) Read more

5. The shopping-cart-widget

The next step for our ShopDemo application is to implement the shopping-cart-widget. 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 also learn how widgets can use events to trigger flow-based navigation. (…) Read more

6. Defining the Application Flow

After completing the previous steps, you already have a working application with a first page, its layout and a first widget. In this step we are going to make some modification in order to add a second page and to navigate between those pages. This will allow you to get familiar with the declarative way that flow navigation is implemented in LaxarJS. (…) Read more

7. The article-search-box-widget

We already have a working application with articles provided by the dummy-articles-activity, an article-browser-widget to choose items from, an article-teaser-widget for preview, and a shopping-cart-widget to review and submit our order. At this point, you might call it a day and skip right to the final steps.

However, there is one more feature you might want to implement: Filtering the list of available articles using a text input. (…) Read more

8. Final Steps

In this final part of the tutorial, you will learn to use a different theme as well as to create an optimized version of your application for production. (…) Read more