Merge pull request #5038 from DivanteLtd/doc-multistore-refactor

Fifciu · web-flow · commit 2ddac268863a · 2020-10-19T12:49:56.000+02:00
Docs: last changes in multistore
diff --git a/docs/guide/integrations/multistore.md b/docs/guide/integrations/multistore.md
@@ -2,17 +2,21 @@
 
 Vue Storefront supports Magento Multistore installations
 
+## Limitations of Multistore in Vue Storefront 1
+- Multidomain support is possible to achieve right now but it requires tricky changes in core. It will be available in refactored Multistore which should be released in 1.13/1.14
+- Different theme for different store is not supported right now. If you want to achieve that - the easiest way would be to just run 2 instances with different configs. If you want to change only parts of theme based on current store then you can easily achieve it with helpers described below.
+- No support for multicurrency per store
+
 ## Multiwebsite indexing
 
-Multiwebsite support starts with the Elasticsearch indexing. Basically, each store has its own Elasticsearch index and should be populated separately using the [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) tool.
+Multiwebsite support starts with the Elasticsearch indexing. Basically, each store has its own Elasticsearch index and should be populated using the [Magento2 VSBridge Indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) tool.
 
 :::warning
 
-Using node indexer to enable _multistore_ feature for _Vue Storefront_ has been deprecated. 
-You can use _Bridge Indexer_ for the better performance and maintainability. For Magento 2, you can find it [here](https://github.com/DivanteLtd/magento2-vsbridge-indexer)
+There is legacy node indexer which has been deprecated. You should not use `mage2vuestorefront` anymore in production! The only acceptable reason to using it - is to provide data to your local Elasticsearch cluster from development instance.
 :::
 
-The simplest script to index multi site:
+The simplest script to provide data to your local Elasticsearch:
 
 ```bash
 export TIME_TO_EXIT=2000
@@ -60,7 +64,7 @@ In the result, you should get:
 - _vue_storefront_catalog_de_ - populated with the "it" store data
 - _vue_storefront_catalog_ - populated with the "default" store data
 
-Then, to use these indexes in Vue Storefront, you should index the database schema using the `vue-storefront-api` db tool:
+Then, to use these indices in Vue Storefront, you should index the database schema using the `vue-storefront-api` db tool (use only if using mage2vuestorefront!):
 
 ```bash
 yarn db rebuild -- --indexName=vue_storefront_catalog_it
@@ -85,98 +89,99 @@ After this sequence of command, you may add the available ES index to your `vue-
 		"vue_storefront_catalog_it"
 	],
 	"availableStores": [
-		"de", "it"
+      "de",
+      "it"
 	],
-
+// ...
 ```
 
 The last thing is to change the `vue-storefront/config/local.json` to configure the storeViews that are available.
 
 ```json
-    "storeViews": {
-      "multistore": false,
-      "mapStoreUrlsFor": ["de", "it"],
-      "de": {
-        "storeCode": "de",
-        "storeId": 3,
-        "name": "German Store",
-        "url": "/de",
-        "elasticsearch": {
-          "host": "localhost:8080/api/catalog",
-          "index": "vue_storefront_catalog_de"
-        },
-        "tax": {
-          "defaultCountry": "DE",
-          "defaultRegion": "",
-          "sourcePriceIncludesTax": false,
-          "calculateServerSide": true,
-          "userGroupId": null,
-          "useOnlyDefaultUserGroupId": false,
-          "deprecatedPriceFieldsSupport": true,
-          "finalPriceIncludesTax": false
-        },
-        "i18n": {
-          "defaultCountry": "DE",
-          "defaultLanguage": "DE",
-          "availableLocale": [
-            "de-DE"
-          ],
-          "defaultLocale": "de-DE",
-          "currencyCode": "EUR",
-          "currencySign": "€",
-          "currencyDecimal": "",
-          "currencyGroup": "",
-          "fractionDigits": 2,
-          "priceFormat": "{sign}{amount}",
-          "dateFormat": "HH:mm D/M/YYYY",
-          "fullCountryName": "Deutschland",
-          "fullLanguageName": "German",
-          "bundleAllStoreviewLanguages": false
-        }
-      },
-      "it": {
-        "storeCode": "it",
-        "storeId": 4,
-        "name": "Italian Store",
-        "url": "/it",
-        "elasticsearch": {
-          "host": "localhost:8080/api/catalog",
-          "index": "vue_storefront_catalog_it"
-        },
-        "tax": {
-          "defaultCountry": "IT",
-          "defaultRegion": "",
-          "sourcePriceIncludesTax": false,
-          "calculateServerSide": true,
-          "userGroupId": null,
-          "useOnlyDefaultUserGroupId": false,
-          "deprecatedPriceFieldsSupport": true,
-          "finalPriceIncludesTax": false
-        },
-        "i18n": {
-          "defaultCountry": "IT",
-          "defaultLanguage": "IT",
-          "availableLocale": [
-            "it-IT"
-          ],
-          "defaultLocale": "it-IT",
-          "currencyCode": "EUR",
-          "currencySign": "€",
-          "currencyDecimal": "",
-          "currencyGroup": "",
-          "fractionDigits": 2,
-          "priceFormat": "{sign}{amount}",
-          "dateFormat": "HH:mm D/M/YYYY",
-          "fullCountryName": "Italy",
-          "fullLanguageName": "Italian",
-          "bundleAllStoreviewLanguages": false
-        }
-      }
+"storeViews": {
+  "multistore": false,
+  "mapStoreUrlsFor": ["de", "it"],
+  "de": {
+    "storeCode": "de",
+    "storeId": 3,
+    "name": "German Store",
+    "url": "/de",
+    "elasticsearch": {
+      "host": "localhost:8080/api/catalog",
+        "index": "vue_storefront_catalog_de"
     },
+    "tax": {
+      "defaultCountry": "DE",
+      "defaultRegion": "",
+      "sourcePriceIncludesTax": false,
+      "calculateServerSide": true,
+      "userGroupId": null,
+      "useOnlyDefaultUserGroupId": false,
+      "deprecatedPriceFieldsSupport": true,
+      "finalPriceIncludesTax": false
+    },
+    "i18n": {
+      "defaultCountry": "DE",
+      "defaultLanguage": "DE",
+      "availableLocale": [
+        "de-DE"
+      ],
+      "defaultLocale": "de-DE",
+      "currencyCode": "EUR",
+      "currencySign": "€",
+      "currencyDecimal": "",
+      "currencyGroup": "",
+      "fractionDigits": 2,
+      "priceFormat": "{sign}{amount}",
+      "dateFormat": "HH:mm D/M/YYYY",
+      "fullCountryName": "Deutschland",
+      "fullLanguageName": "German",
+      "bundleAllStoreviewLanguages": false
+    }
+  },
+  "it": {
+    "storeCode": "it",
+    "storeId": 4,
+    "name": "Italian Store",
+    "url": "/it",
+    "elasticsearch": {
+      "host": "localhost:8080/api/catalog",
+      "index": "vue_storefront_catalog_it"
+    },
+    "tax": {
+      "defaultCountry": "IT",
+      "defaultRegion": "",
+      "sourcePriceIncludesTax": false,
+      "calculateServerSide": true,
+      "userGroupId": null,
+      "useOnlyDefaultUserGroupId": false,
+      "deprecatedPriceFieldsSupport": true,
+      "finalPriceIncludesTax": false
+    },
+    "i18n": {
+      "defaultCountry": "IT",
+      "defaultLanguage": "IT",
+      "availableLocale": [
+        "it-IT"
+      ],
+      "defaultLocale": "it-IT",
+      "currencyCode": "EUR",
+      "currencySign": "€",
+      "currencyDecimal": "",
+      "currencyGroup": "",
+      "fractionDigits": 2,
+      "priceFormat": "{sign}{amount}",
+      "dateFormat": "HH:mm D/M/YYYY",
+      "fullCountryName": "Italy",
+      "fullLanguageName": "Italian",
+      "bundleAllStoreviewLanguages": false
+    }
+  }
+},
 ```
 
 :::tip
-You can find more options available to _multistore_ features in [store view](/guide/basics/configuration.html#store-views) section of _Configuration File Explained_. 
+You can find more options available to _multistore_ in [store view](/guide/basics/configuration.html#store-views) section of _Configuration File Explained_. 
 :::
 
 After these changes, you'll have a `LanguageSwitcher` component visible on the bottom.
@@ -194,7 +199,7 @@ The storeCode may be switched by ENV variable set before running `yarn dev` / `y
 
 - `export STORE_CODE=de && yarn dev` will run the shop with the `de` shop loaded
 
-Another option, useful when using multistore mode with the NGINX/varnish mode, is to set the shop code by the `x-vs-store-code` http reqeuest header.
+Another option, useful when using multistore mode with the NGINX/varnish mode, is to set the store code by the `x-vs-store-code` HTTP header.
 
 ## Changing the UI for specific store views
 
@@ -214,6 +219,21 @@ export default function(app, router, store) {
 
 Another option is to create a separate theme for a specific storeview. Runtime theme changes are not possible, as themes are compiled in the JS bundles by webpack during the page build process. In that case, you should run separate instances of `vue-storefront` having the proper theme set in the `config/local.json` file.
 
+## Multi Source Inventory (MSI) support
+To support this custom feature you should take care of 2 things. At first please install [Magento2 VSBridge Indexer MSI Extension](https://github.com/DivanteLtd/magento2-vsbridge-indexer-msi). Then in `config/local.json` of your VSF-API add part like:
+```js
+"msi": {
+  "enabled": true,
+  "defaultStockId": 1
+},
+```
+Where `defaultStockId` is your default stock ID. In each storeCode, which uses different stock ID you should add part like:
+```js
+"msi": {
+  "stockId": 2
+},
+```
+
 ## Useful _Helpers_
 
 ### How to get current store view?
@@ -231,7 +251,7 @@ import { currentStoreView } from '@vue-storefront/core/lib/multistore'
   }
 ```
 
-`currentStoreView()` will return the object value you set in `local.json` - it should be type of StoreView or extended StoreView.
+`currentStoreView()` returns the object value you set in `local.json` - it is type of StoreView or extended StoreView.
 ```ts
 interface StoreView {
   storeCode: string,
@@ -277,7 +297,7 @@ interface StoreView {
 
 ### How to remove store code from route
 
-When you need to remove `storeCode` from route in such a case you want to route to default store by mapping fallback, use `removeStoreCodeFromRoute` as following example : 
+When you need to remove `storeCode` from route, use `removeStoreCodeFromRoute` as following example : 
 
 ```js
 import { removeStoreCodeFromRoute } from '@vue-storefront/core/lib/multistore'
@@ -304,7 +324,7 @@ const myUrl2 = adjustMultistoreApiUrl('https://example.com?a=b&storeCode=it'); /
 This feature is extra useful when you are sending a request to the VSF-API and you want VSF-API to use endpoint of certain storeCode.
 
 ### Using endpoint of certain storeCode in Vue Storefront API
-In `src/api/extensions/example-magento-api/index.js` we have example line that creates Magento 2 Client:
+In `src/api/extensions/example-magento-api/index.js` we have line that creates Magento 2 Client:
 ```js
 const client = Magento2Client(config.magento2.api);
 ```
@@ -314,12 +334,7 @@ If you want to support multistore for certain endpoint, you should make it this
 const client = Magento2Client(multiStoreConfig(config.magento2.api, req));
 ```
 
-Obviously, you could do the same in Magento 1:
-```js
-const client = Magento1Client(multiStoreConfig(config.magento2.api, req));
-```
-
-It will use `storeCode` query parameter from the `req` to figure out which store to use. To make it work properly you should also configure different stores in your VSF-API's config. Check this example configuration for `de` and `it` store codes:
+It uses `storeCode` query parameter from the `req` to figure out which store to use. To make it work properly you should also configure different stores in your VSF-API's config. Check this example configuration for `de` and `it` store codes:
 ```js
 "magento2": {
     "imgUrl": "http://demo-magento2.vuestorefront.io/media/catalog/product",
@@ -368,7 +383,7 @@ localizedRoute('/about'); // returns /de/about
 :::
 
 :::warning
-`localizedRoute` is injected to each Vue's instance so you can access it in your component with `this.localizedRoute`. You could also use it in template without additional imports.
+`localizedRoute` is injected to each Vue's instance so you can access it in your component via `this.localizedRoute`. You could also use it in template without additional imports.
 :::
 
 ```vue
@@ -401,7 +416,7 @@ You can extract store code from route as follows :
 ```js
 import storeCodeFromRoute from '@vue-storefront/core/lib/storeCodeFromRoute'
 // abridged
- const storeCode = storeCodeFromRoute(currentRoute)
+const storeCode = storeCodeFromRoute(currentRoute)
 ```
 
-You should get store code `gb` from route `https://example.com/gb/foo` where storeCode is `gb`
+You should get store code `gb` from route `https://example.com/gb/foo` if storeCode is `gb`
