(#52) documentation: simplified chapters 7 and 8

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Last Changes
 
+- [#52](https://github.com/LaxarJS/shop-demo/issues/52): documentation: simplified chapters 7 and 8
 - [#51](https://github.com/LaxarJS/shop-demo/issues/51): documentation: added missing hints and fixed a link
 - [#49](https://github.com/LaxarJS/shop-demo/issues/44): documentation: added missing graphics
 - [#44](https://github.com/LaxarJS/shop-demo/issues/44): fixed some of the remaining TODO items, explained `layout.json`

application/widgets/article-search-box-widget/article-search-box-widget.vue

@@ -1,5 +1,5 @@
 <template>
-   <form role="form" @submit="search()">
+   <form role="form" @submit="updateFilter()">
       <div class="form-group">
          <div class="input-group">
             <input class="form-control"
@@ -39,7 +39,7 @@ export default {
       } );
    },
    methods: {
-      search() {
+      updateFilter() {
          const target = '_self';
          const data = {
             [ this.features.navigation.parameterName ]: this.searchTerm || null

docs/tutorials/07_article_search_box_widget.md

@@ -36,7 +36,7 @@ Let us start with the _template_ of the widget component, [article-search-box-wi
 
 ```vue
 <template>
-<form role="form" @submit="filter()">
+<form role="form" @submit.prevent="filter()">
    <div class="form-group">
       <div class="input-group">
          <input class="form-control"
@@ -77,7 +77,7 @@ export default {
          const matches = subject => ( subject || '' ).toLowerCase().indexOf( search ) !== -1;
          const articles = search ?
             this.articles.filter( article =>
-               [ 'some', 'id', 'htmlDescription' ].some( field => matches( article[ field ] ) )
+               [ 'name', 'id', 'htmlDescription' ].some( field => matches( article[ field ] ) )
             ) :
             this.articles;
 
@@ -146,7 +146,7 @@ All you need to do is modify the controller to subscribe to `didNavigate` events
 
 ```vue
 <template>
-<form role="form" @submit="search()"><!-- ... --></form>
+<form role="form" @submit.prevent="updateFilter()"><!-- ... --></form>
 </template>
 
 <script>
@@ -168,14 +168,16 @@ export default {
       } );
    },
    methods: {
-      search() {
+      updateFilter() {
          const target = '_self';
          const data = {
             [ this.features.navigation.parameterName ]: this.searchTerm || null
          };
          this.eventBus.publish( `navigateRequest.${target}`, { target, data } );
       },
-      filter() { /* ... */ }
+      filter() {
+         // ... see above
+      }
    }
 };
 </script>

docs/tutorials/08_final_steps.md

@@ -22,16 +22,23 @@ The LaxarJS documentation contains a [manual on themes](https://laxarjs.org/docs
 The theme used by the application can be changed in the file `init.js`, by replacing `"default"` with `"cube"`:
 
 ```js
-// in the artifacts import:
+// 1/3 in the artifacts import:
 import artifacts from 'laxar-loader/artifacts?flow=main&theme=cube';
-
 // ...
 
-// and in the LaxarJS application configuration:
+// 2/3 in the LaxarJS application configuration
 const configuration = {
-   // name, ...
-   theme: 'cube'
+   // ...
+   theme: 'cube',
+   // ...
 };
+
+
+create( [ vueAdapter ], artifacts, configuration )
+   // 3/3 if tooling is used, adjust it as well
+   .tooling( require( 'laxar-loader/debug-info?flow=main&theme=cube' ) )
+   .flow( 'main', document.querySelector( '[data-ax-page]' ) )
+   .bootstrap();
 ```
 
 Finally, the webpack configuration needs to be extended to support the SCSS-import paths required by the _cube.theme_.
@@ -52,11 +59,11 @@ This already goes a long way in changing the appearance of the application.
 But the individual layouts and widgets will still fall back to their _default.theme_ folders, using the slightly different set of variables from vanilla Bootstrap CSS.
 To _fully_ theme your application, you'll have to use SCSS stylesheets that are customized for the cube.theme for some of the artifacts:
 
-  - [application/layouts/one-column/cube.theme/scss/one-column.scss](../../application/layouts/one-column/cube.theme/scss/one-column.scss)
-  - [application/layouts/three-columns/cube.theme/scss/three-columns.scss](../../application/layouts/three-columns/cube.theme/scss/three-columns.scss)
-  - [application/widgets/article-browser-widget/cube.theme/scss/article-browser-widget.scss](../../application/widgets/article-browser-widget/cube.theme/scss/article-browser-widget.scss)
-  - [application/widgets/article-teaser-widget/cube.theme/scss/article-teaser-widget.scss](../../application/widgets/article-teaser-widget/cube.theme/scss/article-teaser-widget.scss)
-  - [application/widgets/shopping-cart-widget/cube.theme/scss/shopping-cart-widget.scss](../../application/widgets/shopping-cart-widget/cube.theme/scss/shopping-cart-widget.scss)
+- [application/layouts/one-column/cube.theme/scss/one-column.scss](../../application/layouts/one-column/cube.theme/scss/one-column.scss)
+- [application/layouts/three-columns/cube.theme/scss/three-columns.scss](../../application/layouts/three-columns/cube.theme/scss/three-columns.scss)
+- [application/widgets/article-browser-widget/cube.theme/scss/article-browser-widget.scss](../../application/widgets/article-browser-widget/cube.theme/scss/article-browser-widget.scss)
+- [application/widgets/article-teaser-widget/cube.theme/scss/article-teaser-widget.scss](../../application/widgets/article-teaser-widget/cube.theme/scss/article-teaser-widget.scss)
+- [application/widgets/shopping-cart-widget/cube.theme/scss/shopping-cart-widget.scss](../../application/widgets/shopping-cart-widget/cube.theme/scss/shopping-cart-widget.scss)
 
 
 After restarting the development server, your application should look similar to this: