From 5f860d4b23b77bf427d07ca297b46866eafe9fcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz?= <46789227+lukeromanowicz@users.noreply.github.com> Date: Fri, 8 Feb 2019 11:25:22 +0100 Subject: [PATCH 001/203] remove duplicated entry in 1.8 upgrade notes --- docs/guide/upgrade-notes/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/guide/upgrade-notes/README.md b/docs/guide/upgrade-notes/README.md index f4206b632a..e11a9cbe9a 100644 --- a/docs/guide/upgrade-notes/README.md +++ b/docs/guide/upgrade-notes/README.md @@ -7,8 +7,7 @@ Full changelog is available [here](https://github.com/DivanteLtd/vue-storefront/ - `store/types` have been moved to new module called `core/types`. - `store/lib/search` has been moved to `core/lib/search`. -- `store/lib/multistore.ts` has been moved to `core/lib/multistore.ts` -- `@vue-storefront/store/lib/multistore` has been [moved](https://github.com/patzick/vue-storefront/commit/d42cdc44fc204dd10b173894d52dbeff244913f5#diff-87917f882ffc57fb755b1cc82ffa9e28L11) to `@vue-storefront/core/lib/multistore` +- `store/lib/multistore.ts` has been [moved](https://github.com/patzick/vue-storefront/commit/d42cdc44fc204dd10b173894d52dbeff244913f5#diff-87917f882ffc57fb755b1cc82ffa9e28L11) to `core/lib/multistore.ts` - new [styles](https://github.com/patzick/vue-storefront/commit/d42cdc44fc204dd10b173894d52dbeff244913f5#diff-ae72dc903f169eb56d716cd5ac99df35R1) file for form elements - removed unused `src/themes/default/filters/index.js` file - check if you're not using it as well - `src/themes/default/resource/head.js` has been moved to `src/themes/default/head.js` From e56bff1977ac2e365f33f1b06cca3756a8978492 Mon Sep 17 00:00:00 2001 From: Ananth Iyer Date: Sat, 9 Feb 2019 11:02:39 +0530 Subject: [PATCH 002/203] Fixed country label design in My shipping details page --- src/themes/default/components/core/blocks/Form/BaseSelect.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/themes/default/components/core/blocks/Form/BaseSelect.vue b/src/themes/default/components/core/blocks/Form/BaseSelect.vue index bbcbdbdbf7..5b1b82c5f3 100644 --- a/src/themes/default/components/core/blocks/Form/BaseSelect.vue +++ b/src/themes/default/components/core/blocks/Form/BaseSelect.vue @@ -133,6 +133,7 @@ export default { position: absolute; pointer-events: none; user-select: none; + left: 0; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; From edf2229429436cd0043dcb5731d3ee5ec18127cf Mon Sep 17 00:00:00 2001 From: Ananth Iyer Date: Sat, 9 Feb 2019 12:26:43 +0530 Subject: [PATCH 003/203] Fixed first name length issue in payment method --- src/themes/default/components/core/blocks/Checkout/Payment.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/default/components/core/blocks/Checkout/Payment.vue b/src/themes/default/components/core/blocks/Checkout/Payment.vue index 36d7caf843..402bf03dcb 100644 --- a/src/themes/default/components/core/blocks/Checkout/Payment.vue +++ b/src/themes/default/components/core/blocks/Checkout/Payment.vue @@ -380,7 +380,7 @@ export default { payment: { firstName: { required, - minLength: minLength(3) + minLength: minLength(2) }, lastName: { required From b7973df8cc9b6c822853928633b876dcf99d3961 Mon Sep 17 00:00:00 2001 From: Dmitry Schegolihin Date: Sat, 9 Feb 2019 14:42:21 +0400 Subject: [PATCH 004/203] :bug: Fixed path to query entity. --- .../sample-custom-entity-graphql/hooks/afterRegistration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/sample-custom-entity-graphql/hooks/afterRegistration.ts b/src/modules/sample-custom-entity-graphql/hooks/afterRegistration.ts index ac9dce6060..8752553dfd 100644 --- a/src/modules/sample-custom-entity-graphql/hooks/afterRegistration.ts +++ b/src/modules/sample-custom-entity-graphql/hooks/afterRegistration.ts @@ -20,7 +20,7 @@ export function afterRegistration ({ Vue, config, store, isServer }) { // resolver for testentity should be implemented on the graphql server provided searchAdapter.registerEntityTypeByQuery(TEST_ENTITY_TYPE, { url: 'http://localhost:8080/graphql/', - query: require('./queries/testentity.gql'), + query: require('../queries/testentity.gql'), queryProcessor: (query) => { // function that can modify the query each time before it's being executed return query From c9851e4e1daae3dd13e221bc6d15d131b1290534 Mon Sep 17 00:00:00 2001 From: Dmitry Schegolihin Date: Sun, 10 Feb 2019 22:34:52 +0400 Subject: [PATCH 005/203] :art: Fixed exception messages. --- core/lib/search/adapter/graphql/searchAdapter.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/lib/search/adapter/graphql/searchAdapter.ts b/core/lib/search/adapter/graphql/searchAdapter.ts index d980f4096f..60346b93f2 100644 --- a/core/lib/search/adapter/graphql/searchAdapter.ts +++ b/core/lib/search/adapter/graphql/searchAdapter.ts @@ -229,7 +229,7 @@ export class SearchAdapter { if (resp.error) { throw new Error(JSON.stringify(resp.error)) } else { - throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'taxrule\'') + throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'cmsPage\'') } } } @@ -251,7 +251,7 @@ export class SearchAdapter { if (resp.error) { throw new Error(JSON.stringify(resp.error)) } else { - throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'taxrule\'') + throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'cmsBlock\'') } } } @@ -273,7 +273,7 @@ export class SearchAdapter { if (resp.error) { throw new Error(JSON.stringify(resp.error)) } else { - throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'taxrule\'') + throw new Error('Unknown error with graphQl result in resultPorcessor for entity type \'cmsHierarchy\'') } } } From 4726f12ceb2466d09277bc42619fc4818bf2f90e Mon Sep 17 00:00:00 2001 From: Ruthger Idema Date: Tue, 12 Feb 2019 10:42:30 +0100 Subject: [PATCH 006/203] [DOCS]:+ Improved configuration.md --- CHANGELOG.md | 4 ++ docs/guide/basics/configuration.md | 72 +++++++++++++++--------------- 2 files changed, 40 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93ddaa76fb..3519a8bf8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.9.0] +### Changed / Improved +- Improved configuration.md (spelling etc.) - @ruthgeridema + ## [1.8.2] - 2019.02.11 - Fixed docker-compose configuration for network_mode and TS build config - @lukeromanowicz (#2415) diff --git a/docs/guide/basics/configuration.md b/docs/guide/basics/configuration.md index 79baee740c..b119d8c93b 100644 --- a/docs/guide/basics/configuration.md +++ b/docs/guide/basics/configuration.md @@ -2,17 +2,17 @@ Vue Storefront application uses the [node-config](https://github.com/lorenwest/node-config) npm module to manage configuration files. Configuration is stored in the `/config` directory within two JSON files: -- `default.json` is a configuration file provided along with the core Vue Storefront code and updated with any new release of Vue Storefront. It contains the default values only and therefore it shoulnd't be modified within your specific Vue Storefront instance. +- `default.json` is a configuration file provided along with the core Vue Storefront code and updated with any new release of Vue Storefront. It contains the default values only and therefore it shouldn't be modified within your specific Vue Storefront instance. - `local.json` is the second configuration file which is `.gitignore`'d from repository. This is the place where you should store all instance-specific configuration variables. The structure of these files is exactly the same! Vue Storefront does kind of `Object.assign(default, local)` (but with the deep-merge). This means that the `local.json` overrides the `default.json` properties. :::tip NOTE -Please take a look at the `node-config` docs as the library is open for some other ways to modify the configuration (using for example the `ENV` variables). +Please take a look at the `node-config` docs as the library is open for some other ways to modify the configuration (using, for example the `ENV` variables). ::: :::tip NOTE -Currently, the configuration files are being processed by the webpack during the build process. This means that whenever you apply some configuration changes you shall re-build the app - even when using the `yarn dev` mode. This limitation can by however solved with VS 1.4 special config variable. Now the config can be reloaded on-fly with each server request if `config.server.dynamicConfigReload` is set to true. However, in that case the config is added to `window.**INITIAL_STATE**` with the responses. +Currently, the configuration files are being processed by the webpack during the build process. This means that whenever you apply some configuration changes you shall re-build the app - even when using the `yarn dev` mode. This limitation can by however solved with VS 1.4 special config variable. Now the config can be reloaded on-fly with each server request if `config.server.dynamicConfigReload` is set to true. However, in that case, the config is added to `window.**INITIAL_STATE**` with the responses. ::: Please find the configuration properties reference below. @@ -26,7 +26,7 @@ Please find the configuration properties reference below. }, ``` -Vue Storefront starts a HTTP server to deliver the SSR (server side rendered) pages and static assets. It's node.js server located in the `core/scripts/server.js`. This is the host name and TCP port which Vue Storefront is being bind to. +Vue Storefront starts an HTTP server to deliver the SSR (server-side rendered) pages and static assets. It's node.js server located in the `core/scripts/server.js`. This is the hostname and TCP port which Vue Storefront is binding. ## Redis @@ -69,10 +69,10 @@ Vue Storefront uses the Elastic Search Query Language to query for data. However If your `vue-storefront-api` instance is running on the `localhost`, port `8080` then the correct elasticsearch endpoint is as presented here. -Starting from Vue Storefront v1.6 user may set the: `config.elasticsearch.queryMethod` to either "POST" (default) / "GET". When "GET" is set, the ElasticSearch Query object is passed to vue-storefront-api as a request parameter named "request". By doing so Service Worker will now able to cache the results from ElasticSearch. Service Workers can not cache any POST requests currently. +Starting from Vue Storefront v1.6 user may set the: `config.elasticsearch.queryMethod` to either "POST" (default) / "GET". When "GET" is set, the ElasticSearch Query object is passed to vue-storefront-api as a request parameter named "request". By doing so Service Worker will now able to cache the results from ElasticSearch. Service Workers cannot cache any POST requests currently. :::tip Notice -Service worker is not caching the /api requests on development envs. (localhost) as the vue-storefront-api by default runs on different port (8080) +Service worker is not caching the /api requests on development envs. (localhost) as the vue-storefront-api by default runs on a different port (8080) ::: ## SSR @@ -83,7 +83,7 @@ Service worker is not caching the /api requests on development envs. (localhost) }, ``` -By default, Vue Storefront themes are created by building set of components that "mixins" the core-components. For example, you have `/src/themes/default/pages/Product.vue` which inherits the `/core/pages/Product.js` by having this core component included in the `"mixins": [Product]` section. +By default, Vue Storefront themes are created by building a set of components that "mixins" the core-components. For example, you have `/src/themes/default/pages/Product.vue` which inherits the `/core/pages/Product.js` by having this core component included in the `"mixins": [Product]` section. The SSR data is being completed in the `asyncData` static method. If this configuration parameter is set to `true` (which is default) Vue Storefront will run the `asyncData` methods in the following sequence: `core/pages/Product.js` -> `asyncData` @@ -98,7 +98,7 @@ This option is referenced in the [core/client-entry.ts](https://github.com/Divan "defaultStoreCode": "", ``` -This option is used only in the [Multistore setup](../integrations/multistore.md). By default it's `''` but if you're running for example multi-instance Vue Storefront setup and the current instance shall be connected to the `en` store on the backend - please just set it so. This config variable is referenced in the [core/store/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/lib/multistore.ts) +This option is used only in the [Multistore setup](../integrations/multistore.md). By default it's `''` but if you're running, for example, multi-instance Vue Storefront setup and the current instance shall be connected to the `en` store on the backend - please just set it so. This config variable is referenced in the [core/store/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/lib/multistore.ts) ## Store views @@ -110,7 +110,7 @@ This option is used only in the [Multistore setup](../integrations/multistore.md If the `storeViews.multistore` is set to `true` you'll see the `LanguageSwitcher.vue` included in the footer and all the [multistore operations](../integrations/multistore.md) will be included in the request flow. -You should add all the multistore codes to the `mapStoreUrlsFor` as this property is used by [core/store/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/lib/multistore.ts) -> `setupMultistoreRoutes` method to add the `//p/....` and other standard routes. By accesing them you're [instructing Vue Storefront to switch the current store](https://github.com/DivanteLtd/vue-storefront/blob/master/core/client-entry.ts) settings (i18n, api requests with specific storeCode etc...) +You should add all the multistore codes to the `mapStoreUrlsFor` as this property is used by [core/store/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/lib/multistore.ts) -> `setupMultistoreRoutes` method to add the `//p/....` and other standard routes. By accessing them you're [instructing Vue Storefront to switch the current store](https://github.com/DivanteLtd/vue-storefront/blob/master/core/client-entry.ts) settings (i18n, API requests with specific storeCode etc...) `storeViews` section contains one or more additional store views configured to serve proper i18n translations, tax settings etc. Please find the docs for this section below. @@ -141,7 +141,7 @@ This is the store name as displayed in the `Language/Switcher.vue`. "url": "/de", ``` -This URL is used only in the `Switcher` component. Typically it equals just to `/`. Sometimes you may like to have the different store views running as separate Vue Storefront instances; even under different URL addresses. This is the situation when this property comes into action. Just take a look on how [Language/Switcher.vue](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Switcher/Language.vue) generates the list of the stores. +This URL is used only in the `Switcher` component. Typically it equals just to `/`. Sometimes you may like to have different store views running as separate Vue Storefront instances; even under different URL addresses. This is the situation when this property comes into action. Just take a look at how [Language/Switcher.vue](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Switcher/Language.vue) generates the list of the stores. ```json "elasticsearch": { @@ -150,7 +150,7 @@ This URL is used only in the `Switcher` component. Typically it equals just to ` }, ``` -ElasticSearch settings can be overriden in the specific `storeView` config. You can use different ElasticSearch instance powering specific `storeView`. +ElasticSearch settings can be overridden in the specific `storeView` config. You can use different ElasticSearch instance powering specific `storeView`. ```json "tax": { @@ -197,7 +197,7 @@ This option property is referenced in the [core/store/modules/product](https://g "twoStageCaching": true, ``` -Vue Storefront caches all the data entities got from `vue-storefront-api` into indexedDB local cache. This is a key feature for providing users with the offline mode. Unfortunately, when the `entities.optimize` option is set to `true`, we cannot cache the optimized entities as they don't contain all the required information. +Vue Storefront caches all the data entities got from `vue-storefront-api` into indexedDB local cache. This is a key feature for providing users with offline mode. Unfortunately, when the `entities.optimize` option is set to `true`, we cannot cache the optimized entities as they don't contain all the required information. In such a case we're using a strategy called `twoStageCaching` which works like it executes two parallel server requests at once to get the required product, category or attribute feeds. The first request is with the limited fields and the second is for full records. Only the second request is cached **but\*\*** the first (which typically ends-up faster) is used for displaying the Category or Product page. @@ -238,7 +238,7 @@ These settings are used just to configure the optimization strategy for differen ### Dynamic Categories prefetching -Starting with Vue Storefront 1.7 we've added a configuration option `config.entities.category.categoriesDynamicPrefetch` (by default set to `true`). This option switches the way the category tree is being fetched. Previously we were fetching the full categories tree. In some cases it can generate even few MB of payload. Currently with this option in place we're pre-fetching the categories on demand while user is browsing the category tree. +Starting with Vue Storefront 1.7 we've added a configuration option `config.entities.category.categoriesDynamicPrefetch` (by default set to `true`). This option switches the way the category tree is being fetched. Previously we were fetching the full categories tree. In some cases, it can generate even a few MB of payload. Currently, with this option in place, we're pre-fetching the categories on demand while the user is browsing the category tree. ## Cart @@ -247,7 +247,7 @@ Starting with Vue Storefront 1.7 we've added a configuration option `config.enti "bypassCartLoaderForAuthorizedUsers": true,, ``` -The cart loader bypass feature is there because we're posting orders to Magento asynchronously - it may happen that directly after placing an order, the Magento’s user still have the same quote id and after browsing thrpugh VS Store old items will be restored to the shopping cart. Now uou can disable this behaviour by setting `bypassCartLoaderForAuthorizedUsers` option to `false` +The cart loader bypass feature is there because we're posting orders to Magento asynchronously - it may happen that directly after placing an order, the Magento’s user still have the same quote id and after browsing through VS Store old items will be restored to the shopping cart. Now you can disable this behavior by setting `bypassCartLoaderForAuthorizedUsers` option to `false` ```json "cart": { @@ -266,7 +266,7 @@ EventBus.$emit('servercart-after-diff', { }); // send the difflog ``` -In the event handler one can handle the merge process manually - for example displaying the proper information to the user before the real merge takes place. +In the event handler, one can handle the merge process manually - for example displaying the proper information to the user before the real merge takes place. Please have a look at the [core/store/modules/cart](https://github.com/DivanteLtd/vue-storefront/tree/master/core/store/modules/cart) for a reference. @@ -274,7 +274,7 @@ Please have a look at the [core/store/modules/cart](https://github.com/DivanteLt "synchronize": true, ``` -If it's set to `true` the `serverPull` Vuex method will be executed whenever user adds, removes or edits any product in the shopping cart. This method syncs the client's side shopping cart with the server side one. +If it's set to `true` the `serverPull` Vuex method will be executed whenever the user adds, removes or edits any product in the shopping cart. This method syncs the client's side shopping cart with the server side one. Please take a look at the [core/store/modules/cart](https://github.com/DivanteLtd/vue-storefront/tree/master/core/store/modules/cart) for a reference. @@ -282,7 +282,7 @@ Please take a look at the [core/store/modules/cart](https://github.com/DivanteLt "synchronize_totals": true, ``` -Similarly to the `synchronize` option you may want to disable or enable (the default behaviour) the shopping cart totals sync with the backend platform. If it's set to `true`, the shopping cart totals will be overriden by the Magento, Pimcore or any other platform you're using totals whenever user will add, remove or change any item in the shopping cart. +Similarly to the `synchronize` option, you may want to disable or enable (the default behavior) the shopping cart totals sync with the backend platform. If it's set to `true`, the shopping cart totals will be overridden by the Magento, Pimcore or any other platform you're using totals whenever user will add, remove or change any item in the shopping cart. ```json "setCustomProductOptions": true, @@ -294,13 +294,13 @@ If this option is set to `true`, in case of custom-options supporting products, "setConfigurableProductOptions": true, ``` -If this option is set to `true`, in case of configurable products, Vue Storefront will add the main SKU to the shopping cart and set the `product_option` sub-object of the shopping cart item to currently configured set of configurable options (for example color and size). Otherwise the simple product (accordingly to the selected configurable_options) will be added to the shopping cart instead. +If this option is set to `true`, in case of configurable products, Vue Storefront will add the main SKU to the shopping cart and set the `product_option` sub-object of the shopping cart item to currently configured set of configurable options (for example color and size). Otherwise, the simple product (accordingly to the selected configurable_options) will be added to the shopping cart instead. ```json "displayItemDiscounts": true ``` -If this option is set to `true`, Vue Storefront will add use price item with discount to the shopping cart. Otherwise the product price and special will be added to the shopping cart instead. +If this option is set to `true`, Vue Storefront will add use price item with a discount to the shopping cart. Otherwise, the product price and special will be added to the shopping cart instead. ```json "create_endpoint": "http://localhost:8080/api/cart/create?token={{token}}", @@ -316,7 +316,7 @@ If this option is set to `true`, Vue Storefront will add use price item with dis "applycoupon_endpoint": "http://localhost:8080/api/cart/apply-coupon?token={{token}}&cartId={{cartId}}&coupon={{coupon}}" ``` -These endpoints should point to the `vue-storefront-api` instance and typically you're changing just the domain-name/base-url without touching the specific endpoint urls as it's related to the `vue-storefront-api` specifics. +These endpoints should point to the `vue-storefront-api` instance and typically you're changing just the domain-name/base-url without touching the specific endpoint URLs as it's related to the `vue-storefront-api` specifics. ## Products @@ -325,16 +325,16 @@ These endpoints should point to the `vue-storefront-api` instance and typically "useShortCatalogUrls": false, ``` -When this option is set to `true`, Vue Storefront will use the alternative routing for products and categories - without the `/p/` and `/c/` prefixes. it may be useful for the Search Engine Optimization purposes. +When this option is set to `true`, Vue Storefront will use the alternative routing for products and categories - without the `/p/` and `/c/` prefixes. it may be useful for Search Engine Optimization purposes. ```json "useMagentoUrlKeys": false, ``` -When `useMagentoUrlKeys` is set to `true` the `product.url_key` value will be used for product and category slugs used in the URL building process. Otherwise the slug will be generated based on the product or category name. +When `useMagentoUrlKeys` is set to `true` the `product.url_key` value will be used for product and category slugs used in the URL building process. Otherwise, the slug will be generated based on the product or category name. Please take a look at the [core/store/lib/search.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/store/lib/search.ts) and [core/store/modules/category/mutations.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/store/modules/category/mutations.ts) for reference -**Please note:** As `url_key` field must be unique across categories collection. Therefore - we're by default generating it's value based on name + category id. Please [switch this option off](https://github.com/DivanteLtd/mage2vuestorefront/#initial-vue-storefront-import) if You'd like to keep the `url_key` as they come from Magento2. +**Please note:** As `url_key` field must be unique across categories collection. Therefore - we're by default generating its value based on name + category id. Please [switch this option off](https://github.com/DivanteLtd/mage2vuestorefront/#initial-vue-storefront-import) if You'd like to keep the `url_key` as they come from Magento2. ```json "configurableChildrenStockPrefetchStatic": false, @@ -347,25 +347,25 @@ Vue Storefront tries to dynamically get the stock quantities for simple products "configurableChildrenStockPrefetchDynamic": false, ``` -In opposite to the static prefetching Vue Storefront could also prefetch the `configurable_children` stock items just for the products that are visible on the category Page. This option is used from the theme level - for example [src/themes/default/pages/Category.vue](https://github.com/DivanteLtd/vue-storefront/tree/master/src/themes/default/pages/Category.vue) +In opposite to the static prefetching Vue Storefront could also prefetch the `configurable_children` stock items just for the products that are visible on the Category page. This option is used from the theme level - for example [src/themes/default/pages/Category.vue](https://github.com/DivanteLtd/vue-storefront/tree/master/src/themes/default/pages/Category.vue) ```json "filterUnavailableVariants": false, ``` -By default Vue Storefront displays all the variants assigned with the configurable product, no matter if they are visible or not. Then by adding specific variant to the shopping cart the availability is being checked. You can switch this setting to `true` to prefetch the variants availability (see the options described above) and hide unavailable options. +By default, Vue Storefront displays all the variants assigned with the configurable product, no matter if they are visible or not. Then by adding specific variant to the shopping cart the availability is being checked. You can switch this setting to `true` to prefetch the variants availability (see the options described above) and hide unavailable options. ```json "listOutOfStockProducts": false, ``` -By default Vue Storefront is not displaying products with the stock availability = 'Out of the stock'. However it can be changed using this variable. Vue Storefront uses the `product.stock` object to access the product information availability. Please note that this information is updated just when the `mage2vuestorefront` updates the ElasticSearch index. +By default, Vue Storefront is not displaying products with the stock availability = 'Out of the stock'. However it can be changed using this variable. Vue Storefront uses the `product.stock` object to access the product information availability. Please note that this information is updated just when the `mage2vuestorefront` updates the ElasticSearch index. ```json "preventConfigurableChildrenDirectAccess": true, ``` -If this option is set to true (default) Vue Storefront will prevent accessing the simple products assigned with the configurable one. User will be redirected to the main configurable product in such a case. +If this option is set to true (default) Vue Storefront will prevent accessing the simple products assigned with the configurable one. A user will be redirected to the main configurable product in such a case. ```json "alwaysSyncPlatformPricesOver": false, @@ -377,7 +377,7 @@ This property is used in the [core/store/modules/product/actions.ts](https://git "clearPricesBeforePlatformSync": false, ``` -This is related to `alwaysSyncPlatformPricesOver` and whet it's set to true, the prices provided from the ElasticSearch will be always overriden to zero before rendering the dynamic prices. +This is related to `alwaysSyncPlatformPricesOver` and what it's set to true, the prices provided from the ElasticSearch will be always overridden to zero before rendering the dynamic prices. ```json "waitForPlatformSync": false, @@ -389,7 +389,7 @@ This is related to `alwaysSyncPlatformPricesOver`. When true, Vue Storefront wil "setupVariantByAttributeCode": true, ``` -This is a deprecated value - when set to false, Vue Storefront will be using `slugify(attribute.name)` instead of `attribute.attribute_code` to construct filter and product configurators. It was provided to maintain the backwards compatibility with some platforms that didn't provide the `attribute_code` property. Currently not used. +This is a deprecated value - when set to false, Vue Storefront will be using `slugify(attribute.name)` instead of `attribute.attribute_code` to construct filter and product configurators. It was provided to maintain the backward compatibility with some platforms that didn't provide the `attribute_code` property. Currently not used. ```json "endpoint": "http://localhost:8080/api/product", @@ -455,7 +455,7 @@ This property sets the URL of the order endpoint. Orders will be placed to this }, ``` -This is simple map used in the [core/pages/Checkout.js](https://github.com/DivanteLtd/vue-storefront/tree/master/core/pages/Checkout.js) to map the payment methods provided by the backend service with the ones available to the Vue Storefront. Each payment method is a separate Vue Storefront extension and not all methods provided by the backend should necessarily be supported by the frontend. +This is a simple map used in the [core/pages/Checkout.js](https://github.com/DivanteLtd/vue-storefront/tree/master/core/pages/Checkout.js) to map the payment methods provided by the backend service with the ones available to the Vue Storefront. Each payment method is a separate Vue Storefront extension and not all methods provided by the backend should necessarily be supported by the frontend. ```json "offline_orders": { @@ -468,11 +468,11 @@ This is simple map used in the [core/pages/Checkout.js](https://github.com/Divan } ``` -When user places the order in the Offline mode and agrees to receive push notifications, these variables are used to determine the look and feel of the notification. +When a user places the order in the Offline mode and agrees to receive push notifications, these variables are used to determine the look and feel of the notification. Please check the [core/service-worker/order.js](https://github.com/DivanteLtd/vue-storefront/tree/master/core/service-worker/order.js) for reference -Starting with Vue Storefront v1.6 we changed the default order-placing behaviour. Currently the `config.orders.directBackendSync` is set to `true` be default. With this option enabled - if the user is online, Vue Storefront tries to pass the order immediately and synchronously (waiting for result) to the eCommerce backend. This option gives immediate and direct feedback to the user. If there is an app-level error (for example validation error on Magento side) user will be notified immediately. If there is transmission issue (no connection, servers are down etc) the order is being put into queue (as it was prior to 1.6). If `config.orders.directBackendSync` is set to false - then the legacy behaviour with queuing all the orders is being used. With `directBackendSync` set to true we do have access to the server confirmation (with backend orderId) in `store.state.order.last_order_confirmation` +Starting with Vue Storefront v1.6 we changed the default order-placing behavior. Currently the `config.orders.directBackendSync` is set to `true` by default. With this option enabled - if the user is online, Vue Storefront tries to pass the order immediately and synchronously (waiting for result) to the eCommerce backend. This option gives immediate and direct feedback to the user. If there is an app-level error (for example validation error on Magento side) the user will be notified immediately. If there is transmission issue (no connection, servers are down etc) the order is being put into a queue (as it was prior to 1.6). If `config.orders.directBackendSync` is set to false - then the legacy behavior with queuing all the orders are being used. With `directBackendSync` set to true we do have access to the server confirmation (with backend orderId) in `store.state.order.last_order_confirmation` ## Local Forage @@ -497,7 +497,7 @@ Starting with Vue Storefront v1.6 we changed the default order-placing behaviour }, ``` -We're using [localForage](https://github.com/localForage/localForage) library for provide the persistance layer to Vue Storefront. `localForage` is great as it provides the compatibility fallbacks for the users not equipped with some specific storage methods (for example indexedDb). However, we may want to enforce some specific storage methods in the config. This is the place to set it up. +We're using [localForage](https://github.com/localForage/localForage) library to providing the persistence layer to Vue Storefront. `localForage` is great as it provides the compatibility fallbacks for the users not equipped with some specific storage methods (for example indexedDb). However, we may want to enforce some specific storage methods in the config. This is the place to set it up. ## Users @@ -515,7 +515,7 @@ We're using [localForage](https://github.com/localForage/localForage) library fo }, ``` -In the `users` section we can set the API endpoints for specific use-related operations. Most of the times you need just to change the basic url. +In the `users` section, we can set the API endpoints for specific use-related operations. Most of the times you need just to change the basic URL. When the `autoRefreshTokens` property is set to `true` (default) Vue Storefront will be trying to refresh the user tokens automatically when the session ends up. Please take a look at the [core/lib/sync/task.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/lib/sync/task.ts) for reference. @@ -540,7 +540,7 @@ The `stock` section configures how the Vue Storefront behaves **just when** the }, ``` -This section is to set the default base url of product images. This should be a `vue-storefront-api` url - pointing to it's `/api/img` handler. Vue Storefront API is in charge of downloading the local image cache from the Magento/Pimcore backend and do the resize/crop/scale operations to optimize the images for mobile devices and the UI. +This section is to set the default base URL of product images. This should be a `vue-storefront-api` URL - pointing to it's `/api/img` handler. Vue Storefront API is in charge of downloading the local image cache from the Magento/Pimcore backend and does the resize/crop/scale operations to optimize the images for mobile devices and the UI. ## Install @@ -678,7 +678,7 @@ When set to `true` we're using Magento2 feature of tiered prices (individual pri "useZeroPriceProduct": true, ``` -Set to `true` if you want customer can add products with price zero to cart, otherwise an error is returned. Set true by default +Set to `true` if you want customer can add products with price zero to cart, otherwise, an error is returned. Set true by default ## Boost From aba6dfe22e53f58fd17b10e7527de7a6870bc2fe Mon Sep 17 00:00:00 2001 From: Ruthger Idema Date: Tue, 12 Feb 2019 12:13:38 +0100 Subject: [PATCH 007/203] [DOCS]:+ Updated spelling & grammar --- CHANGELOG.md | 4 + docs/guide/basics/configuration.md | 6 +- docs/guide/basics/contributing.md | 12 +-- docs/guide/basics/e2e.md | 4 +- docs/guide/basics/feature-list.md | 12 +-- docs/guide/basics/graphql.md | 2 +- docs/guide/basics/project-structure.md | 4 +- docs/guide/basics/recipes.md | 34 ++++---- docs/guide/basics/ssr-cache.md | 8 +- docs/guide/basics/typescript.md | 12 +-- docs/guide/components/category-page.md | 12 +-- docs/guide/components/events-list.md | 2 +- docs/guide/components/home-page.md | 4 +- docs/guide/components/modal.md | 4 +- docs/guide/components/product.md | 18 ++--- docs/guide/core-themes/core-components-api.md | 78 +++++++++---------- docs/guide/core-themes/core-components.md | 8 +- docs/guide/core-themes/layouts.md | 14 ++-- docs/guide/core-themes/plugins.md | 6 +- docs/guide/core-themes/service-workers.md | 6 +- docs/guide/core-themes/stylesheets.md | 18 ++--- docs/guide/core-themes/themes.md | 10 +-- docs/guide/core-themes/translations.md | 6 +- docs/guide/core-themes/ui-store.md | 4 +- docs/guide/core-themes/webpack.md | 16 ++-- docs/guide/data/data-migrations.md | 2 +- docs/guide/data/data.md | 10 +-- docs/guide/installation/linux-mac.md | 4 +- docs/guide/installation/magento.md | 8 +- docs/guide/installation/production-setup.md | 20 ++--- docs/guide/installation/windows.md | 8 +- docs/guide/integrations/multistore.md | 8 +- docs/guide/integrations/totals-sync.md | 2 +- docs/guide/modules/catalog.md | 2 +- docs/guide/modules/introduction.md | 2 +- docs/guide/vuex/attribute-store.md | 2 +- docs/guide/vuex/product-store.md | 2 +- 37 files changed, 189 insertions(+), 185 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 93ddaa76fb..d6b9e5830a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.9.0] +### Changed / Improved +- Updated docs (spelling & grammar) - @ruthgeridema + ## [1.8.2] - 2019.02.11 - Fixed docker-compose configuration for network_mode and TS build config - @lukeromanowicz (#2415) diff --git a/docs/guide/basics/configuration.md b/docs/guide/basics/configuration.md index 79baee740c..b13fef942e 100644 --- a/docs/guide/basics/configuration.md +++ b/docs/guide/basics/configuration.md @@ -150,7 +150,7 @@ This URL is used only in the `Switcher` component. Typically it equals just to ` }, ``` -ElasticSearch settings can be overriden in the specific `storeView` config. You can use different ElasticSearch instance powering specific `storeView`. +ElasticSearch settings can be overridden in the specific `storeView` config. You can use different ElasticSearch instance powering specific `storeView`. ```json "tax": { @@ -282,7 +282,7 @@ Please take a look at the [core/store/modules/cart](https://github.com/DivanteLt "synchronize_totals": true, ``` -Similarly to the `synchronize` option you may want to disable or enable (the default behaviour) the shopping cart totals sync with the backend platform. If it's set to `true`, the shopping cart totals will be overriden by the Magento, Pimcore or any other platform you're using totals whenever user will add, remove or change any item in the shopping cart. +Similarly to the `synchronize` option you may want to disable or enable (the default behaviour) the shopping cart totals sync with the backend platform. If it's set to `true`, the shopping cart totals will be overridden by the Magento, Pimcore or any other platform you're using totals whenever user will add, remove or change any item in the shopping cart. ```json "setCustomProductOptions": true, @@ -377,7 +377,7 @@ This property is used in the [core/store/modules/product/actions.ts](https://git "clearPricesBeforePlatformSync": false, ``` -This is related to `alwaysSyncPlatformPricesOver` and whet it's set to true, the prices provided from the ElasticSearch will be always overriden to zero before rendering the dynamic prices. +This is related to `alwaysSyncPlatformPricesOver` and whet it's set to true, the prices provided from the ElasticSearch will be always overridden to zero before rendering the dynamic prices. ```json "waitForPlatformSync": false, diff --git a/docs/guide/basics/contributing.md b/docs/guide/basics/contributing.md index 3f0bca4e53..27920261d4 100644 --- a/docs/guide/basics/contributing.md +++ b/docs/guide/basics/contributing.md @@ -6,7 +6,7 @@ Thank you for your interest in, and engagement! ## Branches -You should fork the project or create branch for new features.The main branches used by the core team are: +You should fork the project or create a branch for new features. The main branches used by the core team are: - `master` - where we store the stable release of the app (that can be deployed to our demo instances), - `develop` - the most recent version of the app - kind of "nightly" build. @@ -15,14 +15,14 @@ Please use `develop` for development purposes as the `master` can be merged just ## Issue reporting guidelines -Always define type of issue: +Always define the type of issue: - Bug report - Feature request While writing issues, please be as specific as possible. All requests regarding support with implementation or application setup should be sent to [contributors@vuestorefront.io](mailto:contributors@vuestorefront.io) -If the issue is about some changes with particular theme, please prefix the issue with theme name (ex. `[default] change product tile background color`). +If the issue is about some changes with a particular theme, please prefix the issue with theme name (ex. `[default] change product tile background color`). ## TypeScript @@ -31,9 +31,9 @@ Here are some thoughts on how to use TS features in Vue Storefront: [TypeScript ## Pull request checklist -Here’s how to submit a pull request. **Pull request that dont meet this requirements will not be merged**. +Here’s how to submit a pull request. **Pull request that don't meet this requirements will not be merged**. -:::warning +::: warning **ALWAYS** use [Pull Request template](https://github.com/DivanteLtd/vue-storefront/blob/master/PULL_REQUEST_TEMPLATE.md), it's automatically added to each PR. ::: @@ -45,7 +45,7 @@ Here’s how to submit a pull request. **Pull request that dont meet this requir 3. Describe what you've changed. Include screenshots of the new feature or the before and after if your changes include differences in HTML/CSS. Drag and drop the images into the body of your pull request. 4. Reference any relevant issues or supporting documentation in your PR (ex. `Issue: 39. Issue title.`). -5. If you are adding new feature, please provide documentation along with the PR. Also add it to [upgrade notes](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Upgrade%20notes.md) +5. If you are adding a new feature, please provide documentation along with the PR. Also, add it to [upgrade notes](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Upgrade%20notes.md) 6. If you are removing/renaming something or changing its behavior, please also include it in [upgrade notes](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Upgrade%20notes.md) 7. Test your changes! Run your changes against any existing tests and create new ones when needed. Make sure your changes don’t break the existing project. Make sure that your branch is passing Travis CI build. 8. If you have found a potential security vulnerability, please _do not_ report it on the public issue tracker. Instead, send it to us at [contributors@vuestorefront.io](mailto:contributors@vuestorefront.io). We will work with you to verify and fix it as soon as possible. diff --git a/docs/guide/basics/e2e.md b/docs/guide/basics/e2e.md index 7ec1a2009a..e96ddc6c7e 100644 --- a/docs/guide/basics/e2e.md +++ b/docs/guide/basics/e2e.md @@ -10,6 +10,6 @@ To open cypress just run: `yarn test:e2e` -To run all test in background: +To run all test in the background: -`yarn test:e2e:ci` +`yarn test:e2e:ci` \ No newline at end of file diff --git a/docs/guide/basics/feature-list.md b/docs/guide/basics/feature-list.md index 4a5ac8118f..0c2c396681 100644 --- a/docs/guide/basics/feature-list.md +++ b/docs/guide/basics/feature-list.md @@ -1,6 +1,6 @@ # Feature list -Vue Storefront is Platform Agnostic Headless Frontend for eCommerce. Here we tried to put all the features available in 1.0 alltogether: +Vue Storefront is Platform Agnostic Headless Frontend for eCommerce. Here we tried to put all the features available in 1.0 altogether: ## Vue Storefront unique features @@ -62,7 +62,7 @@ Vue Storefront is Platform Agnostic Headless Frontend for eCommerce. Here we tri - Bundled Products Options - Customer Group Pricing - New Items Promotional Tool -- On Page Upsells and Cross Sells +- On Page Upsells and Cross-Sells - Wishlist Management ### Order Management @@ -72,8 +72,8 @@ Standard Magento2 features - all supported: - View, edit, create and fulfill orders from admin panel - Create one or multiple invoices, shipments and credit memos per order to allow for split fulfillment - Print invoices and packing slips -- Call Center (phone) order creation - includes ability to create new customer, or select existing customer and view - shopping cart, wishlist, last ordered items, and compared products list, as well as select addresses, give discounts and assign custom prices -- Create re-orders for customers from administration panel +- Call Center (phone) order creation - includes ability to create a new customer, or select existing customer and view - shopping cart, wishlist, last ordered items, and compared products list, as well as select addresses, give discounts and assign custom prices +- Create re-orders for customers from the administration panel - Email Notifications of Orders - RSS feed of New Orders @@ -98,12 +98,12 @@ Standard Magento2 features - all supported: ### Catalog Management Support -- Inventory Management with Backordered items, Minimum and Maximum quantities +- Inventory Management with Backordered items, Minimum, and Maximum quantities - Simple, Configurable (e.g. size, color, etc.), Bundled and Grouped Products - Virtual Products - Downloadable/Digital Products - Available via customization: Customer Personalized Products – upload text for embroidery, monogramming, etc. -- Tax Rates per location, customer group and product type +- Tax Rates per location, customer group, and product type - Attribute Sets for quick product creation of different item types - Create Store-specific attributes on the fly - Media Manager with automatic image resizing and watermarking diff --git a/docs/guide/basics/graphql.md b/docs/guide/basics/graphql.md index 098b90e768..e87f512683 100644 --- a/docs/guide/basics/graphql.md +++ b/docs/guide/basics/graphql.md @@ -11,7 +11,7 @@ We've introduced an abstract [`SearchQuery`](https://github.com/DivanteLtd/vue-s From now on the **bodybuilder** package is **deprecated** and you should start using the `SearchQuery` interface to build the search queries that will be translated to GraphQL / API queries. -Here is an example on how to build the Query: +Here is an example of how to build the Query: ```js export function prepareRelatedQuery(key, sku) { diff --git a/docs/guide/basics/project-structure.md b/docs/guide/basics/project-structure.md index 2cf2cc0034..81e7d5bf16 100644 --- a/docs/guide/basics/project-structure.md +++ b/docs/guide/basics/project-structure.md @@ -2,13 +2,13 @@ ## Using git for custom development -One of the options is to do kind of a fork - or just to get the whole repo to your Git service. Then if you like to do some VS updates, you will probably need to just pull the changes from our origins. Another option will be available as soon as we manage to separate the core as a npm module +One of the options is to do kind of a fork - or just to get the whole repo to your Git service. Then if you like to do some VS updates, you will probably need to just pull the changes from our origins. Another option will be available as soon as we manage to separate the core as an npm module ## Structure details Below you can find the Vue Storefront project structure with explanations and corresponding docs. This is a good place to start with the project. -- `config` - Config files for vue storefront. They're used to define backend addresses, current theme etc. +- `config` - Config files for Vue Storefront. They're used to define backend addresses, current theme etc. - `default.json` - Default config template which should never be changed. If you want to make some changes in config create `local.json` file in the same folder, copy the content and make changes here. Default `config.json` will be overwritten by `local.json` for your setup. - `local.json` (optional) - your custom Vue Storefront config. You can find a detailed description of all config file properties in the [Vue Storefront configuration chapter](configuration.md). - `core` - Vue Storefront core diff --git a/docs/guide/basics/recipes.md b/docs/guide/basics/recipes.md index 23197e84e0..56d48bafd2 100644 --- a/docs/guide/basics/recipes.md +++ b/docs/guide/basics/recipes.md @@ -58,9 +58,9 @@ Please also check the [Database tool](https://github.com/DivanteLtd/vue-storefro ## What's the recommended way to use git on custom development One of the options is to do kind of fork - or just to get the whole repo to your Git service. -Then if you like to do some VS updates you probably need to just pull the changes from our origins. Another option will be available as soon as we manage to separate the core as a npm module +Then if you like to do some VS updates you probably need to just pull the changes from our origins. Another option will be available as soon as we manage to separate the core as an npm module -## How to add custom configurable attributes to Product page +## How to add custom configurable attributes to the Product page Where can we add filters and extra configurable options for the products? For example, I've just added an iPhone X as an example. And I want to add the storage as an option. @@ -98,7 +98,7 @@ To do so, you need to modify the theme, changing the following snippet: You must add UI controls for additional configurable attributes. -## Product name changed to SKU when adding to cart / on product page +## Product name changed to SKU when adding to cart / on the product page By default, when the user selects any specific product variant on the `Product.vue` page for `configurable` products - the title, picture, price and other attributes are changed to corresponding `simple` one (within `product.configurable_children`). If in the Magento panel the product names of the variants are set to SKU or anything else, then the correct behavior is that the product name change to it when selects variant. @@ -121,7 +121,7 @@ To correct this behavior you can: After following the Tutorial on [how to connect to Magento2](../installation/magento.md) the prices are updated just after manually running [mage2vuestorefront cli command](https://github.com/DivanteLtd/mage2vuestorefront). -However there is an option to get the prices dynamically. To do so you must change the config inside `conf/local.json` from the default (`conf/default.json`): +However, there is an option to get the prices dynamically. To do so you must change the config inside `conf/local.json` from the default (`conf/default.json`): ```json "products": { @@ -145,8 +145,8 @@ to: }, ``` -To make it work you need have Magento2 oauth keys configured in your `vue-storefront-api` - `conf/local.json`. -This change means that each time product list will be displayed, VS will get fresh prices directly from Magento without the need to re-index ElasticSearch. +To make it work you need have Magento2 Oauth keys configured in your `vue-storefront-api` - `conf/local.json`. +This change means that each time the product list will be displayed, VS will get fresh prices directly from Magento without the need to re-index ElasticSearch. ## No products found! after node --harmony cli.js fullreindex @@ -175,7 +175,7 @@ To display the proper prices and totals after Magento calculates all the discoun To make it work you need have Magento2 oauth keys configured in your `vue-storefront-api` - `conf/local.json`. -After this change you need to restart the `yarn dev` command to take the config changes into consideration by the VS. All the cart actions (add to cart, remove from cart, modify the qty) are now synchronized directly with Magento2 - for both: guest and logged in clients. +After this change, you need to restart the `yarn dev` command to take the config changes into consideration by the VS. All the cart actions (add to cart, remove from cart, modify the qty) are now synchronized directly with Magento2 - for both: guest and logged in clients. ## How to prevent an error "Can’t build storefront npm" @@ -191,11 +191,11 @@ npm run installer ## How to integrate 3rd party platform? Do you think it could be used with a legacy bespoke PHP eCommerce? -Yes I believe it could. You should expose the API accordingly to our [spec](../extensions/extending-api.md) and the second step is to [create a data bridge](https://medium.com/@piotrkarwatka/how-to-connect-3rd-party-platform-to-vue-storefront-df9cb30779f6) to fill out the ElasticSearch with the current catalog data. +Yes, I believe it could. You should expose the API accordingly to our [spec](../extensions/extending-api.md) and the second step is to [create a data bridge](https://medium.com/@piotrkarwatka/how-to-connect-3rd-party-platform-to-vue-storefront-df9cb30779f6) to fill out the ElasticSearch with the current catalog data. ## Is there any documentation on integrating payment gateways? -We're working on kind of boilerplate for payment modules. Right now please just take a look at a [live example](https://github.com/develodesign/vue-storefront-stripe) and try to follow the design patterns from there. The task where boilerplate + docs will show up is: [https://github.com/DivanteLtd/vue-storefront/issues/923](https://github.com/DivanteLtd/vue-storefront/issues/923). +We're working on kind of boilerplate for payment modules. Right now please just take a look at a [live example](https://github.com/develodesign/vue-storefront-stripe) and try to follow the design patterns from there. The task where boilerplate + docs will show up is [https://github.com/DivanteLtd/vue-storefront/issues/923](https://github.com/DivanteLtd/vue-storefront/issues/923). ## Is there any internationalization support? @@ -205,7 +205,7 @@ The currency is set in the `local.json` configuration file and it's (along with ## If 10k products are on the site will it create a high bandwidth download when you navigate on the site for the first time on a mobile device -Not necessarily. Vue Storefront is caching products from the categories browsed. This is default solution which can be changed by modifying `core/store/lib/search.js` +Not necessarily. Vue Storefront is caching products from the categories browsed. This is the default solution which can be changed by modifying `core/store/lib/search.js` ## How to add/remove/change field types in the ElasticSearch schema @@ -221,7 +221,7 @@ Unfortunately, Magento extensions are not compliant with any PWA available solut If the extensions are not playing with the User Interface, probably they will work with VS out of the box, as we're using the standard Magento2 API calls for the integration part. -## How to support Multistore / Multiwebsite setup +## How to support Multistore / Multi website setup Please check the [Multistore setup](../integrations/multistore.md) guide for details @@ -229,9 +229,9 @@ Please check the [Multistore setup](../integrations/multistore.md) guide for det If you would like to have a Category filter working with configurable products, you need to expand the `product.configurable_children.attrName` to `product.attrName_options` array. This is automatically done by [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) for all attributes set as `product.configurable_options` (by default: color, size). If you like to add additional fields like `manufacturer` to the filters, you need to expand `product.manufacturer_options` field. The easiest way to do so is to set `config.product.expandConfigurableFilters` to `['manufacturer']` and re-run the `mage2vuestorefront` indexer. -## How to redirect original Magento2 urls to Vue Storefront +## How to redirect original Magento2 URLs to Vue Storefront -There is a SEO redirects generator for nginx -> `https://serverfault.com/a/441517` available within the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api/commit/2c7e10b4c4294f222f7a1aae96627d6a0e23f30e). Now you can generate SEO map redirecting users from the original Magento urls to Vue Storefront URLs by running: +There is an SEO redirects generator for NGINX -> `https://serverfault.com/a/441517` available within the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api/commit/2c7e10b4c4294f222f7a1aae96627d6a0e23f30e). Now you can generate SEO map redirecting users from the original Magento URLs to Vue Storefront URLs by running: ```bash npm run seo redirects — —oldFormat=true | false @@ -239,9 +239,9 @@ npm run seo redirects — —oldFormat=true | false - `oldFormat` - should be set accordingly to the `vue-storefront/config/local.json` setting of `products.useShortCatalogUrls` (`oldFormat` = `!useShortCatalogUrls`) -Please make sure that `vue-storefront/config/local.json` setting of `useMagentoUrlKeys` is set to `true` and you have ElasticSearch synchronized with the Magento2 instance using current version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront). +Please make sure that `vue-storefront/config/local.json` setting of `useMagentoUrlKeys` is set to `true` and you have ElasticSearch synchronized with the Magento2 instance using the current version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront). -**Please note:** As `url_key` field must be unique across categories collection. Therefore - we're by default generating it's value based on name + category id. Please [switch this option off](https://github.com/DivanteLtd/mage2vuestorefront/#initial-vue-storefront-import) if You'd like to keep the `url_key` as they come from Magento2. +**Please note:** As `url_key` field must be unique across categories collection. Therefore - we're by default generating its value based on name + category id. Please [switch this option off](https://github.com/DivanteLtd/mage2vuestorefront/#initial-vue-storefront-import) if You'd like to keep the `url_key` as they come from Magento2. ## You need to choose options for your item message when hit API for add to cart a configurable product @@ -259,11 +259,11 @@ And then You can use proper controls for each individual filter [here](https://g ## Collecting all VSF i18n phrases into a CSV. -It might be very time consuming to translate the whole project to a foreign language. A good start is to properly collect all i18n phrases into a CSV file. The following line of bash code, would get the job done (a pipe-separated CSV file named i18n.csv would be created, adjust accordingly to your needs). +It might be very time consuming to translate the whole project into a foreign language. A good start is to properly collect all i18n phrases into a CSV file. The following line of bash code would get the job done (a pipe-separated CSV file named i18n.csv would be created, adjust accordingly to your needs). Execute the following line on your project's root folder: ```grep --include \*.js --include \*.vue -nrw ./ -e 'i18n.t(' -e '$t(' -h | grep -o -P "(?<=t\(\').*(?=\'\))" | awk -F"'" -v OFS='|' '{ print $1,$1 }' > i18n.csv``` -The code basically looks into into all project files for all ```i18n.t('some string')``` and ```$t('some string') ``` occurences, parses an extracts the quoted tdxt of each occurence, and saves it into a pipe-separated CSV file, which you might help you to get your missing translations. +The code basically looks into all project files for all ```i18n.t('some string')``` and ```$t('some string') ``` occurrences, parses an extracts the quoted text of each occurrence, and saves it into a pipe-separated CSV file, which you might help you to get your missing translations. diff --git a/docs/guide/basics/ssr-cache.md b/docs/guide/basics/ssr-cache.md index 44258afb7e..5ebfa5aee7 100644 --- a/docs/guide/basics/ssr-cache.md +++ b/docs/guide/basics/ssr-cache.md @@ -1,6 +1,6 @@ # SSR Cache -Vue Storefront generates the Server Side rendered pages to improve the SEO results. In the latest version of Vue Storefront we've added the Output cache option (disabled by default) to improve performance. +Vue Storefront generates the Server Side rendered pages to improve the SEO results. In the latest version of Vue Storefront, we've added the Output cache option (disabled by default) to improve performance. The output cache is set by the following `config/local.json` variables: @@ -41,13 +41,13 @@ The tags can be used to invalidate the Varnish cache if you're using it. [Read m If both `useOutputCache` and `useOutputCacheTagging` options are set to `true` - Vue Storefront is using Output Cache stored in Redis (configured in the `redis` section of the config file). Cache is tagged with Dynamic tags and can be invalidated using a special webhook: -Example call to clear all pages containing specific product and category: +An example call to clear all pages containing specific product and category: ```bash curl http://localhost:3000/invalidate?tag=P1852,C20 ``` -Example call to clear all product, category and home pages: +An example call to clear all product, category and homepages: ```bash curl http://localhost:3000/invalidate?tag=product,category,home @@ -70,7 +70,7 @@ npm run cache clear -- --tag=* Available tag keys are set in the `config.server.availableCacheTags` (by default: `"product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C"`) -**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) supports output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on specific page). Mage2vuestorefront can invalidate cache of a product and category pages if you set the following ENV variables: +**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) supports output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on a specific page). Mage2vuestorefront can invalidate the cache of a product and category pages if you set the following ENV variables: ```bash export VS_INVALIDATE_CACHE_URL=http://localhost:3000/invalidate?key=SECRETKEY&tag= diff --git a/docs/guide/basics/typescript.md b/docs/guide/basics/typescript.md index 53d3c9b769..eb590840c7 100644 --- a/docs/guide/basics/typescript.md +++ b/docs/guide/basics/typescript.md @@ -2,15 +2,15 @@ We've started adding the TypeScript support to Vue Storefront - mostly because of the following reasons: -- developer convenience (intellisense support in the IDEs) +- developer convenience (IntelliSense support in the IDEs) - types safety and code-testability - making Vue Storefront code base easier to understand for newcomers. ## Desired state -**Type Script is for internal implementation only. Does NOT affect ES users, but should improve TS integration for TS users.** +**TypeScript is for internal implementation only. Does NOT affect ES users, but should improve TS integration for TS users.** -Desired state is that Vue Storefront Core outputs JS libraries, it's written using some TypeScript features, but all the user code (themes, extensions) is still JavaScript. No TypeScript experience is required to build Vue Storefront stores. **This is just for core developers and transparent to the end users.** +The desired state is that Vue Storefront Core outputs JS libraries, it's written using some TypeScript features, but all the user code (themes, extensions) is still JavaScript. No TypeScript experience is required to build Vue Storefront stores. **This is just for core developers and transparent to the end users.** Therefore we're refactoring just: @@ -26,9 +26,9 @@ We're in the middle of [refactoring `core/components` to `core/api` modules](htt 1. Introduce types - move _.js modules to _.ts modules incrementally without breaking changes. 2. Use types when it's appropriate in your newly written modules and new features. -3. One Vuex module, or just few components refactored within one release (once a month) is fine. +3. One Vuex module or just few components refactored within one release (once a month) is fine. 4. All `core/api` modules should be created using TypeScript. 5. All new modules and Vuex stores should be created using TypeScript. -6. **For now please don't refactor existing UI layer (components, pages) to use TypeScript. We should focus at Vuex, core libraries and APIs at first to not introduce a chaos into theme development.** +6. **For now please don't refactor existing UI layer (components, pages) to use TypeScript. We should focus at Vuex, core libraries and APIs at first to not introduce chaos into theme development.** 7. We should put the types/interfaces inside `core/store/types` for all Entity/Data related models or in `core/types` for some shared ones; for example: `Product.ts` should be placed in `core/store/types/product/Product.ts` -8. We should use minimal possible set of interfaces. Try to introduce 1-2 interfaces per entity (e.g. Product shouldn't be represented by more than 2 interfaces) +8. We should use a minimal possible set of interfaces. Try to introduce 1-2 interfaces per entity (e.g. Product shouldn't be represented by more than 2 interfaces) diff --git a/docs/guide/components/category-page.md b/docs/guide/components/category-page.md index 171320f6e9..6a0ee55b6b 100644 --- a/docs/guide/components/category-page.md +++ b/docs/guide/components/category-page.md @@ -9,16 +9,16 @@ No props - `pagination` - an object that defines two settings: - `perPage` of product items to load per page, currently set to 50 - `offset` that probably defines which page has been last loaded, currently set to 0 and isn't changed anywhere. -- `enabled` - enables/disables paging. When it's disabled it lazy-loads other products on scroll +- `enabled` - enables/disables paging. When it's disabled it lazy-loads other products on a scroll - `filters.available`, `filters.chosen` - a set of filters that user has defined on Category page - there we have available filters and chosen filter values -- `products` - computed property that returns a list of product items of current category from the Vuex store. -- `isCategoryEmpty` - computed property that returns `true` if product list of current category is empty. -- `category` - computed property that returns current category from the Vuex store. +- `products` - computed property that returns a list of product items of the current category from the Vuex store. +- `isCategoryEmpty` - computed property that returns `true` if the product list of the current category is empty. +- `category` - computed property that returns the current category from the Vuex store. - `categoryName` - category name. - `categoryId` - category ID. - `breadcrumbs` - breadcrumbs for the current category from the Vuex store. - `productsTotal` - how many products are in the category. -- `lazyLoadProductsOnscroll` - allows lazy-loading more products on scroll, by default it's true +- `lazyLoadProductsOnscroll` - allows lazy-loading more products on a scroll, by default it's true ## Methods @@ -37,7 +37,7 @@ Since the app is using SSR, this method prefetches and resolves the asynchronous ### beforeMount -`filter-changed-category` event listener is initialized. The event is fired when user selects custom filter value. +`filter-changed-category` event listener is initialized. The event is fired when the user selects custom filter value. ### beforeDestroy diff --git a/docs/guide/components/events-list.md b/docs/guide/components/events-list.md index b2e3157f92..6024b4c4cd 100644 --- a/docs/guide/components/events-list.md +++ b/docs/guide/components/events-list.md @@ -1,6 +1,6 @@ # Events List -To keep track and make debugging of `$bus.$emit` events across components easier, here is a list of such events that are triggered by compontnes of default theme. +To keep track and make debugging of `$bus.$emit` events across components easier, here is a list of such events that are triggered by components of the default theme. ## ForgotPass diff --git a/docs/guide/components/home-page.md b/docs/guide/components/home-page.md index 26ce59c3d6..745aaf0101 100644 --- a/docs/guide/components/home-page.md +++ b/docs/guide/components/home-page.md @@ -1,7 +1,7 @@ # Core Home Page :::tip Note -Core page has almost zero functionality, everything is in theme component, which definitely needs be replaced to core. +Core page has almost zero functionality, everything is in theme component, which definitely needs to be replaced to the core. ::: ## Props @@ -22,4 +22,4 @@ No methods ### beforeMount -Clears Vuex store entries that define current category by dispatching `category/reset` action. +Clears Vuex store entries that define the current category by dispatching `category/reset` action. diff --git a/docs/guide/components/modal.md b/docs/guide/components/modal.md index 327972fcc6..134003c86f 100644 --- a/docs/guide/components/modal.md +++ b/docs/guide/components/modal.md @@ -1,6 +1,6 @@ # Modal component -Simple modal component. Visibility of modal container is based on internal state `isVisible`. We can set this state by `$emit` event on global `$bus` event. +Simple modal component. Visibility of modal container is based on internal state `isVisible`. We can set this state by `$emit` event on the global `$bus` event. ## Basic usage @@ -36,4 +36,4 @@ Simple modal component. Visibility of modal container is based on internal state ### Styles -Core component doesn't have css styles. If you want to see an example of our implementation please look [here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/Modal.vue) +Core component doesn't have CSS styles. If you want to see an example of our implementation please look [here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/Modal.vue) diff --git a/docs/guide/components/product.md b/docs/guide/components/product.md index 94ad855644..ad71bc00e8 100644 --- a/docs/guide/components/product.md +++ b/docs/guide/components/product.md @@ -9,9 +9,9 @@ No props - `loading` - if `true` indicates the product is currently being loaded from the backend. - `favorite` - an object that defines 1) if the current product is in the list of favorite products and 2) name of an icon that will be shown to indicate its status in relation to being in the list of favorite products. - `compare` - defines if the current product is in compare list. -- `product` - a computed property that represents current product that is shown on the page. Initially gets its value from `product/productCurrent` Vuex store getter. Includes all the options like size and color that user sets on the page. -- `originalProduct` - a computed property that represents current product in its initial state. Gets its value from `product/productOriginal` Vuex store getter. -- `parentProduct` - a computed property that represents current product parent product, if any. Gets its value from `product/productParent` Vuex store getter. +- `product` - a computed property that represents the current product that is shown on the page. Initially gets its value from `product/productCurrent` Vuex store getter. Includes all the options like size and color that the user sets on the page. +- `originalProduct` - a computed property that represents the current product in its initial state. Gets its value from `product/productOriginal` Vuex store getter. +- `parentProduct` - a computed property that represents the current product parent product, if any. Gets its value from `product/productParent` Vuex store getter. - `attributesByCode` - a computed property that returns the list of all product attributes by their code. Gets its value from `attribute/attributeListByCode` Vuex store getter. - `attributesById` - a computed property that returns the list of all product attributes by their id. Gets its value from `attribute/attributeListById` Vuex store getter. **This prop is not used anywhere**. - `breadcrumbs` - a computed property that represents breadcrumbs for the current product. Gets its value from `product/breadcrumbs` Vuex store getter. @@ -33,16 +33,16 @@ No props Sets attributes on the product according to what the user has chosen on the page. Dispatches `product/configure` action. :::tip Note -This method is called when 'filter-changed-product' event is triggered, but it's not triggered anywhere in the code. +This method is called when the 'filter-changed-product' event is triggered, but it's not triggered anywhere in the code. ::: _Parameters_ -- `filterOption` - an object that represents an attribute that have changed on the product. +- `filterOption` - an object that represents an attribute that has changed on the product. #### fetchData (store, route) -Fetches current product data from the backend by dispatching `product/single` action. Also dispatches several other actions to get breadcrumbs, product attributes, variants for configurable product, also to set sub-products if the product is grouped. +Fetches current product data from the backend by dispatching `product/single` action. Also dispatches several other actions to get breadcrumbs, product attributes, variants for a configurable product, also to set sub-products if the product is grouped. _Parameters_ @@ -51,7 +51,7 @@ _Parameters_ #### loadData ({ store, route }) -Dispatches `product/reset` action that sets current product to original product, nullifies all the configuration and options, then calls `fetchData` method to load current product data. +Dispatches `product/reset` action that sets current product to the original product, nullifies all the configuration and options, then calls the `fetchData` method to load current product data. _Parameters_ @@ -59,7 +59,7 @@ _Parameters_ #### stateCheck -If current product has a parent, redirects to a parent product page. Then checks if the current product is in the wishlist or in the compare list, sets `favorite` and `compare` props accordingly. +If the current product has a parent, redirects to a parent product page. Then checks if the current product is in the wishlist or in the compare list, sets `favorite` and `compare` props accordingly. _Parameters_ No parameters @@ -93,7 +93,7 @@ _Parameters_ ### asyncData -Since the app is using SSR, this method prefetches and resolves the asynchronous data before rendering happens and saves it to Vuex store. On Product page this is done by calling `loadData` method. +Since the app is using SSR, this method prefetches and resolves the asynchronous data before rendering happens and saves it to Vuex store. On Product page, this is done by calling `loadData` method. The `asyncData` fires the `product-after-load` event which can be used to populate the Vuex SSR store for additional data regarding the product. diff --git a/docs/guide/core-themes/core-components-api.md b/docs/guide/core-themes/core-components-api.md index 08f55759d3..801a94aa90 100644 --- a/docs/guide/core-themes/core-components-api.md +++ b/docs/guide/core-themes/core-components-api.md @@ -2,7 +2,7 @@ :::warning Note Temporary file for core components API. List of props, public methods and data that are available to use via mixin insertion. -In case of injectable components (like modal) or the ones triggered by Vuex actions you should write them down also. Feel free to write some description/new api proposal for each documented component. +In the case of injectable components (like modal) or the ones triggered by Vuex actions you should write them down also. Feel free to write some description/new api proposal for each documented component. ::: ## AddToCart @@ -61,8 +61,8 @@ This component represents an input with validation. ### Data -- `passType` - copy of password type for toggle password visibility -- `iconActive` - boolean prop that defines if visibility button is enabled +- `passType` - a copy of password type for toggle password visibility +- `iconActive` - a boolean prop that defines if visibility button is enabled - `icon` - default material icon name for visibility button ### Methods @@ -88,18 +88,18 @@ No methods ## ColorSelector -This components represents a button that is used for visualizing different options, specifically product filters. It is used on category's Sidebar and Product pages. +This component represents a button that is used for visualizing different options, specifically product filters. It is used on category's Sidebar and Product pages. ### Props -- `label` - label that is shown on the component button. -- `id` - identifier that unifies an option among others in array. +- `label` - a label that is shown on the component button. +- `id` - an identifier that unifies an option among others in an array. - `code` - a name of an option that the component is being used to represent (currently 'color'). - `context` - a name of an entity that the component belongs to (currently one of 'category' or 'product'). ### Data -- `active` - boolean prop that defines if button is pressed and is active. +- `active` - a boolean prop that defines if the button is pressed and is active. ### Methods @@ -114,7 +114,7 @@ _label_ - same as _label_ prop. #### beforeMount -If current route's name is not 'product' defines 2 event listeners. First one is `filter-reset` that sets _active_ prop to false. Second is `filter-changed-`, where context is a value of _context_ prop. This event listener toggles the value of _active_ prop depending on which instance of ColorSelector component was passed to it as a parameter. +If the current route's name is not 'product' defines 2 event listeners. First one is `filter-reset` that sets _active_ prop to false. Second is `filter-changed-`, where context is a value of _context_ prop. This event listener toggles the value of _active_ prop depending on which instance of ColorSelector component was passed to it as a parameter. #### beforeDestroy @@ -122,7 +122,7 @@ Removes event listeners defined in `beforeMount` hook. ## Loader -This component is used for visualizing loading process, when something is happening in the background. It is currently used when account is being registered, password is being reset and user is logging in. +This component is used for visualizing loading process, when something is happening in the background. It is currently used when an account is being registered, the password is being reset and the user is logging in. ### Props @@ -130,7 +130,7 @@ No props ### Data -- `message` - A message that is shown while loading process is on. +- `message` - A message that is shown while the loading process is on. - `isVisible` - Computed property which is equal to UI-store's _loader_ property. This prop defines whether to show or hide the spinner. ### Methods @@ -139,7 +139,7 @@ No props #### Parameters -_message_ - A text that is shown when loading process is on. +_message_ - A text that is shown when the loading process is on. - `hide` - Calls UI-store mutation 'ui/setLoader', which hides a spinner. @@ -173,7 +173,7 @@ No methods ## Newsletter popup (should be using modal) -Shows popup modal window where user can enter his/her newsletter subscription preferences, currently only email address. This component is used in a Footer page. +Shows popup modal window where the user can enter his/her newsletter subscription preferences, currently only email address. This component is used in a Footer page. ### Props @@ -189,7 +189,7 @@ No data ## Notification -Shows notifications after some actions being performed in shop. There are four types of notifications: success, error, warning and info. +Shows notifications after some actions being performed in the shop. There are four types of notifications: success, error, warning and info. ### Props @@ -269,12 +269,12 @@ No data ## PriceSelector -Represents one of the options on Category page. Shows price range and allows user to choose one of the ranges. +Represents one of the options on the Category page. Shows price range and allows the user to choose one of the ranges. ### Props - `content` - text that shows the price range -- `id` - unique identifier of the option +- `id` - the unique identifier of the option - `code` - options' code, equals to 'price' - `from` - minimum value of the price range - `to` - maximum value of the price range @@ -309,7 +309,7 @@ Shows attributes that a specific product has. Used on Product Page. ### Props -- `product` - reference to product that the attribute belongs to +- `product` - reference to the product that the attribute belongs to - `attribute` - attribute itself - `emptyPlaceholder` - a string that is shown if an attribute has no value @@ -330,11 +330,11 @@ Extracts attribute's label and value(-s) from _product_ and _attribute_ properti ## ProductLinks -If product is grouped (which means it consists of several products) this component shows list of compound products. Used on Product page. +If the product is grouped (which means it consists of several products) this component shows a list of compound products. Used on the Product page. ### Props -- `products` - array of compound products of a given product +- `products` - the array of compound products of a given product ### Data @@ -350,8 +350,8 @@ Shows given array of products on a page in a given number of columns. Used on Ca ### Props -- `product` - array of products to show -- `columns` - number of columns to display on a page. Each product is displayed with ProductTile component. +- `product` - an array of products to show +- `columns` - the number of columns to display on a page. Each product is displayed with ProductTile component. ### Data @@ -369,7 +369,7 @@ Shows product tiles slider. Used in Collection component in _default_ theme. - `title` - a title of a slider - `products` - an array of products to show in a slider -- `config` - and object that defines configuration of a slider, like number of tiles to show on a page, pagination and looping. +- `config` - and object that defines the configuration of a slider, like the number of tiles to show on a page, pagination and looping. ### Data @@ -381,7 +381,7 @@ No methods ## ProductTile -Shows a product in a compact way when several products are shown on one page. Used in many places, such as Home page, Search panel, 404 page and so on. +Shows a product in a compact way when several products are shown on one page. Used in many places, such as Home page, Search panel, 404 pages and so on. ### Props @@ -403,13 +403,13 @@ Represents one of the options of a product, namely product's size. Used on Categ ### Props - `label` - a string that represents the size -- `id` - unique identifier of the size +- `id` - the unique identifier of the size - `code` - a code name of an option, which is 'size' - `context` - a name of an entity that the component belongs to (currently one of 'category' or 'product') ### Data -`active` - boolean prop that defines if button is pressed and is active. +`active` - a boolean prop that defines if the button is pressed and is active. ### Methods @@ -476,19 +476,19 @@ No props ### Data -- `stockCheckCompleted` - a boolean prop that shows if all products in cart (if any) have been checked for availability (whether they are in stock or not). -- `stockCheckOK` - a boolean prop that shows if all products in cart are in stock. +- `stockCheckCompleted` - a boolean prop that shows if all products in the cart (if any) have been checked for availability (whether they are in stock or not). +- `stockCheckOK` - a boolean prop that shows if all products in the cart are in stock. - `orderPlaced` - a boolean prop that is set to true after `order-after-placed` event has been triggered, defining a successful placement of an order. -- `activeSection` - an object that consists of 4 boolean props: _personalDetails_, _shipping_, _payment_ and _orderReview_, - that define which section of Checkout page is currently active. At any point of time only one section can be active. +- `activeSection` - an object that consists of 4 boolean props: _personalDetails_, _shipping_, _payment_ and _orderReview_, - that define which section of Checkout page is currently active. At any point in time only one section can be active. - `order` - an order object, that consists of all necessary order information that will be sent to the backend to place it. - `personalDetails` - an object that contains personal details part of the Checkout page. - `shipping` - an object that contains shipping details part of the Checkout page. - `payment` - an object that contains payment details part of the Checkout page. - `orderReview` - _this prop is not used_ -- `cartSummary` - this prop is supposed to be filled after `checkout.cartSummary` event has been triggered. _But this event is not triggered anywhere, therefore this prop currently has no usage._ +- `cartSummary` - this prop is supposed to be filled after `checkout.cartSummary` the event has been triggered. _But this event is not triggered anywhere, therefore this prop currently has no usage._ - `validationResults` - an object that keeps validation result of 3 child components: Personal Details, Shipping Details and Payment Details. _Currently all the validation happens within those 3 child components and there's no need to store the result in a parent component. This prop is redundant._ - `userId` - this new user ID is returned by child OrderReview component if a user registers a new account at checkout. It is then sent to the backend to bind an order to the user. -- `isValid` - this boolean computed property defines if an order can be placed. If there's any validation error within any child component or _stockCheckOK_ prop is not true, this returns false and an order won't be placed. +- `isValid` - this boolean computed property defines if an order can be placed. If there's any validation error within any child component or _stockCheckOK_ prop is not true, this returns false and order won't be placed. ### Methods @@ -506,7 +506,7 @@ _sectionToActivate_ - a name of a section that needs to be activated. - `prepareOrder ()` - returns an order object that will be sent to the backend. -- `placeOrder ()` - if _isValid_ prop is true dispatches `'checkout/placeOrder'` action which will place the order, otherwise fires a notification about existence of validation errors. +- `placeOrder ()` - if _isValid_ prop is true dispatches `'checkout/placeOrder'` action which will place the order, otherwise fires a notification about the existence of validation errors. - `savePersonalDetails ()` - dispatches `'checkout/savePersonalDetails'` action which will save checkout personal details information (from _personalDetails_ prop) to the Vuex store. @@ -525,13 +525,13 @@ Defines several event listeners to communicate with child components. - **'checkout.shipping'** event listener receives shipping details information from Shipping child component and activates next section of the Checkout page (which is payment details). - **'checkout.payment'** event listener receives payment details information from Payment child component and activates next section of the Checkout page (which is order review). - **'checkout.cartSummary'** - _this event listener is not called anywhere._ -- **'checkout.placeOrder'** event listener is called by OrderReview child component. It has an optional _userId_ parameter that is passed to it in case user registers a new account at the checkout. With or without _userId_ this event listener calls _placeOrder_ method. -- **'checkout.edit'** event listener activates a section of Checkout page, name of which is passed to it in a parameter. +- **'checkout.placeOrder'** the event listener is called by OrderReview child component. It has an optional _userId_ parameter that is passed to it in case user registers a new account at the checkout. With or without _userId_ this event listener calls _placeOrder_ method. +- **'checkout.edit'** event listener activates a section of the Checkout page, the name of which is passed to it in a parameter. - **'order-after-placed'** event listener sets _orderPlaced_ prop to true. #### beforeMount -Checks if cart is not empty. If it is, then a notification is fired. Otherwise, sets promises that will check availability of the products from the cart and if they are all in stock. +Checks if the cart is not empty. If it is, then a notification is fired. Otherwise, sets promises that will check the availability of the products from the cart and if they are all in stock. #### destroyed @@ -541,12 +541,12 @@ Removes all event listeners that were previously defined in `created` hook. ### Props -`title` - title of the Compare page +`title` - the title of the Compare page ### Data - `attributesByCode` - a computed property that returns the list of all product attributes by their code. Gets its value from `'attribute/attributeListByCode'` Vuex store getter. -- `attributesById` - a computed property that return the list of all product attributes by their Id. Gets its value from `'attribute/attributeListById'` Vuex store getter. _This prop is not used anywhere._ +- `attributesById` - a computed property that returns the list of all product attributes by their Id. Gets its value from `'attribute/attributeListById'` Vuex store getter. _This prop is not used anywhere._ - `items` - returns the list of products that were chosen for comparison from Vuex store. - `all_comparable_attributes` - returns the subset of attributes from `attributesByCode` prop that have `is_comparable` property set to true. @@ -566,7 +566,7 @@ Dispatches `'compare/load'` action that loads the list of products to compare fr ## Home -Home page has been refactored to the new core proposal (1.0RC) and the [docs has been moved](../components/home-page.md). +The home page has been refactored to the new core proposal (1.0RC) and the [docs has been moved](../components/home-page.md). ## MyAccount @@ -580,7 +580,7 @@ Home page has been refactored to the new core proposal (1.0RC) and the [docs has ### Methods -`notify (title)` - this is a temporary method that notifies user if he presses on a link of a section that is not yet implemented. +`notify (title)` - this is a temporary method that notifies the user if he presses on a link of a section that is not yet implemented. ### Hooks @@ -594,7 +594,7 @@ Defines several event listeners to communicate with child components. #### mounted -Checks if there's a user token in localStorage. If not, redirects user to Home page. +Checks if there's a user token in localStorage. If not, redirects user to the Home page. #### destroyed @@ -624,4 +624,4 @@ Since the app is using SSR, this method prefetches and resolves the asynchronous ## Product -Product page has been refactored to the new core proposal (1.0RC) and the [docs has been moved](../components/product.md). +The Product page has been refactored to the new core proposal (1.0RC) and the [docs has been moved](../components/product.md). diff --git a/docs/guide/core-themes/core-components.md b/docs/guide/core-themes/core-components.md index 09a7e93230..9b11001a39 100644 --- a/docs/guide/core-themes/core-components.md +++ b/docs/guide/core-themes/core-components.md @@ -4,9 +4,9 @@ In Vue Storefront there are two types of components: -- **Core components** - In core components we implemented all basic business logic for e-commerce shop, so you don't need to write it from scratch by yourself. You can make use of them in your themes where all you need to do is styling and creating the HTML markup. Every core component provides an interface to interact with. This interface can be extended or overwritten in your theme if you need it. Core components should be injected to themes as mixins. They contain only business logic - HTML markup and styling should be done in themes. You can usually find core compoennts inside `components` folder of every module. +- **Core components** - In core components, we implemented all basic business logic for e-commerce shop, so you don't need to write it from scratch by yourself. You can make use of them in your themes where all you need to do is styling and creating the HTML markup. Every core component provides an interface to interact with. This interface can be extended or overwritten in your theme if you need it. Core components should be injected to themes as mixins. They contain only business logic - HTML markup and styling should be done in themes. You can usually find core components inside `components` folder of every module. -- **Theme components** - Theme components is what you really see in the app. They can inherit business logic from core components or be created as theme-specific components. All CSS, HTML sand ui-specific logic hould be placed in theme. +- **Theme components** - Theme components is what you really see in the app. They can inherit business logic from core components or be created as theme-specific components. All CSS, HTML sand ui-specific logic should be placed in theme. ## Working with core components @@ -57,9 +57,9 @@ export default { Core pages are placed in `core/pages` folder. -## Overriding and extending core compoennts and pages +## Overriding and extending core components and pages -Since core components are just plain JavaScript objects you can easly modify them before mixing in in your theme. +Since core components are just plain JavaScript objects you can easily modify them before mixing in in your theme. ```js import YourCorePage from '@vue-storefront/core/pages/YourCorePage' diff --git a/docs/guide/core-themes/layouts.md b/docs/guide/core-themes/layouts.md index af13de3e20..0c6a9ab38a 100644 --- a/docs/guide/core-themes/layouts.md +++ b/docs/guide/core-themes/layouts.md @@ -1,6 +1,6 @@ # Layouts and advanced output operations -Starting from version 1.4.0 Vue Storefront allows you to switch the html templates and layouts dynamically in the SSR mode. +Starting from version 1.4.0 Vue Storefront allows you to switch the HTML templates and layouts dynamically in the SSR mode. This feature can be very useful for non-standard rendering scenarios like: @@ -10,20 +10,20 @@ This feature can be very useful for non-standard rendering scenarios like: ## How it works -Before 1.4.0 Vue Storefront generated the output by mix of: +Before 1.4.0 Vue Storefront generated the output by a mix of: - taking the base HTML template `src/index.template.html`, - rendering the `src/themes/default/App.vue` root component, - injecting the Vue SSR output into the template + adding CSS styles, script references etc. [Read more on Vue SSR Styles and Scripts injection](https://ssr.vuejs.org/guide/build-config.html#client-config) This mode is still in place and it's enabled by default. -What we've changed is **you can now select which html template + layout your app is routing in per-route manner**. +What we've changed is **you can now select which HTML template + layout your app is routing in per-route manner**. ## Changelog The changes we've introduced: -- now distinct routes can set `context.output.template` in `asyncData` method. By doing so you can skip using `dist/index.html` (which contains typical HTML5 elements - like ``). This is important when we're going to generate either AMPHTML pages (that cannot contain any ` - - - diff --git a/src/themes/default/components/core/ProductGalleryCarousel.vue b/src/themes/default/components/core/ProductGalleryCarousel.vue new file mode 100644 index 0000000000..c9f5a57bab --- /dev/null +++ b/src/themes/default/components/core/ProductGalleryCarousel.vue @@ -0,0 +1,205 @@ + + + + + + diff --git a/src/themes/default/components/core/ProductGalleryOverlay.vue b/src/themes/default/components/core/ProductGalleryOverlay.vue new file mode 100644 index 0000000000..c0279e08c9 --- /dev/null +++ b/src/themes/default/components/core/ProductGalleryOverlay.vue @@ -0,0 +1,76 @@ + + + diff --git a/src/themes/default/components/core/ProductGalleryZoom.vue b/src/themes/default/components/core/ProductGalleryZoom.vue deleted file mode 100644 index 014ec66ce8..0000000000 --- a/src/themes/default/components/core/ProductGalleryZoom.vue +++ /dev/null @@ -1,182 +0,0 @@ - - - diff --git a/src/themes/default/components/core/ProductGalleryZoomCarousel.vue b/src/themes/default/components/core/ProductGalleryZoomCarousel.vue new file mode 100644 index 0000000000..c5295100c5 --- /dev/null +++ b/src/themes/default/components/core/ProductGalleryZoomCarousel.vue @@ -0,0 +1,181 @@ + + + + + From f7b9bdbd5582ad46ff941d23729b1adfc9423efe Mon Sep 17 00:00:00 2001 From: Joel Rainwater Date: Wed, 13 Feb 2019 15:39:27 +0100 Subject: [PATCH 024/203] Add video embed for Youtube and Vimeo when click placeholder --- core/modules/catalog/helpers/index.ts | 76 +++++++++++++++---- .../components/core/ProductGallery.vue | 53 ++++++++++--- 2 files changed, 101 insertions(+), 28 deletions(-) diff --git a/core/modules/catalog/helpers/index.ts b/core/modules/catalog/helpers/index.ts index 103e45957c..347ce4edf8 100644 --- a/core/modules/catalog/helpers/index.ts +++ b/core/modules/catalog/helpers/index.ts @@ -13,6 +13,7 @@ import i18n from '@vue-storefront/i18n' import { currentStoreView } from '@vue-storefront/core/lib/multistore' import { getThumbnailPath } from '@vue-storefront/core/helpers' import { Logger } from '@vue-storefront/core/lib/logger' +import Url from 'url-parse' function _filterRootProductByStockitem (context, stockItem, product, errorCallback) { if (stockItem) { @@ -529,23 +530,66 @@ export function configureProductAsync (context, { product, configuration, select */ export function getMediaGallery (product) { - let mediaGallery = [] - if (product.media_gallery) { - for (let mediaItem of product.media_gallery) { - if (mediaItem.image) { - let computedImage = { - 'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height), - 'loading': getThumbnailPath(product.image, 310, 300), - 'video': null - } - if (mediaItem.vid) { - computedImage.video = mediaItem.vid - } - mediaGallery.push(computedImage) - } - } + let mediaGallery = [] + if (product.media_gallery) { + for (let mediaItem of product.media_gallery) { + if (mediaItem.image) { + let computedImage = { + 'src': getThumbnailPath(mediaItem.image, rootStore.state.config.products.gallery.width, rootStore.state.config.products.gallery.height), + 'loading': getThumbnailPath(product.image, 310, 300), + 'video': null + } + if (mediaItem.vid) { + computedImage.video = computeVideoData(mediaItem.vid) + } + mediaGallery.push(computedImage) + } + } + } + return mediaGallery +} + + +/** +* Process video data to provide the proper +* provider and attributes +* +* @param videoData Object +*/ + +function computeVideoData (videoData) { + let videoId = ''; + let type = ''; + let videoUrl = new Url(videoData.url); + + if (videoUrl.host.match(/youtube\.com/) && videoUrl.search) { + videoId = videoUrl.search.split('v=')[1]; + + if (videoId) { + let ampersandPosition = videoId.indexOf('&'); + + if (ampersandPosition === -1) { + return videoId; + } + + videoId = videoId.substring(0, ampersandPosition); + type = 'youtube'; } - return mediaGallery + } else if (videoUrl.host.match(/youtube\.com|youtu\.be|youtube-nocookie.com/)) { + videoId = videoUrl.pathname.replace(/^\/(embed\/|v\/)?/, '').replace(/\/.*/, ''); + type = 'youtube'; + } else if (videoUrl.host.match(/vimeo\.com/)) { + type = 'vimeo'; + let vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)', + '?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|video\\/|)(\\d+)(?:$|\\/|\\?)' + ].join('')); + videoId = videoUrl.href.match(vimeoRegex)[3]; + } + return { + ...videoData, + type: type, + id: videoId + } } /** diff --git a/src/themes/default/components/core/ProductGallery.vue b/src/themes/default/components/core/ProductGallery.vue index b937a8fb77..8edc68effe 100644 --- a/src/themes/default/components/core/ProductGallery.vue +++ b/src/themes/default/components/core/ProductGallery.vue @@ -35,10 +35,11 @@ :speed="carouselTransitionSpeed" > -
+
- play_circle_outline + play_circle_outline +
+
+
+