updated component usage notes

README.md

@@ -81,37 +81,91 @@ Updated module rules section in webpack config and add:
 <script src="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.js"></script>
 ```
 
-#### Use Component
+#### Use component in Vue app
 
-WIP!
-
-````js
-settings: {
-  baseUrl: 'http://manufacturer-blueprint.workbench.oneba.se',
-  imageApiPath: '/filefly/api?action=stream&path=',
-  imgBaseUrl: 'http://img.workbench.oneba.se',
-  imgHostPrefix: 'http://manufacturer-blueprint.workbench.oneba.se/img/stream',
-  imgHostSuffix: ',p1',
-  detailPath: false, // or '/de/frontend/products/detail?productId='
-  endpoints: {
-    data: '/de/api/product-data',
-    option: '/de/api/product-option',
-    filter: '/de/api/product-filter'
+```
+import axios from 'axios'
+
+export default {
+  name: 'app',
+  data () {
+    return {
+      settingsApiUrl: 'http://spiess-kuehne.ch.workbench.oneba.se/api/settings?internalDetailPath=1',
+      settings: null,
+      products: {
+        data: null,
+        option: null,
+        filter: null
+      }
+    }
   },
-  enabledSearch: true,
-  enabledSort: true
-},
-products: {
-  data: null,
-  option: null,
-  filter: null
+  created () {
+    axios.get(this.settingsApiUrl)
+      .then((response) => {
+        this.settings = response.data
+
+        axios.get(this.settings.baseUrl + this.settings.endpoints.data)
+          .then((response) => {
+            this.products.data = response.data
+          })
+          .catch((error) => {
+            console.error(error)
+          })
+
+        axios.get(this.settings.baseUrl + this.settings.endpoints.option)
+          .then((response) => {
+            this.products.option = response.data
+          })
+          .catch((error) => {
+            console.error(error)
+          })
+
+        axios.get(this.settings.baseUrl + this.settings.endpoints.filter)
+          .then((response) => {
+            this.products.filter = response.data
+          })
+          .catch((error) => {
+            console.error(error)
+          })
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+  }
 }
-````
-
+```
 ```html
 <vue-shuffle :settings="settings" :products="products"></vue-shuffle>
 ```
 
+###### Settings API response
+
+```json
+settings: {
+  "baseUrl": "http://spiess-kuehne.ch.workbench.oneba.se",
+  "imageApiPath": "/filefly/api?action=stream&path=",
+  "imgBaseUrl": "http://img.workbench.oneba.se",
+  "imgHostPrefix": "http://spiess-kuehne.ch.workbench.oneba.se/img/stream",
+  "imgHostSuffix": ",p2",
+  "detailPath": false, // or '/de/frontend/products/detail?productId='
+  "endpoints": {
+    "settings": "/api/settings",
+    "data": "/api/product-data",
+    "option": "/api/product-option",
+    "filter": "/api/product-filter"
+  },
+  "languages": [
+    "de",
+    "en"
+  ],
+  "enabledFilter": true,
+  "enabledFilterOptions": false,
+  "filterMode": "and", // or "or", is ignored if "enabledFilterOptions" is set to false
+  "enabledSearch": true,
+  "enabledSort": true
+}
+```
+
 ## Tests
 
 WIP!