From 0006da48ec32fee4d31fe22a7812de97edcd19bd Mon Sep 17 00:00:00 2001 From: Fifciuu Date: Wed, 20 Jan 2021 12:59:12 +0100 Subject: [PATCH] chore: updates links to the new repo & new docs path & /v1 prefix --- docs/guide/README.md | 24 +-- docs/guide/archives/components.md | 44 ++--- docs/guide/archives/cookbook.md | 74 +++---- docs/guide/archives/extensions.md | 6 +- docs/guide/archives/graphql.md | 8 +- docs/guide/archives/modules.md | 72 +++---- docs/guide/archives/typescript.md | 2 +- docs/guide/archives/vuex.md | 30 +-- docs/guide/basics/configuration.md | 60 +++--- docs/guide/basics/contributing.md | 6 +- docs/guide/basics/graphql.md | 8 +- docs/guide/basics/recipes.md | 28 +-- docs/guide/basics/ssr-cache.md | 4 +- docs/guide/components/events-list.md | 42 ++-- docs/guide/components/modal.md | 4 +- docs/guide/cookbook/checklist.md | 146 +++++++------- docs/guide/cookbook/data-import.md | 20 +- docs/guide/cookbook/elastic.md | 6 +- docs/guide/cookbook/module.md | 24 +-- docs/guide/cookbook/setup.md | 74 +++---- docs/guide/cookbook/theme.md | 12 +- docs/guide/core-themes/stylesheets.md | 4 +- docs/guide/core-themes/themes.md | 4 +- docs/guide/core-themes/ui-store.md | 2 +- docs/guide/data/data.md | 8 +- docs/guide/data/database-tool.md | 10 +- docs/guide/data/elastic-queries.md | 4 +- docs/guide/extensions/extending-api.md | 2 +- docs/guide/extensions/introduction.md | 4 +- docs/guide/general/introduction.md | 24 +-- docs/guide/installation/linux-mac.md | 12 +- docs/guide/installation/magento.md | 14 +- docs/guide/installation/production-setup.md | 16 +- docs/guide/installation/theme.md | 4 +- docs/guide/installation/windows.md | 8 +- docs/guide/integrations/integrations.md | 12 +- docs/guide/integrations/multistore.md | 4 +- docs/guide/integrations/paypal-payments.md | 2 +- docs/guide/integrations/reviews.md | 6 +- docs/guide/integrations/totals-sync.md | 6 +- docs/guide/modules/cart.md | 12 +- docs/guide/modules/catalog.md | 26 +-- docs/guide/modules/checkout.md | 10 +- docs/guide/modules/introduction.md | 14 +- docs/guide/modules/review.md | 14 +- docs/guide/modules/user.md | 10 +- docs/guide/upgrade-notes/README.md | 206 ++++++++++---------- docs/guide/vuex/attribute-store.md | 2 +- docs/guide/vuex/category-store.md | 6 +- docs/guide/vuex/introduction.md | 4 +- docs/guide/vuex/product-store.md | 18 +- 51 files changed, 581 insertions(+), 581 deletions(-) diff --git a/docs/guide/README.md b/docs/guide/README.md index 3e7afed277..154471fe93 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -9,7 +9,7 @@ Vue Storefront is a rather complex solution with a lot of possibilities. Learnin Vue Storefront is a headless and backend-agnostic eCommerce [Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps/) written in Vue.js. The fact that it's using headless architecture allows Vue Storefront to connect with any eCommerce platform so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce and etc. - It's a very popular [Open Source project](https://github.com/DivanteLtd/vue-storefront) with a strong and growing community. + It's a very popular [Open Source project](https://github.com/vuestorefront/vue-storefront) with a strong and growing community. **Key features of Vue Storefront:** - Platform-agnostic @@ -24,7 +24,7 @@ Vue Storefront is a headless and backend-agnostic eCommerce [Progressive Web App ## How does it connect with backend platforms? -Vue Storefront manages to be platform-agnostic thanks to the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api) and [dedicated API connectors](https://github.com/DivanteLtd/vue-storefront#integrations) for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform, which means no matter what eCommerce backend you use, your frontend remains the same without any change. +Vue Storefront manages to be platform-agnostic thanks to the [vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api) and [dedicated API connectors](https://github.com/vuestorefront/vue-storefront#integrations) for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform, which means no matter what eCommerce backend you use, your frontend remains the same without any change. It's a great strategy for migrations since you can easily migrate from one platform to another (or one version to another, e.g. Magento 1 to 2) without touching your frontend. @@ -32,13 +32,13 @@ It's a great strategy for migrations since you can easily migrate from one platf ![Architecture diagram](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/master/docs/.vuepress/public/GitHub-Architecture-VS.png) The API connector works in two phases: -- **data pump** ([mage2nosql](https://github.com/DivanteLtd/mage2vuestorefront) in the image) is pulling static data (catalog, orders, etc.) from your eCommerce platform to Vue Storefront Elasticsearch and changes its format to the one consumed by vue-storefront-api. Once finished pulling the data, you can display the product catalog in Vue Storefront. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly. +- **data pump** ([mage2nosql](https://github.com/vuestorefront/mage2vuestorefront) in the image) is pulling static data (catalog, orders, etc.) from your eCommerce platform to Vue Storefront Elasticsearch and changes its format to the one consumed by vue-storefront-api. Once finished pulling the data, you can display the product catalog in Vue Storefront. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly. - **worker pool** is a synchronization process of so-called dynamic calls (user sessions, cart rules, etc.) that couldn't be stored in the database and need to be called by vue-storefront-api directly from the backend platform. VueStorefront works seamlessly with your backend platform while two integration phases are managed as above. -Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/DivanteLtd/mage2vuestorefront), [Magento 1](https://github.com/DivanteLtd/magento1-vsbridge), [CoreShop](https://github.com/DivanteLtd/coreshop-vsbridge), [BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront), [WooCommerce](https://github.com/DivanteLtd/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/DivanteLtd/vue-storefront-integration-boilerplate). +Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/vuestorefront/mage2vuestorefront), [Magento 1](https://github.com/vuestorefront/magento1-vsbridge), [CoreShop](https://github.com/vuestorefront/coreshop-vsbridge), [BigCommerce](https://github.com/vuestorefront/bigcommerce2vuestorefront), [WooCommerce](https://github.com/vuestorefront/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/vuestorefront/vue-storefront-integration-boilerplate). The blue parts on the diagram are responsible for offline cache and will be explained later in the article. @@ -56,7 +56,7 @@ To summarize: Your shop is basically a Vue Storefront theme that uses features p Knowing these 3 concepts allows you to confidently work with Vue Storefront and make your own shops. -Useful materials: [Vue Storefront project structure](https://docs.vuestorefront.io/guide/basics/project-structure.html) +Useful materials: [Vue Storefront project structure](/guide/basics/project-structure.html) ## Installing Vue Storefront When you want to play with Vue Storefront, there are three options: @@ -72,7 +72,7 @@ To do any of this, simply type `yarn installer` in the root of the project and a ## Vue Storefront config file -Most of the Vue Storefront configuration (like the active theme, backend API addresses, multistore setup, etc.) is done through its [config](https://docs.vuestorefront.io/guide/basics/configuration.html) file that can be found under the `config` folder. The `default.json` file contains all the default setup. +Most of the Vue Storefront configuration (like the active theme, backend API addresses, multistore setup, etc.) is done through its [config](/guide/basics/configuration.html) file that can be found under the `config` folder. The `default.json` file contains all the default setup. For your own implementation you should create a `local.json` file in the same directory and include fields from `default.json` that you want to override. These two files will be merged in favor of `local.json` during the build process. If you use the installer to set up your Vue Storefront instance, it'll generate proper config files. @@ -87,7 +87,7 @@ The mechanism of injecting core business logic into themes is ridiculously simpl So assume we have a core Microcart component with business logic as above (left side), we can easily inject it into any of our theme components (right side) just by importing it and adding as a mixin `mixins: [Microcart]`. This is all you need to make use of core business logic inside your theme. With this approach, we can easily ship updates to all core components without breaking your shop. -[Check how to create theme based on our official themes](https://docs.vuestorefront.io/guide/installation/theme.html). +[Check how to create theme based on our official themes](/guide/installation/theme.html). ## Offline mode and cache Vue Storefront still works even while the user is offline. @@ -112,12 +112,12 @@ You may not believe me but this is all you need to know to start working with Vu ## Useful Links -- [Documentation](https://docs.vuestorefront.io/) +- [Documentation](/) - [Community slack invitation link](https://join.slack.com/t/vuestorefront/shared_invite/enQtOTUwNjQyNjY5MDI0LWFmYzE4NTYxNDBhZDRlMjM5MDUzY2RiMjU0YTRjYWQ3YzdkY2YzZjZhZDZmMDUwMWQyOWRmZjQ3NDgwZGQ3NTk) -- [Project structure explained](https://docs.vuestorefront.io/guide/basics/project-structure.html) -- [Configuration file explained](https://docs.vuestorefront.io/guide/basics/configuration.html) -- [Extending Vue Storefront](https://docs.vuestorefront.io/guide/extensions/introduction.html) -- [How to contribute](https://docs.vuestorefront.io/guide/basics/contributing.html#branches) +- [Project structure explained](/guide/basics/project-structure.html) +- [Configuration file explained](/guide/basics/configuration.html) +- [Extending Vue Storefront](/guide/extensions/introduction.html) +- [How to contribute](/guide/basics/contributing.html#branches) ## Video with training You can also watch a video recording from 4th Vue Storefront hackathon with free introduction training diff --git a/docs/guide/archives/components.md b/docs/guide/archives/components.md index 2eb0add7a0..a1f36699b9 100644 --- a/docs/guide/archives/components.md +++ b/docs/guide/archives/components.md @@ -224,7 +224,7 @@ 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/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/Modal.vue) @@ -235,88 +235,88 @@ To keep track and make debugging of `$bus.$emit` events across components easier ### ForgotPass On component close: -- [`modal-hide`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L80) +- [`modal-hide`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L80) On send email action: -- [`notification-progress-start`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L95) -- [`notification-progress-stop`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L97) +- [`notification-progress-start`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L95) +- [`notification-progress-stop`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L97) On error handler of email send action: -- [`notification-progress-stop`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L109) +- [`notification-progress-stop`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L109) ### OrderConfirmation On mounted lifecycle hook: -- [`modal-show`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L65) +- [`modal-show`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L65) On order confirmation: -- [`modal-hide`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L71) +- [`modal-hide`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L71) On order cancelling: -- [`modal-show`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L75) +- [`modal-show`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L75) ### OrderReview On 'Term and conditions' link click: -- [`modal-toggle`, `modal-terms`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderReview.vue#L51) +- [`modal-toggle`, `modal-terms`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderReview.vue#L51) ### PersonalDetails On 'Term and conditions' link click: -- [`modal-toggle`, `modal-terms`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue#L151) +- [`modal-toggle`, `modal-terms`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue#L151) ### Newsletter On newsletter popup show: -- [`modal-show`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Footer/Newsletter.vue#L49) +- [`modal-show`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Footer/Newsletter.vue#L49) ### Header On 'Login to your account' link click: -- [`modal-toggle`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Header/Header.vue#L122) +- [`modal-toggle`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Header/Header.vue#L122) ### Reviews On 'Login to your account' link click: -- [`modal-show`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Reviews/Reviews.vue#L155) +- [`modal-show`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Reviews/Reviews.vue#L155) ### SidebarMenu On 'Login to your account' link click: -- [`modal-show`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue#L201) +- [`modal-show`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue#L201) ### SubCategory On user logout: -- [`user-before-logout`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue#L131) +- [`user-before-logout`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue#L131) ### Language On mounted lifecycle hook: -- [`modal-show`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L55) +- [`modal-show`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L55) On component close: -- [`modal-hide`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L60) +- [`modal-hide`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L60) ### LanguageSwitcher On showing language popup: -- [`modal-show`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/LanguageSwitcher.vue#L30) +- [`modal-show`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/LanguageSwitcher.vue#L30) ### NewsletterPopup On showing newsletter popup: -- [`modal-show`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L54) +- [`modal-show`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L54) On hiding newsletter popup: -- [`modal-hide`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L67) +- [`modal-hide`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L67) ### Onboard On component close: -- [`modal-hide`, `modal-onboard`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/theme/blocks/Home/Onboard.vue#L45) +- [`modal-hide`, `modal-onboard`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/theme/blocks/Home/Onboard.vue#L45) ### Home On beforeMount lifecycle hook: -- [`modal-toggle`, `modal-onboard`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/pages/Home.vue#L74) +- [`modal-toggle`, `modal-onboard`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/pages/Home.vue#L74) diff --git a/docs/guide/archives/cookbook.md b/docs/guide/archives/cookbook.md index e33ed712f7..af62fcad36 100644 --- a/docs/guide/archives/cookbook.md +++ b/docs/guide/archives/cookbook.md @@ -12,7 +12,7 @@ In this chapter, we will cover : ### 0. Introduction -Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/DivanteLtd). +Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/vuestorefront). ### 1. Install with Docker @@ -37,9 +37,9 @@ That being sad, there are tips for using other platforms for docker at [Chef's S ::: #### 2. Recipe -1. First, start with backend, download [**Vue Storefront API**](https://github.com/DivanteLtd/vue-storefront-api) from github. +1. First, start with backend, download [**Vue Storefront API**](https://github.com/vuestorefront/vue-storefront-api) from github. ```bash -git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api +git clone https://github.com/vuestorefront/vue-storefront-api.git vue-storefront-api cd vue-storefront-api ``` @@ -132,10 +132,10 @@ You will see 4 containers are running, which is : | Redis | :6379 | -4. Now that backend part is done, let's work on frontend part, that is download [**Vue Storefront**](https://github.com/DivanteLtd/vue-storefront) +4. Now that backend part is done, let's work on frontend part, that is download [**Vue Storefront**](https://github.com/vuestorefront/vue-storefront) ```bash -git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront +git clone https://github.com/vuestorefront/vue-storefront.git vue-storefront cd vue-storefront ``` @@ -363,7 +363,7 @@ If you want to modify `default.json`, don't edit it directly but copy the whole ::: We have 2 `local.json` files, one of which is for backend here, and we will look at [Secret 2](#secret-2-study-in-local-json-for-vue-storefront), the other for frontend . -At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/default.json) for **backend** : +At [`vue-storefront-api/config/default.json`](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/default.json) for **backend** : ```json "server": { "host": "localhost", @@ -373,7 +373,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - This is where your API backend is defined. The server will listen `server.host`:`server.port` unless it's defined otherwise in environment variables. -- `server.searchEngine` is used in the integration with `graphql` so please don't change it. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/resolvers.js#L6) +- `server.searchEngine` is used in the integration with `graphql` so please don't change it. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/resolvers.js#L6) ```json "orders": { "useServerQueue": false @@ -382,10 +382,10 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- "excludeDisabledProducts": false }, ``` -- `orders.useServerQueue` allows you to use queue process when `order` API is used to create an order. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L65) +- `orders.useServerQueue` allows you to use queue process when `order` API is used to create an order. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L65) - `catalog.excludeDisabledProducts` allows you to skip disabled products when importing products using `mage2vs`. -[jump to code](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/adapters/magento/product.js#L166) +[jump to code](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/adapters/magento/product.js#L166) ```json "elasticsearch": { @@ -415,7 +415,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- - `host`, `port`, `protocol` defines `elasticsearch` connect information. - `user`, `password` is default credentials of `elasticsearch`. If you changed the credentials of `elasticsearch`, please change this accordingly. [more info](https://www.elastic.co/guide/en/x-pack/current/security-getting-started.html) - - `min_score` sets a `min_score` when building a query for `elasticsearch`. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/queryBuilder.js#L172) + - `min_score` sets a `min_score` when building a query for `elasticsearch`. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/queryBuilder.js#L172) :::tip TIP `min_score` helps you exclude documents with `_score` less than `min_score` value. ::: @@ -509,8 +509,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `storeViews` element contains the whole information of ***additional*** stores. The default store information doesn't exist here, it exists on top level. -- `multistore` is supposed to tell the platform if it has multiple stores to consider. For example, it is used to configure `tax` values of additional store. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L14) -- `mapStoreUrlsFor` is used for building url routes in frontend. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/multistore.ts#L85) +- `multistore` is supposed to tell the platform if it has multiple stores to consider. For example, it is used to configure `tax` values of additional store. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L14) +- `mapStoreUrlsFor` is used for building url routes in frontend. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/multistore.ts#L85) - `de` element contains detailed information of `de` store. You need to have this kind of element for all the additional stores you added to `availableStores` with `storeCode` as the key. `de` and `it` in the `default.json` exhibits an example you can copy & paste for other stores you need to add. - `storeCode` denotes store code for the store. - `storeId` denotes store ID of the store. @@ -522,8 +522,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- - `tax` contains tax information of the store. - `defaultCountry` is the code name of the country on which tax is calculated for the store. - `defaultRegion` is default region. - - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/product.js#L48) - - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) + - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/product.js#L48) + - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) - `i18n` connotes *internationalization*. [more info](https://en.wikipedia.org/wiki/Internationalization_and_localization) - `fullCountryName` is the full name of the country this `i18n` is applied to. - `fullLanguageName` is the full name of the language this `i18n` is applied to. @@ -557,9 +557,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- }, ``` - `cart` - - `setConfigurableProductOptions` flag determines to show either the parent item or the child item (aka selected option item) in the cart context. `true` shows parent item instead of the option item selected. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/o2m.js#L94) + - `setConfigurableProductOptions` flag determines to show either the parent item or the child item (aka selected option item) in the cart context. `true` shows parent item instead of the option item selected. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/o2m.js#L94) - `tax` - - `alwaysSyncPlatformPricesOver` [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L49) + - `alwaysSyncPlatformPricesOver` [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L49) - `usePlatformTotals` These two options are used to determine whether to fetch prices from data source on the fly or not. If you set `alwaysSyncPlatformPricesOver` true, then it skips checking the checksum for cart items based on price. @@ -575,7 +575,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ```json "platform": "magento2", ``` -- `platform` defines which e-commerce platform is used as a source. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L13) +- `platform` defines which e-commerce platform is used as a source. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L13) ```json "registeredExtensions": [ @@ -603,9 +603,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- } }, ``` -- `registeredExtensions` element contains the list of supported extensions, it bootstraps entry points for those extensions [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/index.js#L45) +- `registeredExtensions` element contains the list of supported extensions, it bootstraps entry points for those extensions [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/index.js#L45) -- `extensions` contains additional configuration for extensions. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/tree/master/src/api/extensions) +- `extensions` contains additional configuration for extensions. [jump to code](https://github.com/vuestorefront/vue-storefront-api/tree/master/src/api/extensions) - `mailchimp` provides `POST`, `DELETE` APIs for *Mailchimp* `subscribe` method. - `listId` is the ID of list you are publishing. - `apiKey` is API key you are assigned. @@ -706,8 +706,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `imageable` deals with everything you need to configure when it comes to your storefront images, especially product images. - - `maxListeners` limits maximum listeners to request's socket. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/img.js#L21) - - `imageSizeLimit` limits maximum image size. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/img.js#L56) + - `maxListeners` limits maximum listeners to request's socket. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/img.js#L21) + - `imageSizeLimit` limits maximum image size. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/img.js#L56) - `whitelist` contains a white-list of image source domains - `allowedHosts` contains the array of white-list @@ -724,7 +724,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ::: - - `cache` limits `libvips` operation cache from *Sharp*. Values hereunder are default values. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/lib/image.js#L5) + - `cache` limits `libvips` operation cache from *Sharp*. Values hereunder are default values. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/lib/image.js#L5) - `memory` is the maximum memory in MB to use for the cache. - `files` is the maximum number of files to hold open. @@ -769,9 +769,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `entities` is used to integrate with *GraphQL* in **Vue Storefront API**. - `category` - - `includeFields` contains an array of fields to be added as `sourceInclude` [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/category/resolver.js#L10) + - `includeFields` contains an array of fields to be added as `sourceInclude` [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/category/resolver.js#L10) - `product` - - `filterFieldMapping` adds a field mapping to apply a filter in a query [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/mapping.js#L19) + - `filterFieldMapping` adds a field mapping to apply a filter in a query [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/mapping.js#L19) - `category.name` ```json @@ -796,7 +796,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- #### Secret 2. Study in `local.json` for *Vue Storefront* -At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-storefront/blob/master/config/default.json) for **frontend** : +At [`vue-storefront/config/default.json`](https://github.com/vuestorefront/vue-storefront/blob/master/config/default.json) for **frontend** : ```json "server": { @@ -824,37 +824,37 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor - `port` is the port number in which your *Vue Storefront* instance listens to. - - `protocol` is used for *GraphQL* integration. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/search/adapter/graphql/searchAdapter.ts#L48) + - `protocol` is used for *GraphQL* integration. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/search/adapter/graphql/searchAdapter.ts#L48) - - `api` determines API mode between `api` and `graphql`. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/resolvers/resolveGraphQL.js#L7) + - `api` determines API mode between `api` and `graphql`. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/resolvers/resolveGraphQL.js#L7) :::tip TIP You may take a look at [*GraphQL Action Plan*](/guide/basics/graphql.html) guide to help yourself make a decision which mode you should take. ::: - - `devServiceWorker` enables *service worker* in `develop` mode. The *service worker* is normally enabled by default for `production` mode, but not for `develop` mode. Setting this flag *true* forces to use *service worker* in `develop` mode too. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/service-worker/registration.js#L5) + - `devServiceWorker` enables *service worker* in `develop` mode. The *service worker* is normally enabled by default for `production` mode, but not for `develop` mode. Setting this flag *true* forces to use *service worker* in `develop` mode too. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/service-worker/registration.js#L5) :::tip TIP You may take a look at [Working with Service Workers](/guide/core-themes/service-workers.html) for better understanding. ::: - - `useOutputCacheTagging` determines to allow *Output Cache Tags*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L168) + - `useOutputCacheTagging` determines to allow *Output Cache Tags*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L168) - - `useOutputCache` determines to allow *Output Cache*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L64) + - `useOutputCache` determines to allow *Output Cache*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L64) - - `outputCacheDefaultTtl` defines the default timeout for *Redis Tag Cache*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/utils/cache-instance.js#L16) + - `outputCacheDefaultTtl` defines the default timeout for *Redis Tag Cache*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/utils/cache-instance.js#L16) - - `availableCacheTags` contains a list of available cache tags. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/cache.js#L7) + - `availableCacheTags` contains a list of available cache tags. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/cache.js#L7) - - `invalidateCacheKey` is the key used for checking validity of invalidation. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L66) + - `invalidateCacheKey` is the key used for checking validity of invalidation. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L66) :::tip TIP You may take a look at [SSR Cache](/guide/basics/ssr-cache.html) in order to grab the idea of *Output Cache* in *Vue Storefront* ::: - - `dynamicConfigReload` enables to reload `config.json` on the fly with each server request. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L232) - - `dynamicConfigContinueOnError` allows to skip errors during configuration merge on the fly. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L240) + - `dynamicConfigReload` enables to reload `config.json` on the fly with each server request. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L232) + - `dynamicConfigContinueOnError` allows to skip errors during configuration merge on the fly. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L240) - `dynamicConfigExclude` - `dynamicConfigInclude` - `elasticCacheQuota` @@ -1234,8 +1234,8 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor - `tax`: ... - `defaultCountry` is the code name of the country on which tax is calculated for the store. - `defaultRegion` is default region. - - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) - - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/product.js#L48) + - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) + - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/product.js#L48) - `userGroupId`: null, - `useOnlyDefaultUserGroupId`: false, - `deprecatedPriceFieldsSupport`: true, diff --git a/docs/guide/archives/extensions.md b/docs/guide/archives/extensions.md index 7d375f2a3d..e193b3f2cb 100644 --- a/docs/guide/archives/extensions.md +++ b/docs/guide/archives/extensions.md @@ -10,9 +10,9 @@ This document is _archived_ and _NOT_ relevant with the latest version which is ### What do Vue Storefront extensions look like? Depending on your needs, Vue Storefront extensions can have two parts: -- **Client-side part,** which is just a [Vue Storefront module](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/modules/introduction.md). It covers most of the use cases. +- **Client-side part,** which is just a [Vue Storefront module](https://github.com/vuestorefront/vue-storefront/blob/master/docs/guide/modules/introduction.md). It covers most of the use cases. -- **Server-side part** which is a [Vue Storefront API extension](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/extensions/extending-api.md) and should be used if you want to add some endpoints to `vue-storefront-api` or interact with Elasticsearch. +- **Server-side part** which is a [Vue Storefront API extension](https://github.com/vuestorefront/vue-storefront/blob/master/docs/guide/extensions/extending-api.md) and should be used if you want to add some endpoints to `vue-storefront-api` or interact with Elasticsearch. ### Where extensions are located - On the client side, extension modules should be placed in `src/modules` folder of `vue-storefront` or installed via NPM cli and registered in `src/modules/index.ts` @@ -37,7 +37,7 @@ Some extensions need to have additional API methods to get some data directly fr You may add new ES collections [using the Migration mechanism](../data/data-migrations.md) -Then you may extend the [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) to add your custom API methods. Please take a look at: [mailchimp-subscribe](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/extensions/mailchimp-subscribe/index.js) for reference. +Then you may extend the [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) to add your custom API methods. Please take a look at: [mailchimp-subscribe](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/extensions/mailchimp-subscribe/index.js) for reference. To add the API extension to `vue-storefront-api`: diff --git a/docs/guide/archives/graphql.md b/docs/guide/archives/graphql.md index 7073a65246..73c942f582 100644 --- a/docs/guide/archives/graphql.md +++ b/docs/guide/archives/graphql.md @@ -11,9 +11,9 @@ Starting with Vue Storefront 1.4.0, we're supporting two ways of getting data fr - existing `api` mode, which is using ElasticSearch DSL as a query language - new `graphql` mode, which is using GraphQL queries. -You can set the desired API format in the `config/local.json` and `vue-storefront-api` is supporting both of them, however [the default is still set to `api`](https://github.com/DivanteLtd/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/config/default.json#L6). +You can set the desired API format in the `config/local.json` and `vue-storefront-api` is supporting both of them, however [the default is still set to `api`](https://github.com/vuestorefront/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/config/default.json#L6). -We've introduced an abstract [`SearchQuery`](https://github.com/DivanteLtd/vue-storefront/tree/develop/core/store/lib/search) interface with switchable Query Adapters to provide the abstraction layer. This is an ultra-cool feature, especially when you're integrating Vue Storefront with a custom backend application—you're able [to create your own adapter](https://github.com/DivanteLtd/vue-storefront/tree/develop/core/lib/search/adapter) to customize the way data is gathered from the backend. +We've introduced an abstract [`SearchQuery`](https://github.com/vuestorefront/vue-storefront/tree/develop/core/store/lib/search) interface with switchable Query Adapters to provide the abstraction layer. This is an ultra-cool feature, especially when you're integrating Vue Storefront with a custom backend application—you're able [to create your own adapter](https://github.com/vuestorefront/vue-storefront/tree/develop/core/lib/search/adapter) to customize the way data is gathered from the backend. 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. @@ -62,10 +62,10 @@ this.$store }); ``` -[More information on how to query the data](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/data/elastic-queries.md). +[More information on how to query the data](https://github.com/vuestorefront/vue-storefront/blob/develop/docs/guide/data/elastic-queries.md). **Bodybuilder** queries are still supported by our backward-compatibility mode, so if you've used bodybuilder in your theme, it's fine as long as you're using the `api` mode for the backend queries. The **legacy queries** using bodybuilder will still work - and [here is an example](https://github.com/pkarw/vue-storefront/blob/28feb8e5dc30ec216353ef87a859212379901c57/src/extensions/template/index.js#L36). -You can also use direct **ApolloQuery** GraphQL queries thanks to `vue-apollo` support. Please find the example [in here](https://github.com/DivanteLtd/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.gql.vue#L21). +You can also use direct **ApolloQuery** GraphQL queries thanks to `vue-apollo` support. Please find the example [in here](https://github.com/vuestorefront/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.gql.vue#L21). diff --git a/docs/guide/archives/modules.md b/docs/guide/archives/modules.md index a6f762c28f..0114207755 100644 --- a/docs/guide/archives/modules.md +++ b/docs/guide/archives/modules.md @@ -56,7 +56,7 @@ This is the modularity and extendability we are looking for in Vue Storefront an ### What is the purpose of VS modules? -The purpose is well described in [this discussion](https://github.com/DivanteLtd/vue-storefront/issues/1213). It can be summarized to: +The purpose is well described in [this discussion](https://github.com/vuestorefront/vue-storefront/issues/1213). It can be summarized to: - **Better extendability**: We can extend each module or replace it completely with the new one. For example, we may want to replace our Cart module with the one that allows to have multiple carts. With module approach, we can just detach the current Cart module and replace it with the new one. Another example can be using different modules for different content CMSes integration etc. - **Better developer experience**: Along with the modules we are introducing many features focused on delivering better and easier experience for developers to hop on in a more predictable way. We changed the way you can compose components with features, added unit tests, TypeScript interfaces etc. @@ -88,7 +88,7 @@ interface VueStorefrontModuleConfig { } ``` -See code [here](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/index.ts) +See code [here](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/index.ts) #### `key` (required) @@ -134,7 +134,7 @@ Try to have a similar file structure inside the ones that you create. If all the Not all of this folders and files should exist in every module. The only mandatory file is `index.ts` which is the entry point. The rest depends on your needs and module functionality. -You can take a look at [module template](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/module-template) with an example implementation of all features listed in config. +You can take a look at [module template](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/module-template) with an example implementation of all features listed in config. - `components` - Components logic related to this module (eg. Microcart for Cart module). Normally it contains `.ts` files but you can also create `.vue` files and provide some baseline markup if it is required for the component to work out of the box. - `pages` - If you want to provide full pages with your module, place them here. It's also a good practice to extend router configuration for these pages @@ -214,10 +214,10 @@ addToCart(product, success, failure) { } ``` -Try to choose a method based on use cases. [This](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28) is a good example of using callbacks. +Try to choose a method based on use cases. [This](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28) is a good example of using callbacks. -5. Create pure functions that can be easily called with a different argument. Rely on `data` properties instead of arguments only if it's required (for example, they are validated as [here](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28)) -6. Make a document for exported components like as follows : [document](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts) +5. Create pure functions that can be easily called with a different argument. Rely on `data` properties instead of arguments only if it's required (for example, they are validated as [here](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28)) +6. Make a document for exported components like as follows : [document](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts) 7. If your module core functionality is an integration with external service, better name it the same as this service (for example `mailchimp`) 8. Use named exports and type check. @@ -288,7 +288,7 @@ If you want to create a third party module, just copy the `src/modules/module-te ### Contributions -Please introduce every new feature as a standalone, encapsulated module. We also need your help in rewriting Vue Storefront to modular approach - [here](https://github.com/DivanteLtd/vue-storefront/issues?q=is%3Aissue+is%3Aopen+label%3A%22API+Module%22) you can find tasks related to this architecture change and [here](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/refactoring-to-modules.md) is the tutorial on how to approach applying these changes. +Please introduce every new feature as a standalone, encapsulated module. We also need your help in rewriting Vue Storefront to modular approach - [here](https://github.com/vuestorefront/vue-storefront/issues?q=is%3Aissue+is%3Aopen+label%3A%22API+Module%22) you can find tasks related to this architecture change and [here](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/refactoring-to-modules.md) is the tutorial on how to approach applying these changes. ## Cart module @@ -372,28 +372,28 @@ Cart Store is designed to handle all actions related the shopping cart. }, ``` -Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). +Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). The cart state data: - `itemsAfterPlatformTotals` - helper collection, dictionary where the key is Magento cart item `item_id` that stores the totals information per item - received from Magento; it's automatically populated when `config.cart.synchronize_totals` is enabled; -- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/syncTotals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) +- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/syncTotals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) - `cartIsLoaded` (bool) - true after dispatching `cart/load` - `shipping` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), - `payment` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), -- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added +- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/vuestorefront/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added #### Events The following events are published from `cart` store: -- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI +- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI - `EventBus.$emit('cart-before-add', { product: item })` - fired after product has been added to the cart, - `EventBus.$emit('cart-before-save', { items: state.cartItems })` - fired after the product cart has been saved, - `EventBus.$emit('cart-before-delete', { items: state.cartItems })` - the event fired before the cart item is going to be deleted with the current cart state (before item is deleted) - `EventBus.$emit('cart-after-delete', { items: state.cartItems })` - the event fired before the cart item has been deleted with the current cart state (after item is deleted) -- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property -- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property - `EventBus.$emit('application-after-loaded')` - event called after `cart/load` action has been dispatched to notify that cart is being available, - `EventBus.$emit('cart-after-updatetotals', { platformTotals: totals, platformTotalSegments: platformTotalSegments })` - event called after the totals from Magento has been synchronized with current state; it's going to be emitted only when `cart.synchronize_totals` option is enabled. @@ -562,8 +562,8 @@ All user related data is stored in the original eCommerce CMS/Magento and the mo The user state data: -- `token` - this is the current user token got from the [`user/login`](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L64). It's used to authorize all subsequent calls with the current user identity. If this token is not empty it does mean that the user is authorized. -- `current` - this is the current user object received from [`user/me`](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L105) - immediately called after the login action. +- `token` - this is the current user token got from the [`user/login`](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L64). It's used to authorize all subsequent calls with the current user identity. If this token is not empty it does mean that the user is authorized. +- `current` - this is the current user object received from [`user/me`](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L105) - immediately called after the login action. The user data format: @@ -632,8 +632,8 @@ The user data format: The following events are published from `user` store: -- `EventBus.$emit('session-after-started')` - executed just [after the application has been loaded](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L22) and the User UI session has started -- `EventBus.$emit('user-after-loggedin', res)` - executed after the successful [`user/me` action call](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L123) - so the user has been authorized and the profile loaded +- `EventBus.$emit('session-after-started')` - executed just [after the application has been loaded](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L22) and the User UI session has started +- `EventBus.$emit('user-after-loggedin', res)` - executed after the successful [`user/me` action call](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L123) - so the user has been authorized and the profile loaded #### Actions @@ -661,7 +661,7 @@ Loads the user profile from eCommerce CMS; when `userCache` is set to true the r ##### `update (context, userData)` -This action is used to update various user profile data. Please check the [user schema](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/modules/user/userProfile.schema.json) for the data format details. +This action is used to update various user profile data. Please check the [user schema](https://github.com/vuestorefront/vue-storefront/blob/master/core/store/modules/user/userProfile.schema.json) for the data format details. ##### `changePassword (context, passwordData)` @@ -926,14 +926,14 @@ The Checkout Store is designed to handle the passage from user's cart to actual } ``` -The state of the Checkout module contains both the [Order object](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json) and the information given by the user during the checkout process, to be stored for further use in the `localForage`. +The state of the Checkout module contains both the [Order object](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json) and the information given by the user during the checkout process, to be stored for further use in the `localForage`. -The state is modified by [`placeOrder`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L11) action and [`load`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L41) which loads the state from browser database. +The state is modified by [`placeOrder`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L11) action and [`load`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L41) which loads the state from browser database. The category state data: -- `order` - this is the last order to be placed, the [schema is defined](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json) in Ajv compliant format -- `shippingDetails`, `paymentDetails` - the address information provided by the user during the [Checkout](https://github.com/DivanteLtd/vue-storefront/blob/master/core/pages/Checkout.vue). +- `order` - this is the last order to be placed, the [schema is defined](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json) in Ajv compliant format +- `shippingDetails`, `paymentDetails` - the address information provided by the user during the [Checkout](https://github.com/vuestorefront/vue-storefront/blob/master/core/pages/Checkout.vue). #### Actions @@ -941,7 +941,7 @@ The cart store provides following public actions: ##### `placeOrder (context, { order })` -Action called by `Checkout.vue` to complete the order. Data object is validated against the [order schema](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json), stored within the `localForage` collection by subseqent call of [`order/placeOrder`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/order/actions.js#L12) +Action called by `Checkout.vue` to complete the order. Data object is validated against the [order schema](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json), stored within the `localForage` collection by subseqent call of [`order/placeOrder`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/order/actions.js#L12) ##### `savePersonalDetails ({ commit }, personalDetails)` @@ -1040,7 +1040,7 @@ this.$store.dispatch('attribute/list', { }); ``` -This is example from [product compare feature](https://github.com/DivanteLtd/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). +This is example from [product compare feature](https://github.com/vuestorefront/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). The attribute state data: @@ -1085,7 +1085,7 @@ const state = { }; ``` -Category state is generally populated by just two methods [list](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) +Category state is generally populated by just two methods [list](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) :::tip Note The action `category/single` uses `localForage` cache only - no ElasticSearch data store directly; because of this optimization, please do download the categories list by dispatching `category/list` at first. @@ -1093,7 +1093,7 @@ The action `category/single` uses `localForage` cache only - no ElasticSearch da The category state data: -- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) - `current` - this is the current category object, - `filters` is a current state of the category filters - dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: @@ -1112,7 +1112,7 @@ Please note, that we're using the Magento like EAV attributes structure - so the The following events are published from `category` store: -- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded, +- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded, - `EventBus.$emit('category-after-current', { category: category })` - after current category has been changed - this is subsequent call of `category/single` action, - `EventBus.$emit('category-after-reset', { })` - after category has been reset (for example in the process of moving from one category page to another) - `EventBus.$emit('category-after-list', { query: qrObj, sort: sort, size: size, start: start, list: resp })` - this event emits the current category list as it's returned by `category/list`. @@ -1181,13 +1181,13 @@ const state = { }; ``` -Product state is generally populated by just two methods [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215) +Product state is generally populated by just two methods [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215) The product state data: -- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) -- `current` - this is the product object with selected `configurable_children` variant - so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203) this is the product which is added to the cart after "Add to cart" -- `current_options` - it's a list used to populate the variant selector on the [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56) it contains dictionary of attributes x possible attribute values and labels and it's populated by [setupVariants](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property +- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `current` - this is the product object with selected `configurable_children` variant - so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203) this is the product which is added to the cart after "Add to cart" +- `current_options` - it's a list used to populate the variant selector on the [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56) it contains dictionary of attributes x possible attribute values and labels and it's populated by [setupVariants](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property - `current_configuration` is a current product configuration - dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: ```json @@ -1199,16 +1199,16 @@ The product state data: Please note, that we're using the Magento like EAV attributes structure - so the values here are an attribute value indexes not the values itself. Please take a look at [Data formats](../data/elasticsearch.md) for a reference -- `parent` - if the current product is a `type_id="single"` then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) -- `list` - this is an Array of products loaded by [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) +- `parent` - if the current product is a `type_id="single"` then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) +- `list` - this is an Array of products loaded by [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) - `original` - used only for `configurable` products; this is the base product with no variant selected -- `related` - this is dictionary of related products; set outside this store (for [example here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) +- `related` - this is dictionary of related products; set outside this store (for [example here](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) ##### Events The following events are published from `product` store: -- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento; +- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento; - `EventBus.$emit('product-after-configure', { product: product, configuration: configuration, selectedVariant: selectedVariant })` from `configureProductAsync` (called by `product/configure` action after `product/single`). This event provides the information about selected product variant on the product page - `EventBus.$emit('product-after-list', { query: query, start: start, size: size, sort: sort, entityType: entityType, result: resp })` - this event emits the current product list as it's returned by `product/list` providing the current filters etc. You can mark specific product list identifier by setting `meta` property; it's important because on single page this event can be executed multiple time for each individual block of products - `EventBus.$emit('product-after-single', { key: key, options: options, product: cachedProduct })` - after single product has been loaded (invoked by `product/single` action) @@ -1237,7 +1237,7 @@ This method is called as a subsequent call of `Product.vue:fetchData` or `produc **`checkConfigurableParent (context, {product})`** -This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so the redirect is being made to the parent product. It's a fix for [#508](https://github.com/DivanteLtd/vue-storefront/issues/508) +This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so the redirect is being made to the parent product. It's a fix for [#508](https://github.com/vuestorefront/vue-storefront/issues/508) **`setupVariants (context, { product })`** diff --git a/docs/guide/archives/typescript.md b/docs/guide/archives/typescript.md index 73ca82743d..341b73e735 100644 --- a/docs/guide/archives/typescript.md +++ b/docs/guide/archives/typescript.md @@ -23,7 +23,7 @@ Therefore we're only refactoring: where it makes sense. The key TypeScript feature we feel is usable are data types. -We're in the middle of [refactoring `core/components` to `core/api` modules](https://github.com/DivanteLtd/vue-storefront/issues/1213). All the modules should be created using TypeScript +We're in the middle of [refactoring `core/components` to `core/api` modules](https://github.com/vuestorefront/vue-storefront/issues/1213). All the modules should be created using TypeScript ### The Action Plan: diff --git a/docs/guide/archives/vuex.md b/docs/guide/archives/vuex.md index 33e86cc807..ae7f9eeb0b 100644 --- a/docs/guide/archives/vuex.md +++ b/docs/guide/archives/vuex.md @@ -7,7 +7,7 @@ This document is _archived_ and _NOT_ relevant with the latest version which is ## Introduction All data processing and remote requests should be managed by Vuex data stores. The core modules generally contain `store` folder inside. -You can modify the existing store actions by responding to events. Events are specified in the docs below and can be found in the [core module](https://github.com/DivanteLtd/vue-storefront/tree/master/core), where `EventBus.$emit` has been mostly used for Vuex Actions. +You can modify the existing store actions by responding to events. Events are specified in the docs below and can be found in the [core module](https://github.com/vuestorefront/vue-storefront/tree/master/core), where `EventBus.$emit` has been mostly used for Vuex Actions. **You should put all the REST calls, Elasticsearch data queries inside the Vuex Actions.** This is our default design pattern for managing the data. @@ -26,7 +26,7 @@ Before you start working with Vuex, it's recommended to get familiar with our [v - [Sync](sync-store.md) - [User](User%20Store.md) - [Attribute](attribute-store.md) -- [UI Store]() +- [UI Store]() ### Override existing core modules @@ -233,13 +233,13 @@ const state = { }; ``` -The product state is generally populated by just two methods - [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) - and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215). +The product state is generally populated by just two methods - [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) - and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215). The product state data: -- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) -- `current` - This is the product object with selected `configurable_children` variant, so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203). This is the product which is added to the cart after "Add to cart" -- `current_options` - The list used to populate the variant selector on the [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56). It contains dictionary of attributes and possible attribute values and labels, and it's populated by [setupVariants](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property. +- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `current` - This is the product object with selected `configurable_children` variant, so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203). This is the product which is added to the cart after "Add to cart" +- `current_options` - The list used to populate the variant selector on the [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56). It contains dictionary of attributes and possible attribute values and labels, and it's populated by [setupVariants](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property. - `current_configuration` The current product configuration. A dictionary of selected variant attributes; for example, it contains a dictionary of selected product attributes: ```json @@ -251,16 +251,16 @@ The product state data: Please note, we're using the Magento-like EAV attributes structure so the values here are attribute value indexes, not the values itself. Please take a look at [Data formats](../data/elasticsearch.md) for a reference. -- `parent` - If the current product is a `type_id="single"`, then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) -- `list` - This is an array of products loaded by [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) +- `parent` - If the current product is a `type_id="single"`, then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) +- `list` - This is an array of products loaded by [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) - `original` - Used only for `configurable` products, this is the base product with no selected variant. -- `related` - This is dictionary of related products; set outside this store (for [example here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) +- `related` - This is dictionary of related products; set outside this store (for [example here](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) ### Events The following events are published from `product` store: -- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento. +- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento. - `EventBus.$emit('product-after-configure', { product: product, configuration: configuration, selectedVariant: selectedVariant })` from `configureProductAsync` (called by `product/configure` action after `product/single`). This event provides the information about selected product variant on the product page. - `EventBus.$emit('product-after-list', { query: query, start: start, size: size, sort: sort, entityType: entityType, result: resp })` - this event emits the current product list as it's returned by `product/list`providing the current filters, etc. You can mark the specific product list identifier by setting the `meta` property; it's important because on a single page, this event can be executed multiple time for each individual block of products. - `EventBus.$emit('product-after-single', { key: key, options: options, product: cachedProduct })` - After single product has been loaded (invoked by `product/single` action). @@ -285,7 +285,7 @@ This method is called as a subsequent call of `Product.vue:fetchData` or `produc #### `checkConfigurableParent (context, {product})` -This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so, the redirect is being made to the parent product. It's a fix for [#508](https://github.com/DivanteLtd/vue-storefront/issues/508) +This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so, the redirect is being made to the parent product. It's a fix for [#508](https://github.com/vuestorefront/vue-storefront/issues/508) #### `setupVariants (context, { product })` @@ -372,7 +372,7 @@ const state = { }; ``` -The category state is generally populated by just two methods- [list](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) - and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) +The category state is generally populated by just two methods- [list](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) - and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) :::tip Note The action `category/single` uses `localForage` cache only—no Elasticsearch data store directly. Because of this optimization, download the categories list by dispatching the `category/list` at first. @@ -380,7 +380,7 @@ The action `category/single` uses `localForage` cache only—no Elasticsearch da The category state data: -- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) - `current` - This is the current category object. - `filters` is a current state of the category filters, a dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: @@ -399,7 +399,7 @@ Please note, we're using the Magento-like EAV attributes structure so the values The following events are published from `category` store: -- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded. +- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded. - `EventBus.$emit('category-after-current', { category: category })` - After current category has been changed - this is subsequent call of `category/single` action. - `EventBus.$emit('category-after-reset', { })` - After the category has been reset (for example, in the process of moving from one category page to another). - `EventBus.$emit('category-after-list', { query: qrObj, sort: sort, size: size, start: start, list: resp })` - This event emits the current category list as it's returned by `category/list`. @@ -504,7 +504,7 @@ this.$store.dispatch('attribute/list', { }); ``` -This is an example from [product compare feature](https://github.com/DivanteLtd/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). +This is an example from [product compare feature](https://github.com/vuestorefront/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). The attribute state data: diff --git a/docs/guide/basics/configuration.md b/docs/guide/basics/configuration.md index 002e64ea16..76c09aa11d 100644 --- a/docs/guide/basics/configuration.md +++ b/docs/guide/basics/configuration.md @@ -7,7 +7,7 @@ The Vue Storefront application uses the [node-config](https://github.com/lorenwe - `local.json` is the second configuration file which is .gitignore'd from the repository. This is the place where you should store all instance-specific configuration variables. :::tip NOTE -Please not that the `config` is bundled into JavaScript files that are returned to the user's browser. Please **NEVER PUT ANY SENSITIVE INFORMATION** into the config file of `vue-storefront`. If your application requires some authorization / tokens /etc - please store them and access via dedicated [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) or [`storefront-api`](https://github.com/DivanteLtd/storefront-api) extension that will prevent these sensitive information from being returned to the users. +Please not that the `config` is bundled into JavaScript files that are returned to the user's browser. Please **NEVER PUT ANY SENSITIVE INFORMATION** into the config file of `vue-storefront`. If your application requires some authorization / tokens /etc - please store them and access via dedicated [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) or [`storefront-api`](https://github.com/vuestorefront/storefront-api) extension that will prevent these sensitive information from being returned to the users. ::: 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. @@ -88,7 +88,7 @@ This is the Redis configuration for the output cache. See additional information }, ``` -This is an optional GraphQL endpoint. We're now supporting graphQL for the [catalog](https://docs.vuestorefront.io/guide/basics/graphql.html) and this section is being used when `server.api` is set to `graphql` (default is "api") +This is an optional GraphQL endpoint. We're now supporting graphQL for the [catalog](/guide/basics/graphql.html) and this section is being used when `server.api` is set to `graphql` (default is "api") ## ElasticSearch @@ -130,7 +130,7 @@ The SSR data is being completed in the `asyncData` static method. If this config `src/themes/default/pages/Product.vue` -> `asyncData` If it's set to `false`, then **just the** `src/themes/default/pages/Product.vue` -> `asyncData` will be executed. -This option is referenced in the [core/client-entry.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/client-entry.ts) line: 85. +This option is referenced in the [core/client-entry.ts](https://github.com/vuestorefront/vue-storefront/blob/master/core/client-entry.ts) line: 85. ```json "lazyHydrateFor": ["category-next.products", "homepage"], @@ -149,9 +149,9 @@ Available out of the box for `category-next.products` and `homepage`. This both option is used when you don't want re-attempting task of just X number time attempt task. -`maxNetworkTaskAttempts` config variable is referenced in the [core/lib/sync/task.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/sync/task.ts) and It's reattempt if user token is invalid. +`maxNetworkTaskAttempts` config variable is referenced in the [core/lib/sync/task.ts](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/sync/task.ts) and It's reattempt if user token is invalid. -`maxCartBypassAttempts` config variable is referenced in the [core/modules/cart/store/actions.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/cart/store/actions.ts) +`maxCartBypassAttempts` config variable is referenced in the [core/modules/cart/store/actions.ts](https://github.com/vuestorefront/vue-storefront/blob/master/core/modules/cart/store/actions.ts) ## Default store code @@ -159,7 +159,7 @@ This both option is used when you don't want re-attempting task of just X number "defaultStoreCode": "", ``` -This option is used only in the [Multistore setup](../integrations/multistore.md). By default it's `''` but if you're running, for example, a 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/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/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, a 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/lib/multistore.ts](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/multistore.ts) ## Store views @@ -172,7 +172,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/lib/multistore.ts](https://github.com/DivanteLtd/vue-storefront/blob/master/core/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...) +You should add all the multistore codes to the `mapStoreUrlsFor` as this property is used by [core/lib/multistore.ts](https://github.com/vuestorefront/vue-storefront/blob/master/core/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/vuestorefront/vue-storefront/blob/master/core/client-entry.ts) settings (i18n, API requests with specific storeCode etc...) `commonCache` is refering to llocal browser cache. If it's set to false (default) the cache of cart, catalog, user data etc is shared between storeViews with default prefix (shop). Otherwise each of them is stored separately (storecode-shop prefix). @@ -200,7 +200,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 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. +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/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Switcher/Language.vue) generates the list of the stores. It accepts not only path, but also domains as well. This attribute is not inherited through the "extend" mechanism. @@ -229,7 +229,7 @@ ElasticSearch settings can be overridden in the specific `storeView` config. You }, ``` -Taxes section is used by the [core/modules/catalog/helpers/tax](https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/catalog/helpers/tax). When `sourcePricesIncludesTax` is set to `true` it means that the prices indexed in the ElasticSearch already consists of the taxes. If it's set to `false` the taxes will be calculated runtime. +Taxes section is used by the [core/modules/catalog/helpers/tax](https://github.com/vuestorefront/vue-storefront/blob/master/core/modules/catalog/helpers/tax). When `sourcePricesIncludesTax` is set to `true` it means that the prices indexed in the ElasticSearch already consists of the taxes. If it's set to `false` the taxes will be calculated runtime. ```json "seo": { @@ -256,7 +256,7 @@ The `defaultCountry` and the `defaultRegion` settings are being used for finding }, ``` -The internationalization settings are used by the translation engine (`defautlLocale`) and the [Language/Switcher.vue](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Switcher/Language.vue) (`fullCountryName`, `fullLanguageName`). `currencyCode` is used for some of the API calls (rendering prices, mostly) and `currencySign` is being used for displaying the prices in the frontend. +The internationalization settings are used by the translation engine (`defautlLocale`) and the [Language/Switcher.vue](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Switcher/Language.vue) (`fullCountryName`, `fullLanguageName`). `currencyCode` is used for some of the API calls (rendering prices, mostly) and `currencySign` is being used for displaying the prices in the frontend. ```json @@ -275,7 +275,7 @@ Keep in mind that `url`, `storeCode` and `appendStoreCode` attributes cannot be If this option is set to true, Vue Storefront will be limiting the data retrieved from the API endpoints to the `includeFields` and remove all the `excludeFields` as set for all the specific entities below. This option is set to `true` by default, as the JSON objects could be of significant size! -This option property is referenced in the [core/modules/catalog/store/product](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/product), [core/modules/catalog/store/category](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/category), [core/modules/catalog/store/attribute](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/attribute) +This option property is referenced in the [core/modules/catalog/store/product](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/product), [core/modules/catalog/store/category](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/category), [core/modules/catalog/store/attribute](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/attribute) ```json "twoStageCaching": true, @@ -285,7 +285,7 @@ Vue Storefront caches all the data entities retrieved from `vue-storefront-api` 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. -Please take a look at the [core/modules/catalog/store/category](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/category) for the reference. +Please take a look at the [core/modules/catalog/store/category](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/category) for the reference. ```json "optimizeShoppingCart": true, @@ -293,7 +293,7 @@ Please take a look at the [core/modules/catalog/store/category](https://github.c Vue Storefront product objects can be quite large. They consist of `configurable_children`, `media_gallery` and other information. Quite significant for rendering the Product and Category pages, but not so useful in the Shopping Cart. To limit the cart size (as it's transferred to the server while making an order), this option is being used. -Please take a look at the [core/modules/cart](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/cart). +Please take a look at the [core/modules/cart](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/cart). ```json "optimizeShoppingCartOmitFields": ["configurable_children", "configurable_options", "media_gallery", "description", "category", "category_ids", "product_links", "stock", "description"], @@ -350,7 +350,7 @@ EventBus.$emit('servercart-after-diff', { ``` 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/modules/cart](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/cart) for a reference. +Please have a look at the [core/modules/cart](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/cart) for a reference. ```json "synchronize": true, @@ -358,7 +358,7 @@ Please have a look at the [core/modules/cart](https://github.com/DivanteLtd/vue- 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-side shopping cart with the server-side one. -Please take a look at the [core/modules/cart](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/cart) for a reference. +Please take a look at the [core/modules/cart](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/cart) for a reference. ```json "synchronize_totals": true, @@ -418,21 +418,21 @@ If this option is set to `true`, you can edit current options such as color or s "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. Please take a look at the [core/lib/search.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/lib/search.ts) and [core/modules/catalog/store/category/mutations.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/category/mutations.ts) for reference. +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/lib/search.ts](https://github.com/vuestorefront/vue-storefront/tree/master/core/lib/search.ts) and [core/modules/catalog/store/category/mutations.ts](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/category/mutations.ts) for reference. -**Please note:** The `url_key` field must be unique across the categories collection. Therefore, we're by default generating its value based on name and 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:** The `url_key` field must be unique across the categories collection. Therefore, we're by default generating its value based on name and category ID. Please [switch this option off](https://github.com/vuestorefront/mage2vuestorefront/#initial-vue-storefront-import) if you'd like to keep the `url_key` as they come from Magento2. ```json "configurableChildrenStockPrefetchStatic": false, "configurableChildrenStockPrefetchStaticPrefetchCount": 8, ``` -Vue Storefront tries to dynamically get the stock quantities for simple products related to the configurable ones (products included in the `configurabe_children` array). If the `configurableChildrenStockPrefetchStatic` is set to `true`, the stock items are prefetched from the Category page level. Please take a look at the [core/modules/catalog/store/category/actions.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/store/category/actions.ts). The second option - `configurableChildrenStockPrefetchStaticPrefetchCount` sets how many products in the category should be prefetched using this mechanism. +Vue Storefront tries to dynamically get the stock quantities for simple products related to the configurable ones (products included in the `configurabe_children` array). If the `configurableChildrenStockPrefetchStatic` is set to `true`, the stock items are prefetched from the Category page level. Please take a look at the [core/modules/catalog/store/category/actions.ts](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/store/category/actions.ts). The second option - `configurableChildrenStockPrefetchStaticPrefetchCount` sets how many products in the category should be prefetched using this mechanism. ```json "configurableChildrenStockPrefetchDynamic": false, ``` -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) +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/vuestorefront/vue-storefront/tree/master/src/themes/default/pages/Category.vue) ```json "filterUnavailableVariants": false, @@ -456,7 +456,7 @@ If this option is set to true (default), Vue Storefront will prevent accessing t "alwaysSyncPlatformPricesOver": false, ``` -This property is used in the [core/store/modules/product/actions.ts](https://github.com/DivanteLtd/vue-storefront/tree/master/core/store/modules/product/actions.ts); if it's set to `true` Vue Storefront will query the `vue-storefront-api` endpoint (`/api/products/render-list`) to render the product prices for currently displayed product(s) **every time** the user is about to display the product or category page. +This property is used in the [core/store/modules/product/actions.ts](https://github.com/vuestorefront/vue-storefront/tree/master/core/store/modules/product/actions.ts); if it's set to `true` Vue Storefront will query the `vue-storefront-api` endpoint (`/api/products/render-list`) to render the product prices for currently displayed product(s) **every time** the user is about to display the product or category page. ```json @@ -488,7 +488,7 @@ This is the `vue-storefront-api` endpoint for rendering product lists. "defaultFilters": ["color", "size", "price", "erin_recommends"], ``` -`defaultFilters` array should contain **all** the filters that could be used in the [Sidebar menu filters](https://github.com/DivanteLtd/vue-storefront/tree/master/src/themes/default/components/core/blocks/Category/Sidebar.vue). +`defaultFilters` array should contain **all** the filters that could be used in the [Sidebar menu filters](https://github.com/vuestorefront/vue-storefront/tree/master/src/themes/default/components/core/blocks/Category/Sidebar.vue). ```json "sortByAttributes": { @@ -548,7 +548,7 @@ This property sets the URL of the order endpoint. Orders will be placed to this }, ``` -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 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/vuestorefront/vue-storefront/tree/master/core/pages/Checkout.js) to map the payment methods provided by the backend service with the ones available to 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": { @@ -563,7 +563,7 @@ This is a simple map used in the [core/pages/Checkout.js](https://github.com/Div When a user places the order in 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. +Please check the [core/service-worker/order.js](https://github.com/vuestorefront/vue-storefront/tree/master/core/service-worker/order.js) for reference. 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 the Magento side), the user will be notified immediately. If there is a transmission issue (no connection, servers are down, etc.), the order is put into a queue (as it was prior to 1.6). If `config.orders.directBackendSync` is set to false, the legacy behavior 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` @@ -610,7 +610,7 @@ We're using [localForage](https://github.com/localForage/localForage) library to In the `users` section, we can set the API endpoints for specific use-related operations. Most of the time, you only need to change the basic URL. -When the `autoRefreshTokens` property is set to `true` (default) Vue Storefront will try to refresh the user tokens automatically when the session ends. 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. +When the `autoRefreshTokens` property is set to `true` (default) Vue Storefront will try to refresh the user tokens automatically when the session ends. Please take a look at the [core/lib/sync/task.ts](https://github.com/vuestorefront/vue-storefront/tree/master/core/lib/sync/task.ts) for reference. ## Stock @@ -651,7 +651,7 @@ If you wan't to also show non-product image thumbnails you must set `useSpecific }, ``` -This is just to be used in the [core/scripts/installer.js](https://github.com/DivanteLtd/vue-storefront/tree/master/core/scripts/installer.js) +This is just to be used in the [core/scripts/installer.js](https://github.com/vuestorefront/vue-storefront/tree/master/core/scripts/installer.js) ## Demo mode @@ -674,7 +674,7 @@ When `demomode` is set to `true`, Vue Storefront will display the "Welcome to Vu ``` The taxes section is used by the -[core/modules/catalog/helpers/tax](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/catalog/helpers/tax.ts). +[core/modules/catalog/helpers/tax](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/catalog/helpers/tax.ts). When `sourcePricesIncludesTax` is set to `true` it means that the prices indexed in the Elasticsearch already consist of the taxes. If it's set to `false` the taxes will be calculated runtime. The `userGroupId` @@ -720,7 +720,7 @@ Available shipping methods when the backend platform is not providing the dynami }, ``` -Internationalization settings are used by the translation engine (`defautlLocale`) and the [Language/Switcher.vue](https://github.com/DivanteLtd/vue-storefront/tree/master/src/themes/default/components/core/blocks/Switcher/Language.vue) (`fullCountryName`, `fullLanguageName`). `currencyCode` is used for some of the API calls (rendering prices, mostly) and `currencySign` is being used for displaying the prices in the frontend. +Internationalization settings are used by the translation engine (`defautlLocale`) and the [Language/Switcher.vue](https://github.com/vuestorefront/vue-storefront/tree/master/src/themes/default/components/core/blocks/Switcher/Language.vue) (`fullCountryName`, `fullLanguageName`). `currencyCode` is used for some of the API calls (rendering prices, mostly) and `currencySign` is being used for displaying the prices in the frontend. ## Mailchimp @@ -730,7 +730,7 @@ Internationalization settings are used by the translation engine (`defautlLocale }, ``` -This property is used by the Mailchimp extension (See [src/extensions](https://github.com/DivanteLtd/vue-storefront-api/tree/master/src/api/extensions) for a reference). +This property is used by the Mailchimp extension (See [src/extensions](https://github.com/vuestorefront/vue-storefront-api/tree/master/src/api/extensions) for a reference). ## Theme @@ -770,7 +770,7 @@ You can put your Hotjar Site ID in here as to be used by the hotjar extension. } ``` -This is the URL endpoint of the Snow.dog Magento 2 CMS extensions. It needs to be set when using the [src/api/extensions/cms-data](https://github.com/DivanteLtd/vue-storefront-api/tree/master/src/api/extensions/cms-data) +This is the URL endpoint of the Snow.dog Magento 2 CMS extensions. It needs to be set when using the [src/api/extensions/cms-data](https://github.com/vuestorefront/vue-storefront-api/tree/master/src/api/extensions/cms-data) ## Use price tiers @@ -842,4 +842,4 @@ This is a list of priorities for search features (higher boost = more important } ``` -Search queries used by specific components (for example, related products). The format of the query has been described [here](https://docs.vuestorefront.io/guide/data/elastic-queries.html) +Search queries used by specific components (for example, related products). The format of the query has been described [here](/guide/data/elastic-queries.html) diff --git a/docs/guide/basics/contributing.md b/docs/guide/basics/contributing.md index 60dcc75859..b0b18bcdfb 100644 --- a/docs/guide/basics/contributing.md +++ b/docs/guide/basics/contributing.md @@ -33,7 +33,7 @@ We're introducing TypeScript to Vue Storefront core, so you can use it where it' Here’s how to submit a pull request. **Pull requests that don't meet these requirements will not be merged.** ::: 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. +**ALWAYS** use [Pull Request template](https://github.com/vuestorefront/vue-storefront/blob/master/PULL_REQUEST_TEMPLATE.md), it's automatically added to each PR. ::: 1. Fork the repository and clone it locally on the 'develop' branch. @@ -46,9 +46,9 @@ Here’s how to submit a pull request. **Pull requests that don't meet these req 4. Reference any relevant issues or supporting documentation in your PR (ex. `Issue: 39. Issue title.`). -5. If you are adding a new feature, please provide documentation along with the PR. Also, add it to the [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 the [upgrade notes](https://github.com/vuestorefront/vue-storefront/blob/master/doc/Upgrade%20notes.md) -6. If you are removing/renaming something or changing its behavior, please also include it in the [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 the [upgrade notes](https://github.com/vuestorefront/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 the Travis CI build. diff --git a/docs/guide/basics/graphql.md b/docs/guide/basics/graphql.md index 0aa9289919..8bbd791e02 100644 --- a/docs/guide/basics/graphql.md +++ b/docs/guide/basics/graphql.md @@ -5,9 +5,9 @@ Starting with Vue Storefront 1.4.0, we're supporting two ways of getting data fr - existing `api` mode, which is using ElasticSearch DSL as a query language - new `graphql` mode, which is using GraphQL queries. -You can set the desired API format in the `config/local.json` and `vue-storefront-api` is supporting both of them, however [the default is still set to `api`](https://github.com/DivanteLtd/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/config/default.json#L6). +You can set the desired API format in the `config/local.json` and `vue-storefront-api` is supporting both of them, however [the default is still set to `api`](https://github.com/vuestorefront/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/config/default.json#L6). -We've introduced an abstract [`SearchQuery`](https://github.com/DivanteLtd/vue-storefront/tree/develop/core/store/lib/search) interface with switchable Query Adapters to provide the abstraction layer. This is an ultra-cool feature, especially when you're integrating Vue Storefront with a custom backend application—you're able [to create your own adapter](https://github.com/DivanteLtd/vue-storefront/tree/develop/core/lib/search/adapter) to customize the way data is gathered from the backend. +We've introduced an abstract [`SearchQuery`](https://github.com/vuestorefront/vue-storefront/tree/develop/core/store/lib/search) interface with switchable Query Adapters to provide the abstraction layer. This is an ultra-cool feature, especially when you're integrating Vue Storefront with a custom backend application—you're able [to create your own adapter](https://github.com/vuestorefront/vue-storefront/tree/develop/core/lib/search/adapter) to customize the way data is gathered from the backend. 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. @@ -56,10 +56,10 @@ this.$store }); ``` -[More information on how to query the data](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/data/elastic-queries.md). +[More information on how to query the data](https://github.com/vuestorefront/vue-storefront/blob/develop/docs/guide/data/elastic-queries.md). **Bodybuilder** queries are still supported by our backward-compatibility mode, so if you've used bodybuilder in your theme, it's fine as long as you're using the `api` mode for the backend queries. The **legacy queries** using bodybuilder will still work - and [here is an example](https://github.com/pkarw/vue-storefront/blob/28feb8e5dc30ec216353ef87a859212379901c57/src/extensions/template/index.js#L36). -You can also use direct **ApolloQuery** GraphQL queries thanks to `vue-apollo` support. Please find the example [in here](https://github.com/DivanteLtd/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.gql.vue#L21). +You can also use direct **ApolloQuery** GraphQL queries thanks to `vue-apollo` support. Please find the example [in here](https://github.com/vuestorefront/vue-storefront/blob/4cbf866ca93f917b04461d3ae139a2d26ddf552a/src/themes/default/components/core/blocks/SearchPanel/SearchPanel.gql.vue#L21). diff --git a/docs/guide/basics/recipes.md b/docs/guide/basics/recipes.md index 1e42d6fa21..be73b9ba35 100644 --- a/docs/guide/basics/recipes.md +++ b/docs/guide/basics/recipes.md @@ -51,14 +51,14 @@ In a case of } ``` -See the discussion in [#137](https://github.com/DivanteLtd/vue-storefront/issues/137). -Please also check the [Database tool](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/data/database-tool.md) +See the discussion in [#137](https://github.com/vuestorefront/vue-storefront/issues/137). +Please also check the [Database tool](https://github.com/vuestorefront/vue-storefront/blob/master/docs/guide/data/database-tool.md) ## HTTP 400 / CORS errors when trying to retrieve detailed product information from API If all the other requests work without any issues then it's highly possible that your products have too many attributes. All of them are included in ElasticSearch query sent via GET request which might become too long. Try to limit amount of attributes that are indexed and later used for this product view. -This answer is valid until [this issue is resolved](https://github.com/DivanteLtd/vue-storefront/issues/2167). +This answer is valid until [this issue is resolved](https://github.com/vuestorefront/vue-storefront/issues/2167). ## What's the recommended way to use git on custom development @@ -108,9 +108,9 @@ By default, when the user selects any specific product variant on the `Product.v To correct this behavior you can: -- Modify the [core](https://github.com/DivanteLtd/vue-storefront/blob/6a5a569a7e96703b865f841dabbe3c6a1020b3ab/core/store/modules/product/actions.js#L311) - to filter out the `name` attribute from `Object.assign`, which is responsible for copying the attributes from variant -> current product. +- Modify the [core](https://github.com/vuestorefront/vue-storefront/blob/6a5a569a7e96703b865f841dabbe3c6a1020b3ab/core/store/modules/product/actions.js#L311) - to filter out the `name` attribute from `Object.assign`, which is responsible for copying the attributes from variant -> current product. -- Modify `mage2vuestorefront` importer to correct the `configurable_children` [product names](https://github.com/DivanteLtd/mage2vuestorefront/blob/ca0c4723530b148cfdfb99784168af529e39d599/src/adapters/magento/product.js#L167). +- Modify `mage2vuestorefront` importer to correct the `configurable_children` [product names](https://github.com/vuestorefront/mage2vuestorefront/blob/ca0c4723530b148cfdfb99784168af529e39d599/src/adapters/magento/product.js#L167). - Use bound to the `EventBus.$emitFilter('product-after-single', { key: key, options: options, product: products[0] })` event and modify the `product.configurable_children` properties: @@ -125,7 +125,7 @@ To correct this behavior you can: ## How to get dynamic prices to work (catalog rules) -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). +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/vuestorefront/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`): @@ -156,7 +156,7 @@ his change means that each time the product list will be displayed, VS will get ## No products found! after node --harmony cli.js fullreindex -Take a look at the discussion at [#644](https://github.com/DivanteLtd/vue-storefront/issues/644) +Take a look at the discussion at [#644](https://github.com/vuestorefront/vue-storefront/issues/644) Long story short, you need to run the following command within the `mage2nosql` project: ```bash @@ -190,7 +190,7 @@ Yes, I believe it could. You should expose the API accordingly to our [spec](../ ## Is there any documentation on integrating payment gateways? -We're working on kind of a 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 and 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 a 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 and docs will show up is [https://github.com/vuestorefront/vue-storefront/issues/923](https://github.com/vuestorefront/vue-storefront/issues/923). ## Is there any internationalization support? @@ -222,23 +222,23 @@ Please check the [Multistore setup](../integrations/multistore.md) guide for det ## How to deal with Category filters based on configurable_children -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 want 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. +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/vuestorefront/mage2vuestorefront) for all attributes set as `product.configurable_options` (by default: color, size). If you want 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 -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 an 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/vuestorefront/vue-storefront-api/commit/2c7e10b4c4294f222f7a1aae96627d6a0e23f30e). Now you can generate an SEO map redirecting users from the original Magento URLs to Vue Storefront URLs by running: ```bash yarn seo redirects — —oldFormat=true | false ``` -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 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/vuestorefront/mage2vuestorefront). -**Please note:** As `url_key` field must be unique across categories collection. Therefore, we're by default generating its value based on name and 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 and category ID. Please [switch this option off](https://github.com/vuestorefront/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 -This is because the demo data dump works on the `demo-magento2.vuestorefront.io` instance attribute ids. Please re-import all product data using [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) +This is because the demo data dump works on the `demo-magento2.vuestorefront.io` instance attribute ids. Please re-import all product data using [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) ## Adding custom category filters @@ -248,7 +248,7 @@ You need to add the attributes you want to have displayed to the `config/local.j "defaultFilters": ["color", "size", "price", "erin_recommends"], ``` -And then you can use proper controls for each individual filter [here](https://github.com/DivanteLtd/vue-storefront/blob/49dc8a2dc9326e9e83d663cc27f8bb0688525f13/src/themes/default/components/core/blocks/Category/Sidebar.vue). +And then you can use proper controls for each individual filter [here](https://github.com/vuestorefront/vue-storefront/blob/49dc8a2dc9326e9e83d663cc27f8bb0688525f13/src/themes/default/components/core/blocks/Category/Sidebar.vue). ## Collecting all VSF i18n phrases into a CSV diff --git a/docs/guide/basics/ssr-cache.md b/docs/guide/basics/ssr-cache.md index 7da4fbffe5..793b5a5099 100644 --- a/docs/guide/basics/ssr-cache.md +++ b/docs/guide/basics/ssr-cache.md @@ -80,7 +80,7 @@ yarn 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 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: +**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) supports output cache invalidation. Output cache is 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= @@ -88,7 +88,7 @@ export VS_INVALIDATE_CACHE=1 ``` :::warning Caution ! -All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/DivanteLtd/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you are properly using the `config.server.invalidateCacheForwardUrl` config variable as the indexers can send the cache invalidate request only to one URL (frontend or backend) and it should be forwarded. Please check the default forwarding URLs in the `default.json` and adjust the `key` parameter to the value of `server.invalidateCacheKey`. +All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/vuestorefront/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you are properly using the `config.server.invalidateCacheForwardUrl` config variable as the indexers can send the cache invalidate request only to one URL (frontend or backend) and it should be forwarded. Please check the default forwarding URLs in the `default.json` and adjust the `key` parameter to the value of `server.invalidateCacheKey`. ::: For `magento1-vsbridge-indexer` and `magento2-vsbridge-indexer` please do use the proper settings in the Magento admin panel. diff --git a/docs/guide/components/events-list.md b/docs/guide/components/events-list.md index 6024b4c4cd..2062b1251f 100644 --- a/docs/guide/components/events-list.md +++ b/docs/guide/components/events-list.md @@ -5,88 +5,88 @@ To keep track and make debugging of `$bus.$emit` events across components easier ## ForgotPass On component close: -- [`modal-hide`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L80) +- [`modal-hide`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L80) On send email action: -- [`notification-progress-start`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L95) -- [`notification-progress-stop`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L97) +- [`notification-progress-start`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L95) +- [`notification-progress-stop`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L97) On error handler of email send action: -- [`notification-progress-stop`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L109) +- [`notification-progress-stop`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Auth/ForgotPass.vue#L109) ## OrderConfirmation On mounted lifecycle hook: -- [`modal-show`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L65) +- [`modal-show`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L65) On order confirmation: -- [`modal-hide`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L71) +- [`modal-hide`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L71) On order cancelling: -- [`modal-show`, `modal-order-confirmation`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L75) +- [`modal-show`, `modal-order-confirmation`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue#L75) ## OrderReview On 'Term and conditions' link click: -- [`modal-toggle`, `modal-terms`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderReview.vue#L51) +- [`modal-toggle`, `modal-terms`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/OrderReview.vue#L51) ## PersonalDetails On 'Term and conditions' link click: -- [`modal-toggle`, `modal-terms`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue#L151) +- [`modal-toggle`, `modal-terms`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Checkout/PersonalDetails.vue#L151) ## Newsletter On newsletter popup show: -- [`modal-show`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Footer/Newsletter.vue#L49) +- [`modal-show`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Footer/Newsletter.vue#L49) ## Header On 'Login to your account' link click: -- [`modal-toggle`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Header/Header.vue#L122) +- [`modal-toggle`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Header/Header.vue#L122) ## Reviews On 'Login to your account' link click: -- [`modal-show`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Reviews/Reviews.vue#L155) +- [`modal-show`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Reviews/Reviews.vue#L155) ## SidebarMenu On 'Login to your account' link click: -- [`modal-show`, `modal-signup`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue#L201) +- [`modal-show`, `modal-signup`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue#L201) ## SubCategory On user logout: -- [`user-before-logout`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue#L131) +- [`user-before-logout`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue#L131) ## Language On mounted lifecycle hook: -- [`modal-show`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L55) +- [`modal-show`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L55) On component close: -- [`modal-hide`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L60) +- [`modal-hide`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/blocks/Switcher/Language.vue#L60) ## LanguageSwitcher On showing language popup: -- [`modal-show`, `modal-switcher`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/LanguageSwitcher.vue#L30) +- [`modal-show`, `modal-switcher`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/LanguageSwitcher.vue#L30) ## NewsletterPopup On showing newsletter popup: -- [`modal-show`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L54) +- [`modal-show`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L54) On hiding newsletter popup: -- [`modal-hide`, `modal-newsletter`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L67) +- [`modal-hide`, `modal-newsletter`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/core/NewsletterPopup.vue#L67) ## Onboard On component close: -- [`modal-hide`, `modal-onboard`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/theme/blocks/Home/Onboard.vue#L45) +- [`modal-hide`, `modal-onboard`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/components/theme/blocks/Home/Onboard.vue#L45) ## Home On beforeMount lifecycle hook: -- [`modal-toggle`, `modal-onboard`](https://github.com/DivanteLtd/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/pages/Home.vue#L74) +- [`modal-toggle`, `modal-onboard`](https://github.com/vuestorefront/vue-storefront/blob/6c100f978aa79975e4db22be3cefa7f8d38b4c97/src/themes/default/pages/Home.vue#L74) diff --git a/docs/guide/components/modal.md b/docs/guide/components/modal.md index 632c5a5b42..ce2a54b8d3 100644 --- a/docs/guide/components/modal.md +++ b/docs/guide/components/modal.md @@ -38,11 +38,11 @@ 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/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/Modal.vue) ### Transitions -The default theme defines one transition, `fade-in-down`, which can be seen [here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/css/animations/_transitions.scss). This is the default value for the `transitionName` prop. Further transitions can be defined in a custom theme by following this example. Vue transitions are explained [here](https://vuejs.org/v2/guide/transitions.html). +The default theme defines one transition, `fade-in-down`, which can be seen [here](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/css/animations/_transitions.scss). This is the default value for the `transitionName` prop. Further transitions can be defined in a custom theme by following this example. Vue transitions are explained [here](https://vuejs.org/v2/guide/transitions.html). To have modal content display immediately, without any transition, just supply an empty string for the `transitionName` prop. For example: diff --git a/docs/guide/cookbook/checklist.md b/docs/guide/cookbook/checklist.md index c10198a55e..f54abdbe8f 100644 --- a/docs/guide/cookbook/checklist.md +++ b/docs/guide/cookbook/checklist.md @@ -27,7 +27,7 @@ Some topics here were taken from [frequently asked questions in our Forum](https ## 1. Memory leaks Vue Storefront consists of two Node.js applications: -- `vue-storefront` - which is the frontend app, with the entry point of [`core/scripts/server.js`](https://github.com/DivanteLtd/vue-storefront/blob/4ed26d7f1978a9e798edcddf1cf2f970c3e64e4f/core/scripts/server.js#L269) +- `vue-storefront` - which is the frontend app, with the entry point of [`core/scripts/server.js`](https://github.com/vuestorefront/vue-storefront/blob/4ed26d7f1978a9e798edcddf1cf2f970c3e64e4f/core/scripts/server.js#L269) - `vue-storefornt-api` - which is backend/api app. If you're familiar with PHP web application and running PHP on production, be it fastCGI or FPM, _Node.js_ works totally different way. It's not executing `node` process per each request but rather running an internal http server which serves all the subsequent requests. It's single threaded, long running task. That's why it's fairly easy to get into memory leaks problems; especially with the `vue-storefront` app which is far more complex than the API. @@ -41,7 +41,7 @@ Start with `yarn pm2 status` or `yarn pm2 monit` for details from Vue Storefront The `pm2` [memory usage](http://pm2.keymetrics.io/docs/usage/monitoring/) is growing with each page refresh. -_PM2_ restarts the process after [1GB of RAM (by default)](https://github.com/DivanteLtd/vue-storefront/blob/master/ecosystem.json#L5) is in use; This can be adjusted and together with multiple node `instances` set in `ecosystem.json`, it's pretty good work-around for memory leaks. +_PM2_ restarts the process after [1GB of RAM (by default)](https://github.com/vuestorefront/vue-storefront/blob/master/ecosystem.json#L5) is in use; This can be adjusted and together with multiple node `instances` set in `ecosystem.json`, it's pretty good work-around for memory leaks. Additionally, there are many ways to trace memory leaks, however we're using the browser tools (Memory profile) most of the time. [Here you have it explained in details](https://marmelab.com/blog/2018/04/03/how-to-track-and-fix-memory-leak-with-nodejs.html). Another useful tools are [New Relic APM](http://newrelic.com) and [Google Trace](https://cloud.google.com/trace/docs/setup/nodejs) @@ -71,17 +71,17 @@ The `created` is called in the SSR mode or server side in plain English; But if #### 4. Stateful Singleton -Make sure you have `runInNewContext` set to `true` (default value!) in [`core/scripts/utils/ssr-renderer.js`](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/utils/ssr-renderer.js#L16). +Make sure you have `runInNewContext` set to `true` (default value!) in [`core/scripts/utils/ssr-renderer.js`](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/utils/ssr-renderer.js#L16). -With setting it `false`, the [Stateful Singletons](https://github.com/DivanteLtd/vue-storefront/issues/2664) like `RouteManager` or `i18n` we're using will cause the memory leaks at huuuuuge scale. +With setting it `false`, the [Stateful Singletons](https://github.com/vuestorefront/vue-storefront/issues/2664) like `RouteManager` or `i18n` we're using will cause the memory leaks at huuuuuge scale. #### 5. Static pages generator -We do have **Static Pages Generator** - currently experimental feature - that can generate the whole site into a set of static HTML files so they could be served even directly from cloud provider/CDN - no memory leaks possible; what you need to take care of in this mode is cache invalidation (not currently supported but easy to add). [Read more on static page generator](https://github.com/DivanteLtd/vue-storefront/pull/3256). +We do have **Static Pages Generator** - currently experimental feature - that can generate the whole site into a set of static HTML files so they could be served even directly from cloud provider/CDN - no memory leaks possible; what you need to take care of in this mode is cache invalidation (not currently supported but easy to add). [Read more on static page generator](https://github.com/vuestorefront/vue-storefront/pull/3256). #### 6. Learn from core team -In case you want to dig deeper any concern related to memory leaks, [find out how core teams have dealt with memory leaks](https://github.com/DivanteLtd/vue-storefront/pulls?utf8=%E2%9C%93&q=is%3Apr+memory+is%3Aclosed+leak) in Vue Storefront core - and check if any of those edge cases solved can be an inspiration for your project. +In case you want to dig deeper any concern related to memory leaks, [find out how core teams have dealt with memory leaks](https://github.com/vuestorefront/vue-storefront/pulls?utf8=%E2%9C%93&q=is%3Apr+memory+is%3Aclosed+leak) in Vue Storefront core - and check if any of those edge cases solved can be an inspiration for your project.
@@ -102,19 +102,19 @@ The SSR cache is [pretty well documented in our docs](/guide/basics/ssr-cache.ht #### 2. Using Redis tagging -With the SSR Output cache mode enabled, the [`core/server.js`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L187) stores the rendered output pages along with http headers into Redis cache. If the page exists in Redis, then it gets served without even starting the Vue SSR Renderer. +With the SSR Output cache mode enabled, the [`core/server.js`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L187) stores the rendered output pages along with http headers into Redis cache. If the page exists in Redis, then it gets served without even starting the Vue SSR Renderer. Vue Storefront uses Redis in order to use the [`redis-tagging`](https://www.npmjs.com/package/redis-tagging) library. Naming and caching are two most difficult areas of software development. Cache tagging helps us to deal with cache invalidation. -Vue Storefront tags the output pages with [product](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/helpers/search.ts#L69) and [category](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/store/category/actions.ts#L121) tags. Then all the indexers including: `magento1-vsbridge-indexer`, `mage2vuestorefront` and `magento2-vsbridge-indexer` will invalidate the cache, by specific _product_ or _category_ _ID_. It means the [`invalidate`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L156) method will clear out the cache pages tagged with this specific _product id_. +Vue Storefront tags the output pages with [product](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/helpers/search.ts#L69) and [category](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/store/category/actions.ts#L121) tags. Then all the indexers including: `magento1-vsbridge-indexer`, `mage2vuestorefront` and `magento2-vsbridge-indexer` will invalidate the cache, by specific _product_ or _category_ _ID_. It means the [`invalidate`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L156) method will clear out the cache pages tagged with this specific _product id_. :::tip NOTE - This URL requires you to pass the invalidation token set in the [config](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L12). + This URL requires you to pass the invalidation token set in the [config](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L12). ::: -You can add any number of the specific cache tags - by just extending the [`availableCacheTags`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L11) and/or [pushing the tags to `ssrContext`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/pages/Home.js#L19) so they can be used by `core/scripts/server`. +You can add any number of the specific cache tags - by just extending the [`availableCacheTags`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L11) and/or [pushing the tags to `ssrContext`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/pages/Home.js#L19) so they can be used by `core/scripts/server`. -This `context` argument passed to `asyncData()` is actually the same context object used by [`core/scripts/server.js`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L168), so we're using it as transfer object for passing the tags back and forth between server and Vue.js application. +This `context` argument passed to `asyncData()` is actually the same context object used by [`core/scripts/server.js`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L168), so we're using it as transfer object for passing the tags back and forth between server and Vue.js application. #### 3. Invalidating SSR cache @@ -137,7 +137,7 @@ X-VS-Cache-Tags: P1852 P198 C20 The tags can be used to invalidate the Varnish cache if you use it. [Read more on that](https://www.drupal.org/docs/8/api/cache-api/cache-tags-varnish). :::tip NOTE - All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/DivanteLtd/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) support the cache invalidation. + All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/vuestorefront/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you properly use the `config.server.invalidateCacheForwardUrl` config variable as the indexers can send the cache invalidate request only to one URL (either frontend or backend) and it **should be forwarded** to the other. Please check the default forwarding URLs in the `default.json` and adjust the `key` parameter to the value of `server.invalidateCacheKey`. ::: @@ -163,13 +163,13 @@ node --harmony cli.js products --removeNonExistent=true --partitions=1 #### 1. _alwaysSyncPlatformPricesOver_ to be in sync -When the `config.products.alwaysSyncPlatformPricesOver` option is on, Vue Storefront will update the visible price on all the listings and product detail pages **directly from source web store, say, Magento**. (Magento represents source web store hereunder) The code in charge for this operation is located in the [`doPlatformPricesSync`](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L212) helper which is called from the [`tax/calculateTaxes`](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/store/tax/actions.ts#L74) action. +When the `config.products.alwaysSyncPlatformPricesOver` option is on, Vue Storefront will update the visible price on all the listings and product detail pages **directly from source web store, say, Magento**. (Magento represents source web store hereunder) The code in charge for this operation is located in the [`doPlatformPricesSync`](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L212) helper which is called from the [`tax/calculateTaxes`](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/store/tax/actions.ts#L74) action. :::tip NOTE This mode works whenever the price is calculated in either server or client's side (`config.tax.calculateServerSide` option). ::: -Check if the way [Vue Storefront syncs the price](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L216) is exactly what you need, and not [override this action](https://docs.vuestorefront.io/guide/cookbook/module.html#_2-2-recipe-b-override-vuex-store-with-extendstore). +Check if the way [Vue Storefront syncs the price](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L216) is exactly what you need, and not [override this action](/guide/cookbook/module.html#_2-2-recipe-b-override-vuex-store-with-extendstore). #### 2. _alwaysSyncPlatformPricesOver_ has 2 options @@ -187,7 +187,7 @@ More than that - Vue Storefront always gets the **platform totals** (the final p ## 4. Avoiding stock desynchronization -Pretty much the same case as with the price can occur with the product stocks. By default, all the indexers set the [stock information right into the product object](https://github.com/DivanteLtd/vue-storefront-integration-sdk/blob/tutorial/Format-product.md) as follows : +Pretty much the same case as with the price can occur with the product stocks. By default, all the indexers set the [stock information right into the product object](https://github.com/vuestorefront/vue-storefront-integration-sdk/blob/tutorial/Format-product.md) as follows : - In the main structure of `product.stock` - In `product.configurable_children.stock` for `configurable_children`. @@ -200,36 +200,36 @@ Pretty much the same case as with the price can occur with the product stocks. B Vue Storefront **by default** checks the current stock information when: - - [**user adds product to the cart**](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/store/actions/itemActions.ts#L53) - this is an asynchronous process (similar one is run when browsing the product variants - you can get info like `0 items available` when switching colors and sizes); `Checkout.js` is waiting for all the results from the [`stock/queueCheck`](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/pages/Checkout.js#L69) calls. - - when the **cart is synced** with the server - eCommerce backend [checks the product availability once again](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/store/actions/mergeActions.ts#L45) and [notify user](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/components/AddToCart.ts#L31) if the product can't be added to the cart or restores previous quantity (if changed). + - [**user adds product to the cart**](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/store/actions/itemActions.ts#L53) - this is an asynchronous process (similar one is run when browsing the product variants - you can get info like `0 items available` when switching colors and sizes); `Checkout.js` is waiting for all the results from the [`stock/queueCheck`](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/pages/Checkout.js#L69) calls. + - when the **cart is synced** with the server - eCommerce backend [checks the product availability once again](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/store/actions/mergeActions.ts#L45) and [notify user](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/cart/components/AddToCart.ts#L31) if the product can't be added to the cart or restores previous quantity (if changed). - when the `filterOutUnavailableVariants` mode is on and the user a) enters the product page, b) browses the category pages. - The `config.products.filterOutUnavailableVariants` mode is pretty important thing because only by having this mode switched on you can be sure we're **not displaying unavailable variants**. When it's set to `true` Vue Storefront takes the stock information out of Magento and updates the `product.stock` info for the whole product list + product page (current product). Then it removes all the `configurable_children` that are not avaialable. [See the detailed implementation](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L121). + The `config.products.filterOutUnavailableVariants` mode is pretty important thing because only by having this mode switched on you can be sure we're **not displaying unavailable variants**. When it's set to `true` Vue Storefront takes the stock information out of Magento and updates the `product.stock` info for the whole product list + product page (current product). Then it removes all the `configurable_children` that are not avaialable. [See the detailed implementation](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/helpers/index.ts#L121). #### 2. Additional options There are two additional settings for this mode on: - `config.products.configurableChildrenStockPrefetchStatic` - when this is `true`, Vue Storefront prefetches the stock info for the statically set number of product, it can be configured by `config.products.configurableChildrenStockPrefetchStaticPrefetchCount`. - - `config.products.configurableChildrenStockPrefetchDynamic` - when this is set to true, Vue Storefront prefetches the stock info for any visible product; it's done in the [`ProductTile.vue`](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/src/themes/default/components/core/ProductTile.vue#L108) - Make sure your theme supports this. + - `config.products.configurableChildrenStockPrefetchDynamic` - when this is set to true, Vue Storefront prefetches the stock info for any visible product; it's done in the [`ProductTile.vue`](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/src/themes/default/components/core/ProductTile.vue#L108) - Make sure your theme supports this. -We've got the limited support for Magento MSI in the default implementation. [Make sure you've got it enabled when on Magento 2.3.x](https://github.com/DivanteLtd/vue-storefront-api/pull/226). +We've got the limited support for Magento MSI in the default implementation. [Make sure you've got it enabled when on Magento 2.3.x](https://github.com/vuestorefront/vue-storefront-api/pull/226). :::tip NOTE This feature might then be used for the **Donut caching** strategies related to [Tip 2 - SSR cache](#_2-ssr-output-cache). ::: :::tip NOTE - If you want to bypass Magento stock calls there is a way by getting the data with the same format as `https://vue-storefront-api/api/stock/list` that returns it but from Elasticsearch. It should be a drop-in replacement - I mean [changing the `stock.endpoint`](https://github.com/DivanteLtd/vue-storefront/blob/bb9044d6aaa36d4881733876f4646fabe7b6e102/config/default.json#L368) to this new one. Et voila: you skip asking Magento, still having this 'cache hole punching' with `config.products.filterOutUnavailableVariants` mode on + If you want to bypass Magento stock calls there is a way by getting the data with the same format as `https://vue-storefront-api/api/stock/list` that returns it but from Elasticsearch. It should be a drop-in replacement - I mean [changing the `stock.endpoint`](https://github.com/vuestorefront/vue-storefront/blob/bb9044d6aaa36d4881733876f4646fabe7b6e102/config/default.json#L368) to this new one. Et voila: you skip asking Magento, still having this 'cache hole punching' with `config.products.filterOutUnavailableVariants` mode on ::: -There is a ready-made endpoint for getting stock from Elasticsearch (not from Magento) is [here #PR330](https://github.com/DivanteLtd/vue-storefront-api/pull/330). +There is a ready-made endpoint for getting stock from Elasticsearch (not from Magento) is [here #PR330](https://github.com/vuestorefront/vue-storefront-api/pull/330). :::warning TROUBLESHOOTING If the non-existing variants won't disappear that means some frontend work on your side needs to be done. ::: I mean - with this `filterOutUnavailableVariants` setting, we're pulling the current stock info to `product.stock` and `product.configurable_children.stock` properties. As those properties updated we're then removing the out-of-stock `configurable_children`. -If the variants are still available then [take a look at this line](https://github.com/DivanteLtd/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/store/product/actions.ts#L629) and there should be a change made like +If the variants are still available then [take a look at this line](https://github.com/vuestorefront/vue-storefront/blob/48233bfa4575be218a51cccd2474ec358671fc01/core/modules/catalog/store/product/actions.ts#L629) and there should be a change made like from: @@ -269,13 +269,13 @@ Vue Storefront has two modes of calculating the product price : - Client side (when `config.tax.calculateServerSide` is set to `false`) - that can be useful in case the tax should be recalculated based on the address change. - Server side (when `config.tax.calculateServerSide` is set to `true`) - which is default. -Depending on the mode, taxes are calulated by [`taxCalc.ts` client side](https://github.com/DivanteLtd/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L74) or [`taxcalc.js` server side](https://github.com/DivanteLtd/vue-storefront-api/blob/d3d0e7892cd063bbd69e545f3f2b6fdd9843d524/src/lib/taxcalc.js#L251-L253). +Depending on the mode, taxes are calulated by [`taxCalc.ts` client side](https://github.com/vuestorefront/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L74) or [`taxcalc.js` server side](https://github.com/vuestorefront/vue-storefront-api/blob/d3d0e7892cd063bbd69e545f3f2b6fdd9843d524/src/lib/taxcalc.js#L251-L253). You may see that both these files apply **exactly** the same logic. #### 2. Factors considered for tax rate -In order to calculate the prices and taxes we need first to get the proper tax rate. It's based on [`taxrate`](https://github.com/DivanteLtd/vue-storefront-integration-sdk#taxrate-entity) entity, stored in the Elasticsearch. Each product can have the property [`product.tax_class_id`](https://github.com/DivanteLtd/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L213) set. Depending on its value, Vue Storefront applies the `taxrate` and the [country and region to the filter](https://github.com/DivanteLtd/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L226). +In order to calculate the prices and taxes we need first to get the proper tax rate. It's based on [`taxrate`](https://github.com/vuestorefront/vue-storefront-integration-sdk#taxrate-entity) entity, stored in the Elasticsearch. Each product can have the property [`product.tax_class_id`](https://github.com/vuestorefront/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L213) set. Depending on its value, Vue Storefront applies the `taxrate` and the [country and region to the filter](https://github.com/vuestorefront/vue-storefront/blob/5f2b5cd6a8496a60884c091e8509d3b58b7a0358/core/modules/catalog/helpers/taxCalc.ts#L226). :::tip NOTE We're currently not supporting searching the tax rules by neither `customer_tax_class_id` nor the `tax_postcode` fields of `taxrate` entity. Pull Requests are more than welcome ;) @@ -328,7 +328,7 @@ If any of the `configurable_children` has the price lower than the main product, One of the key side-effects of the [Server Side Rendering](https://vuejs.org/v2/guide/ssr.html) is the need to provide the initial Vuex state right to the browser just before the page is hydrated. -Hydration means - Vue.js populates the statically generated HTML markups with virtually generated (CSR) Vue.js component tree. **Only after this process, site becomes interactive**. Even slightly different markup might cause SSR hydration errors. Therefore, Vue.js requires us to [output the `window.__INITIAL_STATE__`](https://github.com/DivanteLtd/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/client-entry.ts#L29) which is then used to **replace** the Vuex initial state. Then, the [app gets hydrated](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/client-entry.ts#L111) by `app.mount()` call. +Hydration means - Vue.js populates the statically generated HTML markups with virtually generated (CSR) Vue.js component tree. **Only after this process, site becomes interactive**. Even slightly different markup might cause SSR hydration errors. Therefore, Vue.js requires us to [output the `window.__INITIAL_STATE__`](https://github.com/vuestorefront/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/client-entry.ts#L29) which is then used to **replace** the Vuex initial state. Then, the [app gets hydrated](https://github.com/vuestorefront/vue-storefront/blob/develop/core/client-entry.ts#L111) by `app.mount()` call. The only problem is, that the `__INITIAL_STATE__` can be really huuuuuuuge. On category pages, including a lot of product listings it can be in megabytes! Vue Storefront provides you with a few mechanisms to control the initial state. @@ -336,9 +336,9 @@ Vue Storefront provides you with a few mechanisms to control the initial state. ### Protip #### 1. Filter `__INITIAL_STATE__` -1. Vue Storefront provides you a mechanism to control the `__INITIAL_STATE__` [based on the `config.ssr.initialStateFilter`](https://github.com/DivanteLtd/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/scripts/utils/ssr-renderer.js#L40) fields list. So you can remove the fields from `__INITIAL_STATE__` - even using the `.` notation. So you can put `attribute` on the list to remove the whole state for `attribute` Vuex module OR you can specify `attribute.list_by_code` to remove just that. By using this mechanism, you can process much more data in the SSR than are sent to the browser (see point no. 2 which is just about opposite approach to limit the set of processed information). +1. Vue Storefront provides you a mechanism to control the `__INITIAL_STATE__` [based on the `config.ssr.initialStateFilter`](https://github.com/vuestorefront/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/scripts/utils/ssr-renderer.js#L40) fields list. So you can remove the fields from `__INITIAL_STATE__` - even using the `.` notation. So you can put `attribute` on the list to remove the whole state for `attribute` Vuex module OR you can specify `attribute.list_by_code` to remove just that. By using this mechanism, you can process much more data in the SSR than are sent to the browser (see point no. 2 which is just about opposite approach to limit the set of processed information). -2. You might also want to use the [`config.entities.*.includeFields`](https://github.com/DivanteLtd/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/config/default.json#L170) filter. These lists of fields are set to limit the number of fields [loaded from Elasticsearch](https://github.com/DivanteLtd/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/lib/search.ts#L31). If you add any new field to your entity though, please make sure you also include it in the `includeFields` list. +2. You might also want to use the [`config.entities.*.includeFields`](https://github.com/vuestorefront/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/config/default.json#L170) filter. These lists of fields are set to limit the number of fields [loaded from Elasticsearch](https://github.com/vuestorefront/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/lib/search.ts#L31). If you add any new field to your entity though, please make sure you also include it in the `includeFields` list. :::warning CAUTION With these mechanisms, you must be fully aware of the **hydration damage** they might cause. In order to prevent any hydration issues, you might use [`lazy-hydrate`](https://github.com/maoberlehner/vue-lazy-hydration) that will let you control the hydration flow for specific parts (components) on the page. Especially the [manual hydration](https://github.com/maoberlehner/vue-lazy-hydration#manually-trigger-hydration) can be useful. @@ -350,38 +350,38 @@ The general rule of thumb is that **when you remove anything from the intial sta ### 2. Best practice for hydration from core team -See how we did it for [`Category.vue`](https://github.com/DivanteLtd/vue-storefront/blob/ab27bfbd8abef5f1d37666a38fa0387f50ba6eca/src/themes/default/pages/Category.vue#L70) - where the hydration is manually triggered by the [`loading`](https://github.com/DivanteLtd/vue-storefront/blob/ab27bfbd8abef5f1d37666a38fa0387f50ba6eca/src/themes/default/pages/Category.vue#L70) flag. +See how we did it for [`Category.vue`](https://github.com/vuestorefront/vue-storefront/blob/ab27bfbd8abef5f1d37666a38fa0387f50ba6eca/src/themes/default/pages/Category.vue#L70) - where the hydration is manually triggered by the [`loading`](https://github.com/vuestorefront/vue-storefront/blob/ab27bfbd8abef5f1d37666a38fa0387f50ba6eca/src/themes/default/pages/Category.vue#L70) flag. :::tip TIP - Please make sure if you're loading your category tree dynamically - as the category trees can be truly heavy with all these subcategories included. By default Vue Storefront offers this [dynamic category prefetching from v1.7](https://docs.vuestorefront.io/guide/basics/configuration.html#dynamic-categories-prefetching). + Please make sure if you're loading your category tree dynamically - as the category trees can be truly heavy with all these subcategories included. By default Vue Storefront offers this [dynamic category prefetching from v1.7](/guide/basics/configuration.html#dynamic-categories-prefetching). ::: You can save up to 30-40% of the page size which positively improve the Lighthouse/Pagespeed scores. However not always improves the User Experience - as the lazy hydration typically requires you to fetch the required data by another network call (which can be skipped by the initial state mechanism). -Of course, in the end please make sure that you compress (gzip + minify) the SSR output - probably on [nginx level](https://www.digitalocean.com/community/tutorials/how-to-increase-pagespeed-score-by-changing-your-nginx-configuration-on-ubuntu-16-04) or using the [compression](https://www.npmjs.com/package/compression) and/or [minify](https://www.npmjs.com/package/express-minify) middleware added to the [`core/scripts/server.js`](https://github.com/DivanteLtd/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/scripts/server.js#L116) +Of course, in the end please make sure that you compress (gzip + minify) the SSR output - probably on [nginx level](https://www.digitalocean.com/community/tutorials/how-to-increase-pagespeed-score-by-changing-your-nginx-configuration-on-ubuntu-16-04) or using the [compression](https://www.npmjs.com/package/compression) and/or [minify](https://www.npmjs.com/package/express-minify) middleware added to the [`core/scripts/server.js`](https://github.com/vuestorefront/vue-storefront/blob/8f3ce717a823ef3a5c7469082b8a8bcb36abb5c1/core/scripts/server.js#L116)

## 7. Url Dispatcher explained -Starting with Vue Storefront 1.9 we support [custom url structure](https://docs.vuestorefront.io/guide/basics/url.html). `UrlDispatcher` is enabled by default in the [`config.seo.useUrlDispatcher`](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/config/default.json#L29). +Starting with Vue Storefront 1.9 we support [custom url structure](/guide/basics/url.html). `UrlDispatcher` is enabled by default in the [`config.seo.useUrlDispatcher`](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/config/default.json#L29). -The business logic of the dispatcher has been implemented as a [Vue router guard](https://router.vuejs.org/guide/advanced/navigation-guards.html) - [`beforeEach`](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/router/beforeEach.ts#L41). +The business logic of the dispatcher has been implemented as a [Vue router guard](https://router.vuejs.org/guide/advanced/navigation-guards.html) - [`beforeEach`](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/router/beforeEach.ts#L41). -The dispatcher first runs the [`url/mapUrl`](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L42). This action first checks the `state.dispatcherMap` for the previously registered URL mapping. If no mapping is set then dispatcher checks the [`localStorage` cache](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L51) and only after that the `mappingFallback` action is called. +The dispatcher first runs the [`url/mapUrl`](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L42). This action first checks the `state.dispatcherMap` for the previously registered URL mapping. If no mapping is set then dispatcher checks the [`localStorage` cache](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L51) and only after that the `mappingFallback` action is called. It's the place where the true mapping takes place. By default, Vue Storefront first checks the URL against Elasticsearch, `product` entities - using the `url_path` as a filter. If it's not found (statistically products are 10x more frequently browsed by URL than categories because of their count), then the request to `category` collection is made. -Once the route was mapped it's [registered](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L56) in the `dispatcherMap` in order to not execute the additional network request in the future. +Once the route was mapped it's [registered](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/store/actions.ts#L56) in the `dispatcherMap` in order to not execute the additional network request in the future. -The optimization hack is that [`category-next/loadCategoryProducts`](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/catalog-next/store/category/actions.ts#L100) already registers the mapping - so clicking the product from the category list doesn't require any network call to get the proper route data. +The optimization hack is that [`category-next/loadCategoryProducts`](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/catalog-next/store/category/actions.ts#L100) already registers the mapping - so clicking the product from the category list doesn't require any network call to get the proper route data. -As you've might seen the `url/mapUrl` returns the data in a very similar format to routes collection used by vue-router. **It's not the real route though**. It's converted to `Route` object by the `processDynamicRoute` helper before being processed by the router itself. To avoid any user redirections we're using the `RouterManager` to [add this route to the `vue-router` routing table](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/router/beforeEach.ts#L43) and forward the user to this new, exact match route in order to render the proper page. +As you've might seen the `url/mapUrl` returns the data in a very similar format to routes collection used by vue-router. **It's not the real route though**. It's converted to `Route` object by the `processDynamicRoute` helper before being processed by the router itself. To avoid any user redirections we're using the `RouterManager` to [add this route to the `vue-router` routing table](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/router/beforeEach.ts#L43) and forward the user to this new, exact match route in order to render the proper page. This mechanism is pretty flexible as you may add the dynamic routes on the fly. There is even a [community module](https://github.com/kodbruket/vsf-mapping-fallback) letting you map the url routes programmatically. :::tip NOTE - The [`processDynamicRoute`](https://github.com/DivanteLtd/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/helpers/index.ts#L26) does convert the `routeData` from `url/mapUrl` to **real** vue `Route` object. It works like it's searching through all the routes registered by `theme` and `modules`. Example: + The [`processDynamicRoute`](https://github.com/vuestorefront/vue-storefront/blob/3e4191e5e4b1bfc5b349f5d7cff919c695168125/core/modules/url/helpers/index.ts#L26) does convert the `routeData` from `url/mapUrl` to **real** vue `Route` object. It works like it's searching through all the routes registered by `theme` and `modules`. Example: ::: If your route data is (`routeData`): @@ -418,9 +418,9 @@ then `processDynamicRoute` helper will return the `Route` object created by merg ## 8. Multistore configuration explained -You can read about the [basic Multistore configuration in the official docs](https://docs.vuestorefront.io/guide/integrations/multistore.html#changing-the-ui-for-specific-store-views). Vue Storefront supports multistore based on the `StoreView` level. +You can read about the [basic Multistore configuration in the official docs](/guide/integrations/multistore.html#changing-the-ui-for-specific-store-views). Vue Storefront supports multistore based on the `StoreView` level. -`StoreView` is a configuration context object, set by the Vue Storefront per each request - accessible via [`currentStoreView()`](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L33) helper from [`multistore.ts`](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/lib/multistore.ts). +`StoreView` is a configuration context object, set by the Vue Storefront per each request - accessible via [`currentStoreView()`](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L33) helper from [`multistore.ts`](https://github.com/vuestorefront/vue-storefront/blob/develop/core/lib/multistore.ts). One `StoreView` generally means a combination of Language + Currency. @@ -428,7 +428,7 @@ One `StoreView` generally means a combination of Language + Currency. If you have a store per country, that supports two languages (e.g. Switzerland supporting EURO currency and both French + German languages) you'll probably end up with a pair of two `StoreViews`: (EUR; DE) + (EUR; FR). Each `StoreView` has its own unique name that is used to differentiate and switch the sites. ::: -Vue Storefront `StoreViews` allows you to differentiate all the basic settings per specific site. [See the config](https://github.com/DivanteLtd/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/config/default.json#L91): +Vue Storefront `StoreViews` allows you to differentiate all the basic settings per specific site. [See the config](https://github.com/vuestorefront/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/config/default.json#L91): ```json "storeViews": { @@ -499,38 +499,38 @@ Vue Storefront `StoreViews` allows you to differentiate all the basic settings p First of all - we have a separate Elasticsearch config per each storeView. This means you can have `product`, `categories` and `attributes` text attributes translated and stored - each in the separate Elasticsearch indices. -Our [default indexer](https://github.com/DivanteLtd/mage2vuestorefront#multistore-setup) and the [magento2-vsbridge-indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) both support the multistore indexing. +Our [default indexer](https://github.com/vuestorefront/mage2vuestorefront#multistore-setup) and the [magento2-vsbridge-indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) both support the multistore indexing. #### 2. Setup the `storeViews` section in the `config/local.json` Each _storeView_ must have the unique `code` (`it` and `de` in the example above) set + elasticsearch section pointing to the corresponding index. :::tip NOTE -Remember to populate the same configuration [within the `vue-storefront-api` config file](https://github.com/DivanteLtd/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/config/default.json#L50). Please make sure that the `config.availableStores` collection contains all the `storeCodes` you'll be passing to the API as well. +Remember to populate the same configuration [within the `vue-storefront-api` config file](https://github.com/vuestorefront/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/config/default.json#L50). Please make sure that the `config.availableStores` collection contains all the `storeCodes` you'll be passing to the API as well. ::: :::tip NOTE The multistore business logic is applied only when the `config.storeViews.multistore` is set to `true` (the default value is: `false`). ::: -The `storeCode` parameter [will be appended as a query parameter (`?storeCode`)](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L105) to all `vue-storefront-api` requests that will let API know which backend API endpoints to query. By default - with Magento 2 [we're adding the proper `storeCode` to the API request calls](https://github.com/DivanteLtd/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/src/platform/magento2/util.js#L7). However you can even [differentiate the base url or Magento 2 API credentials if you like](https://github.com/DivanteLtd/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/src/platform/magento2/util.js#L20). +The `storeCode` parameter [will be appended as a query parameter (`?storeCode`)](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L105) to all `vue-storefront-api` requests that will let API know which backend API endpoints to query. By default - with Magento 2 [we're adding the proper `storeCode` to the API request calls](https://github.com/vuestorefront/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/src/platform/magento2/util.js#L7). However you can even [differentiate the base url or Magento 2 API credentials if you like](https://github.com/vuestorefront/vue-storefront-api/blob/b4198929ef435e20162a192ea2a02cb25e552d45/src/platform/magento2/util.js#L20). #### 3. Vue Storefront `storeCode` resolver -Vue Storefront sets `currentStoreView` value as one of the first things processing the request. It's done in the [`app.ts:createStore`](https://github.com/DivanteLtd/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/app.ts#L73) function. The `storeCode` is retrived from the [server context](https://github.com/DivanteLtd/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/server-entry.ts#L63) or [from the current route](https://github.com/DivanteLtd/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/server-entry.ts#L67). +Vue Storefront sets `currentStoreView` value as one of the first things processing the request. It's done in the [`app.ts:createStore`](https://github.com/vuestorefront/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/app.ts#L73) function. The `storeCode` is retrived from the [server context](https://github.com/vuestorefront/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/server-entry.ts#L63) or [from the current route](https://github.com/vuestorefront/vue-storefront/blob/af640f3aa0372308db534786fea587b24e8e87d3/core/server-entry.ts#L67). -The [`storeCodeFromRoute`](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/lib/storeCodeFromRoute.ts) helper supports two ways of obtaining the current store code: +The [`storeCodeFromRoute`](https://github.com/vuestorefront/vue-storefront/blob/develop/core/lib/storeCodeFromRoute.ts) helper supports two ways of obtaining the current store code: 1) from the url path: https://test.storefrontcloud.io/de vs. https://test.storefrontcloud.io/it -2) from the [url domain name and path](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/storeCodeFromRoute.ts#L30); this way lets you run Vue Storefront multistore on multiple domains. +2) from the [url domain name and path](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/storeCodeFromRoute.ts#L30); this way lets you run Vue Storefront multistore on multiple domains. :::tip NOTE - You can pass the `storeCode` via server context as well. Server context is set by the [`core/scripts/server.ts`](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/scripts/utils/ssr-renderer.js#L110) - and it's sourced from `ENV.STORE_CODE` or if you're using a HTTP Proxy (like nginx) - from the request header of `x-vs-store-code`. This way you can differentiate store view instances by many different ways and not only by the domain/url. + You can pass the `storeCode` via server context as well. Server context is set by the [`core/scripts/server.ts`](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/scripts/utils/ssr-renderer.js#L110) - and it's sourced from `ENV.STORE_CODE` or if you're using a HTTP Proxy (like nginx) - from the request header of `x-vs-store-code`. This way you can differentiate store view instances by many different ways and not only by the domain/url. ::: #### 4. Routing -Vue Storefront adds all the routes to the routing table using [current `storeView` code prefix](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/src/themes/default/index.js#L31). If your [theme/router/index.js](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/themes/default/router/index.js) has the following routes defined, and the `currentStoreVioew().storeCode === 'de'` +Vue Storefront adds all the routes to the routing table using [current `storeView` code prefix](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/src/themes/default/index.js#L31). If your [theme/router/index.js](https://github.com/vuestorefront/vue-storefront/blob/develop/src/themes/default/router/index.js) has the following routes defined, and the `currentStoreVioew().storeCode === 'de'` ```js let routes = [ @@ -539,7 +539,7 @@ Vue Storefront adds all the routes to the routing table using [current `storeVie { name: 'privacy', path: '/privacy', component: Static, props: {page: 'lorem', title: 'Privacy'} }, ``` -Then the [`setupMultistoreRoutes`](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L172) helper will add these routes to `vue-router` as: +Then the [`setupMultistoreRoutes`](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L172) helper will add these routes to `vue-router` as: ```js let routes = [ @@ -548,7 +548,7 @@ Then the [`setupMultistoreRoutes`](https://github.com/DivanteLtd/vue-storefront/ { name: 'privacy', path: '/de/privacy', component: Static, props: {page: 'lorem', title: 'Privacy'} }, ``` -The business logic of modifying the route configs is embeded in the [`localizedRouteConfig`](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L189) helper. +The business logic of modifying the route configs is embeded in the [`localizedRouteConfig`](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/lib/multistore.ts#L189) helper. :::tip NOTE When you're using the `storeCode` resolver, based on `domain + path` schema then you should set the `config.storeViews.*.appendStoreCode` to `false`. This option prevents `localizedRouteConfig` helper from adding the `storeCode` as a path so the store views can be differentiated based on the `currentStoreView().url` instead - which supports `domain + path`. @@ -579,7 +579,7 @@ or route objects: ::: :::tip NOTE -The `UrlDispatcher` feature - available from Vue Storefront 1.9 supports the multistore routes as well. The `url_path` field passed to [`url/mapUrl`](https://github.com/DivanteLtd/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/modules/url/store/actions.ts#L46) action takes the full url - including `storeCode` as an entry parameter. You might want to use [vsf-mapping-fallback](https://github.com/kodbruket/vsf-mapping-fallback) for some overrides. +The `UrlDispatcher` feature - available from Vue Storefront 1.9 supports the multistore routes as well. The `url_path` field passed to [`url/mapUrl`](https://github.com/vuestorefront/vue-storefront/blob/9dca392a832ba45e9b1c3589eb84f51fbc2e8d6e/core/modules/url/store/actions.ts#L46) action takes the full url - including `storeCode` as an entry parameter. You might want to use [vsf-mapping-fallback](https://github.com/kodbruket/vsf-mapping-fallback) for some overrides. ::: #### 5. Customizing the theme per store view @@ -620,11 +620,11 @@ To minimize the time the browser will need to download the initial SSR-rendered #### 1. Compression -You might want to enable the `gzip/deflate` or `brotli` compression in the first-line HTTP Server of your choice: `nginx`, `varnish` or `apache`. The good news is that Vue Storefront supports the `gzip` compression as well using the [`compression` Express.js middleware](https://github.com/expressjs/compression). It's enabled by default [in the production mode](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/compress/server.ts). +You might want to enable the `gzip/deflate` or `brotli` compression in the first-line HTTP Server of your choice: `nginx`, `varnish` or `apache`. The good news is that Vue Storefront supports the `gzip` compression as well using the [`compression` Express.js middleware](https://github.com/expressjs/compression). It's enabled by default [in the production mode](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/compress/server.ts). #### 2. HTML Minimization -The second option is to minimize the HTML, CSS and JS by just removing the white characters. This option is by default on - by the [`config.server.useHtmlMinifier`](https://github.com/DivanteLtd/vue-storefront/blob/5f1e36d611c983de252ce08dea78726b6e10044d/config/default.json#L8) switch. We use the [html-minifier](https://www.npmjs.com/package/html-minifier) npm package in order to get the work done here. You might want to adjust the [`html-minifier` configuration](https://www.npmjs.com/package/html-minifier#options-quick-reference) by tweaking the `config.server.htmlMinifierOptions` property. +The second option is to minimize the HTML, CSS and JS by just removing the white characters. This option is by default on - by the [`config.server.useHtmlMinifier`](https://github.com/vuestorefront/vue-storefront/blob/5f1e36d611c983de252ce08dea78726b6e10044d/config/default.json#L8) switch. We use the [html-minifier](https://www.npmjs.com/package/html-minifier) npm package in order to get the work done here. You might want to adjust the [`html-minifier` configuration](https://www.npmjs.com/package/html-minifier#options-quick-reference) by tweaking the `config.server.htmlMinifierOptions` property. #### 3. Headers @@ -653,27 +653,27 @@ export default { ## 10. Production catalog indexing + cache invalidation -Although many Vue Storefornt projects are being developed using [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront/tree/master/src) indexer - it's definitely not a production ready solution. Mostly because of the performance and it doesn't fully support on-demand indexing (indexing only the changes of products and categories, in real time). +Although many Vue Storefornt projects are being developed using [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront/tree/master/src) indexer - it's definitely not a production ready solution. Mostly because of the performance and it doesn't fully support on-demand indexing (indexing only the changes of products and categories, in real time). Because of this limitation we created a set of [native indexers](https://medium.com/the-vue-storefront-journal/native-magento-data-indexer-aec3c9ebfb). The indexers are available for: -- [Magento 1](https://github.com/DivanteLtd/magento1-vsbridge-indexer) -- [Magento 2](https://github.com/DivanteLtd/magento2-vsbridge-indexer) +- [Magento 1](https://github.com/vuestorefront/magento1-vsbridge-indexer) +- [Magento 2](https://github.com/vuestorefront/magento2-vsbridge-indexer) The native indexer updates the Elasticsearch index in the very same format as the `mage2vuestorefront`. Our intention was to speed up the indexation process and make it more reliable. With native indexer, we were able to use the Magento 2 ORM and events to optimize the indexation process. Please do use this module instead of `mage2vuestorefront` if you experience any issue regarding indexing performance. Both projects are currently officially supported by the Vue Storefront Core team. When the SSR caching is enabled (see [Tip 2](#_2-ssr-output-cache)), you need to make sure the indexers are properly configured to refresh exactly the pages that changed. -We tag the output pages with [product](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/helpers/search.ts#L69) and [category](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/store/category/actions.ts#L121) tags. Then all the indexers including: `magento1-vsbridge-indexer`, `mage2vuestorefront`, `magento2-vsbridge-indexer` will invalidate the cache, by specific product or category ID. It means, the [`invalidate`](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L156) method will clear out the cache pages tagged with this specific product ID. +We tag the output pages with [product](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/helpers/search.ts#L69) and [category](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/modules/catalog/store/category/actions.ts#L121) tags. Then all the indexers including: `magento1-vsbridge-indexer`, `mage2vuestorefront`, `magento2-vsbridge-indexer` will invalidate the cache, by specific product or category ID. It means, the [`invalidate`](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/core/scripts/server.js#L156) method will clear out the cache pages tagged with this specific product ID. :::tip NOTE -This URL requires you to pass the invalidation token set in the [config](https://github.com/DivanteLtd/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L12). +This URL requires you to pass the invalidation token set in the [config](https://github.com/vuestorefront/vue-storefront/blob/e96bc3c0d1ef8239bc2e64c399f1fe924cebed36/config/default.json#L12). ::: The tags can be used to invalidate the Varnish cache, if you're using it. [Read more on that](https://www.drupal.org/docs/8/api/cache-api/cache-tags-varnish). :::tip NOTE -All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/DivanteLtd/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you are properly using the `config.server.invalidateCacheForwardUrl` config variable as the indexers can send the cache invalidate request only to one URL (either frontend or backend) and it **should be forwarded** to the other. Please check the default forwarding URLs in the `default.json` and adjust the `key` parameter to the value of `server.invalidateCacheKey`. +All the official Vue Storefront data indexers including [magento1-vsbridge-indexer](https://github.com/vuestorefront/magento1-vsbridge-indexer), [magento2-vsbridge-indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) and [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) support the cache invalidation. If the cache is enabled in both API and Vue Storefront frontend app, please make sure you are properly using the `config.server.invalidateCacheForwardUrl` config variable as the indexers can send the cache invalidate request only to one URL (either frontend or backend) and it **should be forwarded** to the other. Please check the default forwarding URLs in the `default.json` and adjust the `key` parameter to the value of `server.invalidateCacheKey`. :::
@@ -726,7 +726,7 @@ export function beforeEach(to: Route, from: Route, next) { ## 12. Elasticsearch production setup -Elasticsearch is a viable part of the [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) middleware data source. The included Docker files are supposed to be used in the development mode and they're not ready for production. +Elasticsearch is a viable part of the [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) middleware data source. The included Docker files are supposed to be used in the development mode and they're not ready for production. Elasticsearch should be run on cluster mode with minimum 3 nodes and having sufficient memory limits (usually it's around 8GB per node minimum). Otherwise Elasticsearch service won't provide the required High Availability level. @@ -760,7 +760,7 @@ Read more on [Elasticsearch deployment best practices](https://medium.com/@abhid ## 13. .htaccess, server side redirects, HTTP codes and headers, middlewares -We strongly recommend using kind of HTTP server as a proxy in front of Vue Storefront. Let it be `nginx` (suggested in our [production setup docs](https://docs.vuestorefront.io/guide/installation/production-setup.html)) or `Varnish` or even `Apache`. Any of those HTTP servers allows you to add some authorization or redirects layer before Vue Storefront. +We strongly recommend using kind of HTTP server as a proxy in front of Vue Storefront. Let it be `nginx` (suggested in our [production setup docs](/guide/installation/production-setup.html)) or `Varnish` or even `Apache`. Any of those HTTP servers allows you to add some authorization or redirects layer before Vue Storefront. This is a recommended way. @@ -768,21 +768,21 @@ This is a recommended way. #### 1. Advanced Output Processing -However, by using [advanced output processing](https://docs.vuestorefront.io/guide/core-themes/layouts.html#how-it-works) you can easily generate any text data output from your Vue Storefront site you want. Including JSON, XML and others. It's a way to generate sitemaps and other data based documents. +However, by using [advanced output processing](/guide/core-themes/layouts.html#how-it-works) you can easily generate any text data output from your Vue Storefront site you want. Including JSON, XML and others. It's a way to generate sitemaps and other data based documents. #### 2. `Express.js` middleware -The other option is to create a `Express.js` middleware. Our `core/scripts/server.ts` is a classical Node.js application so it should be easy. To do so you might want to create a [server module](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/compress/server.ts). +The other option is to create a `Express.js` middleware. Our `core/scripts/server.ts` is a classical Node.js application so it should be easy. To do so you might want to create a [server module](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/compress/server.ts). Server modules are located in `src/modules` and always have the `server.ts` entry point which responds to one of the few server entry points: -- `afterProcessStarted` - executed just [after the server started](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L13). -- `afterApplicationInitialized` - executed just [after Express app got initialized](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L34). It's a good entry point to bind new request handlers (`app.get(...)`, `app.use(...)`). Read more on [Express.js request handlers and routing](https://expressjs.com/en/guide/routing.html). -- `beforeOutputRenderedResponse` - executed [after the SSR rendering has been done](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L189) but before sending it out to the browser; It lets you override the rendered SSR content with your own. -- `afterOutputRenderedResponse` - executed [after advanced output processing pipeline](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L212) executed. -- `beforeCacheInvalidated`, `afterCacheInvalidated` - executed [before and after cache has been invalidated](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L76) +- `afterProcessStarted` - executed just [after the server started](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L13). +- `afterApplicationInitialized` - executed just [after Express app got initialized](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L34). It's a good entry point to bind new request handlers (`app.get(...)`, `app.use(...)`). Read more on [Express.js request handlers and routing](https://expressjs.com/en/guide/routing.html). +- `beforeOutputRenderedResponse` - executed [after the SSR rendering has been done](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L189) but before sending it out to the browser; It lets you override the rendered SSR content with your own. +- `afterOutputRenderedResponse` - executed [after advanced output processing pipeline](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L212) executed. +- `beforeCacheInvalidated`, `afterCacheInvalidated` - executed [before and after cache has been invalidated](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L76) -Here is an [example how to bind](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/google-cloud-trace/server.ts) tracing module just after server process started: +Here is an [example how to bind](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/google-cloud-trace/server.ts) tracing module just after server process started: ```js import { serverHooks } from '@vue-storefront/core/server/hooks' @@ -795,7 +795,7 @@ serverHooks.afterProcessStarted((config) => { }) ``` -[Another example](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/compress/server.ts) - pretty common case - binding new Express middleware to process all user requests BEFORE they're processed by SSR rendering pipeline (including custom URL addresses): +[Another example](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/compress/server.ts) - pretty common case - binding new Express middleware to process all user requests BEFORE they're processed by SSR rendering pipeline (including custom URL addresses): ```js import { serverHooks } from '@vue-storefront/core/server/hooks' @@ -828,7 +828,7 @@ serverHooks.afterApplicationInitialized(({ app, isProd }) => { ## 14. Which fields of product, category and attribute are really used by VSF -The data formats used by Vue Storefront for products and categories are quite sophisticated with a whole range of optional fields. To get a better understanding which fields are truly required and how they work - please look at the [storefront-api](https://github.com/DivanteLtd/storefront-api/) documentation: +The data formats used by Vue Storefront for products and categories are quite sophisticated with a whole range of optional fields. To get a better understanding which fields are truly required and how they work - please look at the [storefront-api](https://github.com/vuestorefront/storefront-api/) documentation: - [GraphQL schema](https://divanteltd.github.io/storefront-graphql-api-schema/) which describes the Product and Category entity with the subsequent types. - [Product entity](https://sfa-docs.now.sh/guide/integration/format-product.html#product-entity) - minimal set of product fields and how they are used by VSF. @@ -843,7 +843,7 @@ The data formats used by Vue Storefront for products and categories are quite so Vue Storefront contains some pretty useful config variables that are sometimes missed but can be pretty useful (worth mentioning two times!) : -- `dynamicConfigReload` - by default the config files are processed by [`node-config`](https://github.com/lorenwest/node-config) only during the build process; whenever you modify the config file, it must be then re-compiled and bundled into `app.js`. However, with this mode on, the [`core/scripts/server.ts`](https://github.com/DivanteLtd/vue-storefront/blob/77efcdc40a1a69191f8d96c381535517e801820d/core/scripts/server.ts#L271) reloads the config file with each request. This might be very useful for the scalability purposes and to pass some dynamic information during the build process. By modifying the `dynamicConfigExclude` and `dynamicConfigInclude` arrays you may change which particular sections of the config file are provided to the user browser and which are not. The config is passed via `window.__INITIAL_STATE__`. +- `dynamicConfigReload` - by default the config files are processed by [`node-config`](https://github.com/lorenwest/node-config) only during the build process; whenever you modify the config file, it must be then re-compiled and bundled into `app.js`. However, with this mode on, the [`core/scripts/server.ts`](https://github.com/vuestorefront/vue-storefront/blob/77efcdc40a1a69191f8d96c381535517e801820d/core/scripts/server.ts#L271) reloads the config file with each request. This might be very useful for the scalability purposes and to pass some dynamic information during the build process. By modifying the `dynamicConfigExclude` and `dynamicConfigInclude` arrays you may change which particular sections of the config file are provided to the user browser and which are not. The config is passed via `window.__INITIAL_STATE__`. - `useExactUrlsNoProxy` - when set to `true`, the strings set in the product properties: `thumbnail`, `image` ... are used for the ` +- You need a [Vue Storefront API](https://github.com/vuestorefront/vue-storefront-api) instance [installed](setup.html#_1-install-with-docker) on your machine to run the migration.
- You need an Elasticsearch instance [running](setup.html#_1-install-with-docker) into which the data will be migrated. ### 2. Recipe @@ -370,8 +370,8 @@ We worked in the red rectangle part of the architecture as a preparation for dat What we did in a simple term, we taught Elasticsearch types and sorts of data(mapping, also known as schema) we will use for Vue Storefront API later on. -Upon running `yarn migrate`, it runs the pre-configured [migration scripts](https://github.com/DivanteLtd/vue-storefront-api/tree/master/migrations) using [node-migrate](https://github.com/tj/node-migrate). If you take a closer look into the migration scripts, you will notice the ultimate js file which is located at [`./src/lib/elastic.js`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/lib/elastic.js) that does the actual labor for migration. - If you take one more closer look in the `elastic.js` file, you will also find all the schema files are located under [`./config`](https://github.com/DivanteLtd/vue-storefront-api/tree/master/config) folder. +Upon running `yarn migrate`, it runs the pre-configured [migration scripts](https://github.com/vuestorefront/vue-storefront-api/tree/master/migrations) using [node-migrate](https://github.com/tj/node-migrate). If you take a closer look into the migration scripts, you will notice the ultimate js file which is located at [`./src/lib/elastic.js`](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/lib/elastic.js) that does the actual labor for migration. + If you take one more closer look in the `elastic.js` file, you will also find all the schema files are located under [`./config`](https://github.com/vuestorefront/vue-storefront-api/tree/master/config) folder. What those scripts do can be divided into steps as per the file name. It first creates index from index schema, then import schema from `elastic.schema.[types].json` files. It will then reindex them, and delete temporary index. Finally it will work a few workarounds to deal with deprecated process. @@ -459,11 +459,11 @@ By using Elasticsearch as a data store in the architecture, we could make the pl In this recipe we will walk you with **Magento 2** example. ### 1. Preparation -- You need a [Vue Storefront API](https://github.com/DivanteLtd/vue-storefront-api) instance [installed](setup.html#_1-install-with-docker) for backend. +- You need a [Vue Storefront API](https://github.com/vuestorefront/vue-storefront-api) instance [installed](setup.html#_1-install-with-docker) for backend.
- You need an Elasticsearch instance [running](setup.html#_1-install-with-docker) with mapping is done as in [*Recipe 1 Data Mapping Migration for Elasticsearch*](#_1-data-mapping-migration-for-elasticsearch)
-- You need [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) downloaded for data bridge. This instance is backend-dependant (in this case, Magento 2), you may replace it with other data bridges such as [coreshop-vsbridge](https://github.com/DivanteLtd/coreshop-vsbridge), [shopware2vuestorefront](https://github.com/DivanteLtd/shopware2vuestorefront) to your advantage. +- You need [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) downloaded for data bridge. This instance is backend-dependant (in this case, Magento 2), you may replace it with other data bridges such as [coreshop-vsbridge](https://github.com/vuestorefront/coreshop-vsbridge), [shopware2vuestorefront](https://github.com/vuestorefront/shopware2vuestorefront) to your advantage.
- Finally, you need a Magento 2 instance as a data source to pump your data from. (For [Recipe B](#_2-2-recipe-b-using-on-premise) only) @@ -473,7 +473,7 @@ We are going to import entities as follows : - Taxrules - Attributes - Product-to-categories -- Reviews (require custom module [Divante/ReviewApi](https://github.com/DivanteLtd/magento2-review-api)) +- Reviews (require custom module [Divante/ReviewApi](https://github.com/vuestorefront/magento2-review-api)) - Cms Blocks & Pages (require custom module [SnowdogApps/magento2-cms-api](https://github.com/SnowdogApps/magento2-cms-api)) ### 2-1. Recipe A (Using Demo) @@ -713,7 +713,7 @@ node --harmony cli.js products --removeNonExistent=true --partitions=1 6. In order to import `reviews` and `cms`, we need to install additional Magento 2 modules, so that we can expose required API. -Download and install [Review API module](https://github.com/DivanteLtd/magento2-review-api) and run the following : +Download and install [Review API module](https://github.com/vuestorefront/magento2-review-api) and run the following : ```bash node --harmony cli.js reviews ``` @@ -738,7 +738,7 @@ We started with demo data pump. [Divante Ltd.](https://vuestorefront.io/) prepar Recipe B started creating an integration entry in Magento 2 Admin in order to grant a permission for data pump. Magento 2 asks you basic information with respect to the integration including ACL(access control list) that deals with permissions by each endpoint. Once you are done, Magento 2 will present you with credentials and tokens. -Providing those credentials in config file, or in this case we set ENV variables, allows the [`src/cli.js`](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/cli.js) script file to run the pumping. In a deeper look into [`src/cli.js`](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/cli.js), you will notice functions that handle each entity. Inside the function, there is a [`factory`](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/adapters/factory.js) method that takes an `adapter` injected as a parameter - in this recipe, it was `magento` - which represents a backend type of data source, and the other parameter is `driver` which represents entity type you are importing, say, `products`. There is another `adapter` whose name is `nosql` which is Elasticsearch. The ultimate pump logic locates [`abstract`](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/adapters/abstract.js) that loads `nosql` as `db` at `constructor` and executes `run` method with individual logic inherited within. You may find individual `drivers` for `magento adapter` in [`magento`](https://github.com/DivanteLtd/mage2vuestorefront/tree/master/src/adapters/magento) folder. +Providing those credentials in config file, or in this case we set ENV variables, allows the [`src/cli.js`](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/cli.js) script file to run the pumping. In a deeper look into [`src/cli.js`](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/cli.js), you will notice functions that handle each entity. Inside the function, there is a [`factory`](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/adapters/factory.js) method that takes an `adapter` injected as a parameter - in this recipe, it was `magento` - which represents a backend type of data source, and the other parameter is `driver` which represents entity type you are importing, say, `products`. There is another `adapter` whose name is `nosql` which is Elasticsearch. The ultimate pump logic locates [`abstract`](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/adapters/abstract.js) that loads `nosql` as `db` at `constructor` and executes `run` method with individual logic inherited within. You may find individual `drivers` for `magento adapter` in [`magento`](https://github.com/vuestorefront/mage2vuestorefront/tree/master/src/adapters/magento) folder. Now, you are ready to serve your **Vue Storefront** instance with your original products! @@ -750,7 +750,7 @@ When your products are successfully imported, there is another important thing t Go to **Vue Storefront API** root and find `local.json` under `config` folder. :::tip Info -`local.json` is the file created during the installation. It contains all the configuration for your Vue Storefront API instance. If you don't have it, you should copy the template from [`default.json`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/default.json) from the same directory and populate fields as you need it. +`local.json` is the file created during the installation. It contains all the configuration for your Vue Storefront API instance. If you don't have it, you should copy the template from [`default.json`](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/default.json) from the same directory and populate fields as you need it. ::: Find `imageable` node and add your source domain under `whitelist/allowedHosts` as follows : @@ -839,7 +839,7 @@ node --harmony cli.js productsdelta #### Secret 3. When you have imported multiple data source As Magento is famous for having a powerful multi stores feature, **Vue Storefront** is also ready to take on the feature smoothly. -You can have multiple indexes by specifying index name when you import data with [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront). +You can have multiple indexes by specifying index name when you import data with [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront). Setting the ENV variable for `INDEX_NAME` differently for each store will create corresponding index in Elasticsearch. You may as well need to provide different API base endpoint as per the store name. diff --git a/docs/guide/cookbook/elastic.md b/docs/guide/cookbook/elastic.md index af6f1ae629..f1f5257def 100644 --- a/docs/guide/cookbook/elastic.md +++ b/docs/guide/cookbook/elastic.md @@ -428,7 +428,7 @@ node --harmony cli.js pages ``` :::tip NOTE -API endpoints for _reviews_, _blocks_ and _pages_ from Magento are not available out of the box. You should install additional modules for them on your own. [review](https://github.com/DivanteLtd/magento2-review-api), [cms](https://github.com/SnowdogApps/magento2-cms-api) +API endpoints for _reviews_, _blocks_ and _pages_ from Magento are not available out of the box. You should install additional modules for them on your own. [review](https://github.com/vuestorefront/magento2-review-api), [cms](https://github.com/SnowdogApps/magento2-cms-api) ::: Now you are ready to launch your Vue Storefront shop powered by _Elasticsearch 7_. @@ -506,7 +506,7 @@ In order to change which _Search Adapter_ should be in labor, please take a look ### 2-0 Appetizer 0. Assume you need an entity type for _Offline Stores_ of your online shop for example. So you can store the information of your stores in data store, which is _Elasticsearch_ in this case, read the data whenever you need it like you want to display _offline stores_ while on checkout for customer to pick up if they live nearby. :::tip NOTE -There are two ways to import your data into data store. One for using [`mage2vuestorefront`](https://github.com/DivanteLtd/mage2vuestorefront) which runs _NodeJS_ scripts to do the job while the other for using [`magento2-vsbridge-indexer`](https://github.com/DivanteLtd/magento2-vsbridge-indexer) that is a native Magento 2 module for the job. +There are two ways to import your data into data store. One for using [`mage2vuestorefront`](https://github.com/vuestorefront/mage2vuestorefront) which runs _NodeJS_ scripts to do the job while the other for using [`magento2-vsbridge-indexer`](https://github.com/vuestorefront/magento2-vsbridge-indexer) that is a native Magento 2 module for the job. In this recipe, we choose the former. But don't worry we will also look into the latter in the [Chef's secret 2](#secret-2-how-to-make-a-custom-import-using-magento2-vsbridge-indexer). ::: @@ -794,7 +794,7 @@ cp ../../../core/lib/search/adapter/api/searchAdapter.ts api/ ``` :::tip NOTE -The reason you should copy the whole `searchAdapter.ts` file is, in doing so your adapter also includes default entities from `core` into custom file because your custom entities can't be added incrementally to the default. Here's [why](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/search/adapter/searchAdapterFactory.js#L12-L20) +The reason you should copy the whole `searchAdapter.ts` file is, in doing so your adapter also includes default entities from `core` into custom file because your custom entities can't be added incrementally to the default. Here's [why](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/search/adapter/searchAdapterFactory.js#L12-L20) ::: 3. Write a function to handle adding a custom entity type in `searchAdapter.ts` you just copied and initialize it in the _constructor_ of the same class as follows : diff --git a/docs/guide/cookbook/module.md b/docs/guide/cookbook/module.md index 2a168ab6ac..83a339d883 100644 --- a/docs/guide/cookbook/module.md +++ b/docs/guide/cookbook/module.md @@ -25,7 +25,7 @@ If you want to know the detailed difference of _Manual_ method and _CLI_ method, ::: ### 1. Preparation -- You need [**Vue Storefront**](https://github.com/DivanteLtd/vue-storefront) instance [installed along with other infrastructure ](setup.html#_1-install-with-docker) on your machine to build a new module and test it working. +- You need [**Vue Storefront**](https://github.com/vuestorefront/vue-storefront) instance [installed along with other infrastructure ](setup.html#_1-install-with-docker) on your machine to build a new module and test it working. - You need a development editor of your choice for your own convenience. - You need _Vue Storefront_ [`CLI`](https://www.npmjs.com/package/@vue-storefront/cli) [installed](setup.html#_4-storefront-cli-at-your-service) on your machine for [Recipe B](#_2-2-recipe-b-cli-bootstrapping) installing with `CLI`. @@ -573,27 +573,27 @@ app_1 | This is one way to use moduleConfig ### 2-7. Recipe G (Setting up server module) -We strongly recommend using kind of HTTP server as a proxy in front of Vue Storefront. Let it be `nginx` (suggested in our [production setup docs](https://docs.vuestorefront.io/guide/installation/production-setup.html)) or `Varnish` or even `Apache`. Any of those HTTP servers allows you to add some authorization or redirects layer before Vue Storefront. +We strongly recommend using kind of HTTP server as a proxy in front of Vue Storefront. Let it be `nginx` (suggested in our [production setup docs](/guide/installation/production-setup.html)) or `Varnish` or even `Apache`. Any of those HTTP servers allows you to add some authorization or redirects layer before Vue Storefront. This is a recommended way. #### 1. Advanced Output Processing -However, by using [advanced output processing](https://docs.vuestorefront.io/guide/core-themes/layouts.html#how-it-works) you can easily generate any text data output from your Vue Storefront site you want. Including JSON, XML and others. It's a way to generate sitemaps and other data based documents. +However, by using [advanced output processing](/guide/core-themes/layouts.html#how-it-works) you can easily generate any text data output from your Vue Storefront site you want. Including JSON, XML and others. It's a way to generate sitemaps and other data based documents. #### 2. `Express.js` middleware -The other option is to create a `Express.js` middleware. Our `core/scripts/server.ts` is a classical Node.js application so it should be easy. To do so you might want to create a [server module](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/compress/server.ts). +The other option is to create a `Express.js` middleware. Our `core/scripts/server.ts` is a classical Node.js application so it should be easy. To do so you might want to create a [server module](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/compress/server.ts). Server modules are located in `src/modules` and always have the `server.ts` entry point which responds to one of the few server entry points: -- `afterProcessStarted` - executed just [after the server started](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L13). -- `afterApplicationInitialized` - executed just [after Express app got initialized](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L34). It's a good entry point to bind new request handlers (`app.get(...)`, `app.use(...)`). Read more on [Express.js request handlers and routing](https://expressjs.com/en/guide/routing.html). -- `beforeOutputRenderedResponse` - executed [after the SSR rendering has been done](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L189) but before sending it out to the browser; It lets you override the rendered SSR content with your own. -- `afterOutputRenderedResponse` - executed [after advanced output processing pipeline](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L212) executed. -- `beforeCacheInvalidated`, `afterCacheInvalidated` - executed [before and after cache has been invalidated](https://github.com/DivanteLtd/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L76) +- `afterProcessStarted` - executed just [after the server started](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L13). +- `afterApplicationInitialized` - executed just [after Express app got initialized](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L34). It's a good entry point to bind new request handlers (`app.get(...)`, `app.use(...)`). Read more on [Express.js request handlers and routing](https://expressjs.com/en/guide/routing.html). +- `beforeOutputRenderedResponse` - executed [after the SSR rendering has been done](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L189) but before sending it out to the browser; It lets you override the rendered SSR content with your own. +- `afterOutputRenderedResponse` - executed [after advanced output processing pipeline](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L212) executed. +- `beforeCacheInvalidated`, `afterCacheInvalidated` - executed [before and after cache has been invalidated](https://github.com/vuestorefront/vue-storefront/blob/2c6e0e1c8e73952beabf550fe4530344a6bcce15/core/scripts/server.ts#L76) -Here is an [example how to bind](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/google-cloud-trace/server.ts) tracing module just after server process started: +Here is an [example how to bind](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/google-cloud-trace/server.ts) tracing module just after server process started: ```js import { serverHooks } from '@vue-storefront/core/server/hooks' @@ -606,7 +606,7 @@ serverHooks.afterProcessStarted((config) => { }) ``` -[Another example](https://github.com/DivanteLtd/vue-storefront/blob/develop/src/modules/compress/server.ts) - pretty common case - binding new Express middleware to process all user requests BEFORE they're processed by SSR rendering pipeline (including custom URL addresses): +[Another example](https://github.com/vuestorefront/vue-storefront/blob/develop/src/modules/compress/server.ts) - pretty common case - binding new Express middleware to process all user requests BEFORE they're processed by SSR rendering pipeline (including custom URL addresses): ```js import { serverHooks } from '@vue-storefront/core/server/hooks' @@ -744,7 +744,7 @@ It's hands down no-brainer to bootstrap a module _manually_ because the skeleton ## 6. Extend Elasticsearch request body using `storefront-query-builder` -If you're using the new [`storefront-query-builder`](https://github.com/DivanteLtd/storefront-query-builder) and the `api-search-query` search-adapter ([introduced with v1.1.12](/guide/upgrade-notes/#_1-11-1-12)) it is now possible to extend it by new filters, or even overwrite a existing filter, to customize your Elasticsearch request-bodies. +If you're using the new [`storefront-query-builder`](https://github.com/vuestorefront/storefront-query-builder) and the `api-search-query` search-adapter ([introduced with v1.1.12](/guide/upgrade-notes/#_1-11-1-12)) it is now possible to extend it by new filters, or even overwrite a existing filter, to customize your Elasticsearch request-bodies. So, this way you can add custom Elasticsearch queries to the query-chain and still use the notation of `SearchQuery` in the Vue Storefront. diff --git a/docs/guide/cookbook/setup.md b/docs/guide/cookbook/setup.md index 6f8c39ae3f..bece4bcfbe 100644 --- a/docs/guide/cookbook/setup.md +++ b/docs/guide/cookbook/setup.md @@ -11,7 +11,7 @@ In this chapter, we will cover : ## 0. Introduction -Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/DivanteLtd). +Now you are definitely interested in **Vue Storefront**. That's why you are here. You've come across the line. You made a choice. You will have something in return, which is great. Be it developers, entrepreneurs or even marketing managers that they may want to try something new for better products in hopes of enhancing their clients or customers' experience. You chose the right path. We will explore anything you need to get you started at all with [**Vue Storefront** infrastructure](https://github.com/vuestorefront). ## 1. Install with Docker Docker has been arguably the most sought-after, brought to the market which took the community by storm ever since its introduction. Although it's yet controversial whether it's the best choice among its peers, I have never seen such an unanimous enthusiasm over one tech product throughout the whole developers community. @@ -40,9 +40,9 @@ That being sad, there are tips for using other platforms for docker at [Chef's S ::: ### 2. Recipe -1. First, start with backend, download [**Vue Storefront API**](https://github.com/DivanteLtd/vue-storefront-api) from github. +1. First, start with backend, download [**Vue Storefront API**](https://github.com/vuestorefront/vue-storefront-api) from github. ```bash -git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api +git clone https://github.com/vuestorefront/vue-storefront-api.git vue-storefront-api cd vue-storefront-api ``` @@ -224,7 +224,7 @@ In `local.json`, you may change values for information of backend family. But if 10. Install theme -From version 1.12 you need to add theme into your project. [Here is more information](https://docs.vuestorefront.io/guide/installation/theme.html) +From version 1.12 you need to add theme into your project. [Here is more information](/guide/installation/theme.html) 11. Finally run the following Docker command : @@ -447,7 +447,7 @@ If you want to modify `default.json`, don't edit it directly but copy the whole ::: We have 2 `local.json` files, one of which is for backend here, and we will look at [Secret 2](#secret-2-study-in-local-json-for-vue-storefront), the other for frontend . -At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/default.json) for **backend** : +At [`vue-storefront-api/config/default.json`](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/default.json) for **backend** : ```json "server": { "host": "localhost", @@ -457,7 +457,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - This is where your API backend is defined. The server will listen `server.host`:`server.port` unless it's defined otherwise in environment variables. -- `server.searchEngine` is used in the integration with `graphql` so please don't change it. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/resolvers.js#L6) +- `server.searchEngine` is used in the integration with `graphql` so please don't change it. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/resolvers.js#L6) ```json "orders": { "useServerQueue": false @@ -466,10 +466,10 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- "excludeDisabledProducts": false }, ``` -- `orders.useServerQueue` allows you to use queue process when `order` API is used to create an order. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L65) +- `orders.useServerQueue` allows you to use queue process when `order` API is used to create an order. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L65) - `catalog.excludeDisabledProducts` allows you to skip disabled products when importing products using `mage2vs`. -[jump to code](https://github.com/DivanteLtd/mage2vuestorefront/blob/master/src/adapters/magento/product.js#L166) +[jump to code](https://github.com/vuestorefront/mage2vuestorefront/blob/master/src/adapters/magento/product.js#L166) ```json "elasticsearch": { @@ -499,7 +499,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- - `host`, `port`, `protocol` defines `elasticsearch` connect information. - `user`, `password` is default credentials of `elasticsearch`. If you changed the credentials of `elasticsearch`, please change this accordingly. [more info](https://www.elastic.co/guide/en/x-pack/current/security-getting-started.html) - - `min_score` sets a `min_score` when building a query for `elasticsearch`. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/queryBuilder.js#L172) + - `min_score` sets a `min_score` when building a query for `elasticsearch`. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/queryBuilder.js#L172) :::tip TIP `min_score` helps you exclude documents with `_score` less than `min_score` value. ::: @@ -593,8 +593,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `storeViews` element contains the whole information of ***additional*** stores. The default store information doesn't exist here, it exists on top level. -- `multistore` is supposed to tell the platform if it has multiple stores to consider. For example, it is used to configure `tax` values of additional store. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L14) -- `mapStoreUrlsFor` is used for building url routes in frontend. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/multistore.ts#L85) +- `multistore` is supposed to tell the platform if it has multiple stores to consider. For example, it is used to configure `tax` values of additional store. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L14) +- `mapStoreUrlsFor` is used for building url routes in frontend. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/multistore.ts#L85) - `de` element contains detailed information of `de` store. You need to have this kind of element for all the additional stores you added to `availableStores` with `storeCode` as the key. `de` and `it` in the `default.json` exhibits an example you can copy & paste for other stores you need to add. - `storeCode` denotes store code for the store. - `storeId` denotes store ID of the store. @@ -606,8 +606,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- - `tax` contains tax information of the store. - `defaultCountry` is the code name of the country on which tax is calculated for the store. - `defaultRegion` is default region. - - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/product.js#L48) - - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) + - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/product.js#L48) + - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) - `i18n` connotes *internationalization*. [more info](https://en.wikipedia.org/wiki/Internationalization_and_localization) - `fullCountryName` is the full name of the country this `i18n` is applied to. - `fullLanguageName` is the full name of the language this `i18n` is applied to. @@ -641,9 +641,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- }, ``` - `cart` - - `setConfigurableProductOptions` flag determines to show either the parent item or the child item (aka selected option item) in the cart context. `true` shows parent item instead of the option item selected. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/o2m.js#L94) + - `setConfigurableProductOptions` flag determines to show either the parent item or the child item (aka selected option item) in the cart context. `true` shows parent item instead of the option item selected. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/o2m.js#L94) - `tax` - - `alwaysSyncPlatformPricesOver` [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L49) + - `alwaysSyncPlatformPricesOver` [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L49) - `usePlatformTotals` These two options are used to determine whether to fetch prices from data source on the fly or not. If you set `alwaysSyncPlatformPricesOver` true, then it skips checking the checksum for cart items based on price. @@ -659,7 +659,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ```json "platform": "magento2", ``` -- `platform` defines which e-commerce platform is used as a source. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/order.js#L13) +- `platform` defines which e-commerce platform is used as a source. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/order.js#L13) ```json "registeredExtensions": [ @@ -687,9 +687,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- } }, ``` -- `registeredExtensions` element contains the list of supported extensions, it bootstraps entry points for those extensions [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/index.js#L45) +- `registeredExtensions` element contains the list of supported extensions, it bootstraps entry points for those extensions [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/index.js#L45) -- `extensions` contains additional configuration for extensions. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/tree/master/src/api/extensions) +- `extensions` contains additional configuration for extensions. [jump to code](https://github.com/vuestorefront/vue-storefront-api/tree/master/src/api/extensions) - `mailchimp` provides `POST`, `DELETE` APIs for *Mailchimp* `subscribe` method. - `listId` is the ID of list you are publishing. - `apiKey` is API key you are assigned. @@ -790,8 +790,8 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `imageable` deals with everything you need to configure when it comes to your storefront images, especially product images. - - `maxListeners` limits maximum listeners to request's socket. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/img.js#L21) - - `imageSizeLimit` limits maximum image size. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/img.js#L56) + - `maxListeners` limits maximum listeners to request's socket. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/img.js#L21) + - `imageSizeLimit` limits maximum image size. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/img.js#L56) - `whitelist` contains a white-list of image source domains - `allowedHosts` contains the array of white-list @@ -808,7 +808,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ::: - - `cache` limits `libvips` operation cache from *Sharp*. Values hereunder are default values. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/lib/image.js#L5) + - `cache` limits `libvips` operation cache from *Sharp*. Values hereunder are default values. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/lib/image.js#L5) - `memory` is the maximum memory in MB to use for the cache. - `files` is the maximum number of files to hold open. @@ -853,9 +853,9 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- ``` - `entities` is used to integrate with *GraphQL* in **Vue Storefront API**. - `category` - - `includeFields` contains an array of fields to be added as `sourceInclude` [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/category/resolver.js#L10) + - `includeFields` contains an array of fields to be added as `sourceInclude` [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/category/resolver.js#L10) - `product` - - `filterFieldMapping` adds a field mapping to apply a filter in a query [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/graphql/elasticsearch/mapping.js#L19) + - `filterFieldMapping` adds a field mapping to apply a filter in a query [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/graphql/elasticsearch/mapping.js#L19) - `category.name` ```json @@ -880,7 +880,7 @@ At [`vue-storefront-api/config/default.json`](https://github.com/DivanteLtd/vue- #### Secret 2. Study in `local.json` for *Vue Storefront* -At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-storefront/blob/master/config/default.json) for **frontend** : +At [`vue-storefront/config/default.json`](https://github.com/vuestorefront/vue-storefront/blob/master/config/default.json) for **frontend** : ```json "server": { @@ -908,37 +908,37 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor - `port` is the port number in which your *Vue Storefront* instance listens to. - - `protocol` is used for *GraphQL* integration. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/search/adapter/graphql/searchAdapter.ts#L48) + - `protocol` is used for *GraphQL* integration. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/search/adapter/graphql/searchAdapter.ts#L48) - - `api` determines API mode between `api` and `graphql`. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/resolvers/resolveGraphQL.js#L7) + - `api` determines API mode between `api` and `graphql`. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/resolvers/resolveGraphQL.js#L7) :::tip TIP You may take a look at [*GraphQL Action Plan*](/guide/basics/graphql.html) guide to help yourself make a decision which mode you should take. ::: - - `devServiceWorker` enables *service worker* in `develop` mode. The *service worker* is normally enabled by default for `production` mode, but not for `develop` mode. Setting this flag *true* forces to use *service worker* in `develop` mode too. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/service-worker/registration.js#L5) + - `devServiceWorker` enables *service worker* in `develop` mode. The *service worker* is normally enabled by default for `production` mode, but not for `develop` mode. Setting this flag *true* forces to use *service worker* in `develop` mode too. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/service-worker/registration.js#L5) :::tip TIP You may take a look at [Working with Service Workers](/guide/core-themes/service-workers.html) for better understanding. ::: - - `useOutputCacheTagging` determines to allow *Output Cache Tags*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L168) + - `useOutputCacheTagging` determines to allow *Output Cache Tags*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L168) - - `useOutputCache` determines to allow *Output Cache*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L64) + - `useOutputCache` determines to allow *Output Cache*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L64) - - `outputCacheDefaultTtl` defines the default timeout for *Redis Tag Cache*. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/utils/cache-instance.js#L16) + - `outputCacheDefaultTtl` defines the default timeout for *Redis Tag Cache*. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/utils/cache-instance.js#L16) - - `availableCacheTags` contains a list of available cache tags. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/cache.js#L7) + - `availableCacheTags` contains a list of available cache tags. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/cache.js#L7) - - `invalidateCacheKey` is the key used for checking validity of invalidation. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L66) + - `invalidateCacheKey` is the key used for checking validity of invalidation. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L66) :::tip TIP You may take a look at [SSR Cache](/guide/basics/ssr-cache.html) in order to grab the idea of *Output Cache* in *Vue Storefront* ::: - - `dynamicConfigReload` enables to reload `config.json` on the fly with each server request. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L232) - - `dynamicConfigContinueOnError` allows to skip errors during configuration merge on the fly. [jump to code](https://github.com/DivanteLtd/vue-storefront/blob/master/core/scripts/server.js#L240) + - `dynamicConfigReload` enables to reload `config.json` on the fly with each server request. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L232) + - `dynamicConfigContinueOnError` allows to skip errors during configuration merge on the fly. [jump to code](https://github.com/vuestorefront/vue-storefront/blob/master/core/scripts/server.js#L240) - `dynamicConfigExclude` - `dynamicConfigInclude` - `elasticCacheQuota` @@ -1318,8 +1318,8 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor - `tax`: ... - `defaultCountry` is the code name of the country on which tax is calculated for the store. - `defaultRegion` is default region. - - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) - - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/product.js#L48) + - `sourcePriceIncludesTax` determines whether price is stored with tax applied (`true`) or tax calculated on runtime (`false`). [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/platform/magento2/tax.js#L12) + - `calculateServerSide` determines if price is fetched with(`true`)/without(`false`) tax calculated. [jump to code](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/product.js#L48) - `userGroupId`: null, - `useOnlyDefaultUserGroupId`: false, - `deprecatedPriceFieldsSupport`: true, @@ -1436,7 +1436,7 @@ We made it one step further where you just need to answer a series of questions 1. If you're MacOS or Linux user now you're able to install with pretty nice CLI installer :) ```bash -git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront +git clone https://github.com/vuestorefront/vue-storefront.git vue-storefront cd vue-storefront yarn yarn installer diff --git a/docs/guide/cookbook/theme.md b/docs/guide/cookbook/theme.md index 08fe80321c..ef844c0988 100644 --- a/docs/guide/cookbook/theme.md +++ b/docs/guide/cookbook/theme.md @@ -404,13 +404,13 @@ This recipe talks about how to do it. --> ## 2. How to upgrade theme from 1.11 to 1.12 -Here comes again! We've got a lot of stuff packed in one package full of gift to you. This time, however, is different from the past in that we came up with the whole new approach to _Vue Storefront_ by building it up from scratch and gave it a new name [_Capybara_](https://github.com/DivanteLtd/vsf-capybara). _Capybara_ is built on [Storefront UI Design System](https://www.storefrontui.io/) which employs modular approach to its smallest chunks. How versatile is that! Now that the former _default_ theme is no more default but the _Capybara_ replaces it taking the role of base theme. +Here comes again! We've got a lot of stuff packed in one package full of gift to you. This time, however, is different from the past in that we came up with the whole new approach to _Vue Storefront_ by building it up from scratch and gave it a new name [_Capybara_](https://github.com/vuestorefront/vsf-capybara). _Capybara_ is built on [Storefront UI Design System](https://www.storefrontui.io/) which employs modular approach to its smallest chunks. How versatile is that! Now that the former _default_ theme is no more default but the _Capybara_ replaces it taking the role of base theme. In this recipe, we will take a look at how to upgrade from `1.11` to `1.12` seamlessly with respect to themes. Changes made to your theme on `1.11` will not be taken into consideration since we will not use `default` theme but `capybara` for this recipe. ### 1. Preparation - You have a [_Vue Storefront_ `1.11` App installed](#_3-how-to-upgrade-theme-from-1-10-to-1-11) on your machine. - - You have pulled `1.12` commmits from the [_Vue Storefront_ git repository](https://github.com/DivanteLtd/vue-storefront). + - You have pulled `1.12` commmits from the [_Vue Storefront_ git repository](https://github.com/vuestorefront/vue-storefront). ### 2. Recipe 1. Pull `v1.12.0` tag to the `1.11` VSF app as follows : @@ -429,7 +429,7 @@ mkdir themes && cd themes 3. Add `git` `submodule` into `themes` folder as follows : ```bash -git submodule add https://github.com/DivanteLtd/vsf-capybara capybara +git submodule add https://github.com/vuestorefront/vsf-capybara capybara ``` Now files are ready. @@ -464,7 +464,7 @@ That said, you had to say good-bye to your old `1.11` theme. [_Start building yo ## 3. How to upgrade theme from 1.10 to 1.11 :::warning REMINDER -This recipe assumes you will use [`default` theme](https://github.com/DivanteLtd/vsf-default) for your store which is natural because `1.11` has only one _default_ theme whose name is `default`. +This recipe assumes you will use [`default` theme](https://github.com/vuestorefront/vsf-default) for your store which is natural because `1.11` has only one _default_ theme whose name is `default`. From `1.12` on, however, `default` theme becomes optional while `capybara` is _default_. ::: @@ -478,7 +478,7 @@ This recipe helps you resolve errors you encounter after the upgrade as short a ### 1. Preparation - You have a [Vue Storefront App running](/guide/cookbook/setup.html#_0-introduction) by `docker` or `yarn dev` and watch it in your browser. - You have a child theme [running](/guide/cookbook/theme.html#_1-start-building-your-own-theme) on top of _Vue Storefront_ app. - - In this recipe, we start with _degi_ child theme based on `1.10` version (git hash : [___1b53bd2a___](https://github.com/DivanteLtd/vue-storefront/commit/1b53bd2a829f7cab571dbd3c2a4021ea46857da7)) of `default` theme. This _degi_ theme is an example you might have created for your own. Which means, you can change it to whatever you like. + - In this recipe, we start with _degi_ child theme based on `1.10` version (git hash : [___1b53bd2a___](https://github.com/vuestorefront/vue-storefront/commit/1b53bd2a829f7cab571dbd3c2a4021ea46857da7)) of `default` theme. This _degi_ theme is an example you might have created for your own. Which means, you can change it to whatever you like. - In other words, suppose you have a _Vue Storefront_ shop running on a child theme `degi` that was branched off from _Vue Storefront_ `default` theme version `1.10` and want to upgrade to `1.11`. @@ -620,7 +620,7 @@ git checkout e4959550 # origin/release/v1.11 #### 3. Now we start hunting down the culprits one by one. :::tip TIP -By the way, you can also compare the changes made between `1.10` to `1.11` in [github link](https://github.com/DivanteLtd/vue-storefront/commit/a42d480aea56d90f7ab65c5caf6ce3f49b00dfec) with a glance too. +By the way, you can also compare the changes made between `1.10` to `1.11` in [github link](https://github.com/vuestorefront/vue-storefront/commit/a42d480aea56d90f7ab65c5caf6ce3f49b00dfec) with a glance too. ::: - First target is located at `./src/themes/degi/components/core/blocks/MyAccount/MyOrders.vue`. Replace it as follows : diff --git a/docs/guide/core-themes/stylesheets.md b/docs/guide/core-themes/stylesheets.md index 5ea56ce51c..c6ea0f576b 100644 --- a/docs/guide/core-themes/stylesheets.md +++ b/docs/guide/core-themes/stylesheets.md @@ -24,7 +24,7 @@ Let's say we have a small piece of UI and want to style it according to mocks pr According to mocks the above `
`should have 20px padding top and bottom (y-axis), 10px padding left and right (x-axis), a black background, white text color, and display inline-flex. -Let's check the [CSS folder](https://github.com/DivanteLtd/vue-storefront/tree/master/src/themes/default/css) and find the required classes. +Let's check the [CSS folder](https://github.com/vuestorefront/vue-storefront/tree/master/src/themes/default/css) and find the required classes. For padding top/bottom there is `py-x` class where `py` means 'padding y-axis' and `x` is a size in px. We will use `py-20` in this case. Same with x-axis - we will use `px-10`. @@ -57,7 +57,7 @@ Now our finished piece of UI should look like this: If you can't find a CSS rule that you need, please read the rules below before extending current stylesheets: 1. Don't create new files in `default/css/` folder. If you think something is missing, please contact us on [slack](http://vuestorefront.slack.com) before creating a new file. -2. Follow the conventions! Usually, you can find arrays in the top of each SCSS file with sizes or colors and loops below them that iterates through these arrays to generate CSS classes. Please see the [margin.scss](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/css/margin.scss) file. +2. Follow the conventions! Usually, you can find arrays in the top of each SCSS file with sizes or colors and loops below them that iterates through these arrays to generate CSS classes. Please see the [margin.scss](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/css/margin.scss) file. On the top you can find arrays of sizes (in px and %): diff --git a/docs/guide/core-themes/themes.md b/docs/guide/core-themes/themes.md index 0a73c9558e..8b14a37880 100644 --- a/docs/guide/core-themes/themes.md +++ b/docs/guide/core-themes/themes.md @@ -56,8 +56,8 @@ Below you can find the list of files that are essential for your theme to work: ## Official Vue Storefront themes: -- [Capybara](https://github.com/DivanteLtd/vsf-capybara) - Capybara is a Storefront UI based theme for Vue Storefront. -- [Default](https://github.com/DivanteLtd/vsf-default) - Default VS theme always with the newest features. The easiest way to adopt VS in your shop is taking this one and modifying it to your needs (check [gogetgold.com](https://www.gogetgold.com/) as an example) +- [Capybara](https://github.com/vuestorefront/vsf-capybara) - Capybara is a Storefront UI based theme for Vue Storefront. +- [Default](https://github.com/vuestorefront/vsf-default) - Default VS theme always with the newest features. The easiest way to adopt VS in your shop is taking this one and modifying it to your needs (check [gogetgold.com](https://www.gogetgold.com/) as an example) ## Related diff --git a/docs/guide/core-themes/ui-store.md b/docs/guide/core-themes/ui-store.md index f1727c6095..57fd1ebed5 100644 --- a/docs/guide/core-themes/ui-store.md +++ b/docs/guide/core-themes/ui-store.md @@ -1,6 +1,6 @@ # Working with UI Store (Interface state) -We are using Vuex to store the application interface state. The [store file](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/index.ts) contains the information about the state of different pieces of UI, such as overlay visibility, wishlist visibility, etc. Of course, you are not forced to make use of it in your theme, but keep in mind that many core components are using the UI store. +We are using Vuex to store the application interface state. The [store file](https://github.com/vuestorefront/vue-storefront/blob/master/core/store/index.ts) contains the information about the state of different pieces of UI, such as overlay visibility, wishlist visibility, etc. Of course, you are not forced to make use of it in your theme, but keep in mind that many core components are using the UI store. ## State object diff --git a/docs/guide/data/data.md b/docs/guide/data/data.md index 30b0f4189f..c20604459f 100644 --- a/docs/guide/data/data.md +++ b/docs/guide/data/data.md @@ -3,7 +3,7 @@ Vue storefront uses two primary data sources: 1. IndexedDb/WebSQL data store in the browser using [localForage](https://github.com/localForage/localForage) -2. Server data source via [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api), which is compliant with Elasticsearch (regarding product catalog). +2. Server data source via [vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api), which is compliant with Elasticsearch (regarding product catalog). ## Local data store @@ -15,7 +15,7 @@ Details on localForage API can be found [here](http://localforage.github.io/loca Here you have an example of how the _Vuex_ store in a _Vue Storefront Module_ should be constructed. The _VSF Core Module_ itself is nothing more than [_Vuex module_](https://vuex.vuejs.org/guide/modules.html). -Let's take a look at `store` of `core/modules/checkout` module. [`index.ts`](https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/checkout/store/checkout/index.ts) file shows as follows : +Let's take a look at `store` of `core/modules/checkout` module. [`index.ts`](https://github.com/vuestorefront/vue-storefront/blob/master/core/modules/checkout/store/checkout/index.ts) file shows as follows : ```js import { Module } from 'vuex' @@ -85,7 +85,7 @@ The actual parts of the _store_ have been separated into several files as _gette Data formats for vue-storefront and vue-storefront-api are the same JSON files. -The convention is that schemas are stored under `/core/modules//store/.schema.json` - for example [Order schema](https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/order/store/order.schema.json). +The convention is that schemas are stored under `/core/modules//store/.schema.json` - for example [Order schema](https://github.com/vuestorefront/vue-storefront/blob/master/core/modules/order/store/order.schema.json). ### Orders @@ -94,7 +94,7 @@ The convention is that schemas are stored under `/core/modules//sto ![Orders data format as seen on Developers Tools](../images/orders-localstorage.png) -Here you have a [validation schema for order](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/modules/order/order.schema.json): +Here you have a [validation schema for order](https://github.com/vuestorefront/vue-storefront/blob/master/core/store/modules/order/order.schema.json): ```json { diff --git a/docs/guide/data/database-tool.md b/docs/guide/data/database-tool.md index 6055e861b4..1057983536 100644 --- a/docs/guide/data/database-tool.md +++ b/docs/guide/data/database-tool.md @@ -1,10 +1,10 @@ # Database tool -Vue Storefront gets all of its data from [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api) endpoints, operating on top of the Elasticsearch data store. +Vue Storefront gets all of its data from [vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api) endpoints, operating on top of the Elasticsearch data store. If you installed the project using `yarn installer` command, the database has been set up, data imported from demo-dump, and everything should be just fine. -After more extensive data operations, like custom imports using [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) or [magento1-vsbridge](https://github.com/DivanteLtd/magento1-vsbridge), there is a need to reindex the Elasticsearch and set up the proper metadata for fields. +After more extensive data operations, like custom imports using [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) or [magento1-vsbridge](https://github.com/vuestorefront/magento1-vsbridge), there is a need to reindex the Elasticsearch and set up the proper metadata for fields. The main reason you’ll know you must reindex the database is the following error you get from the `vue-storefront` console: @@ -63,9 +63,9 @@ If you want to extend the Elasticsearch data structures or map some particular f Please do change the ES schema by modifying: -- [config/elastic.schema.product.extension.json](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/elastic.schema.product.extension.json) -- [config/elastic.schema.attribute.extension.json](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/elastic.schema.attribute.extension.json) -- [config/elastic.schema.taxrate.extension.json](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/elastic.schema.taxrate.extension.json) +- [config/elastic.schema.product.extension.json](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/elastic.schema.product.extension.json) +- [config/elastic.schema.attribute.extension.json](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/elastic.schema.attribute.extension.json) +- [config/elastic.schema.taxrate.extension.json](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/elastic.schema.taxrate.extension.json) The format is compliant with [ES DSL for schema modifications](https://www.elastic.co/blog/found-elasticsearch-mapping-introduction) diff --git a/docs/guide/data/elastic-queries.md b/docs/guide/data/elastic-queries.md index 01dc2ec6ae..5bce0fa9a0 100644 --- a/docs/guide/data/elastic-queries.md +++ b/docs/guide/data/elastic-queries.md @@ -6,7 +6,7 @@ Vue Storefront stores most of the catalog data within the Elasticsearch data sto ![Architecture diagram](../images/Vue-storefront-architecture.png). -To properly access Elasticsearch data, you should implement a specific Vuex action. Here is an example of [vuex action for getting the data](https://github.com/DivanteLtd/vue-storefront/blob/master/core/modules/catalog/store/category/actions.ts#L40) : +To properly access Elasticsearch data, you should implement a specific Vuex action. Here is an example of [vuex action for getting the data](https://github.com/vuestorefront/vue-storefront/blob/master/core/modules/catalog/store/category/actions.ts#L40) : ```js import { quickSearchByQuery } from '@vue-storefront/core/lib/search' @@ -44,7 +44,7 @@ import createCategoryListQuery from '@vue-storefront/core/modules/catalog/helper }, ``` -As You may see, we're using [quickSearchByQuery](https://github.com/DivanteLtd/vue-storefront/blob/master/core/lib/search.ts#L31) for executing search. This method is pretty interesting because: +As You may see, we're using [quickSearchByQuery](https://github.com/vuestorefront/vue-storefront/blob/master/core/lib/search.ts#L31) for executing search. This method is pretty interesting because: - It uses the `searchQuery` query object, which has an ability to apply filters in common way. - It does cache the received data into `localForage` collection, named `elasticCache`; the next call with the same queryObject will return the data directly from browser storage, not hitting the server. diff --git a/docs/guide/extensions/extending-api.md b/docs/guide/extensions/extending-api.md index e5677b6305..a0e54919c5 100644 --- a/docs/guide/extensions/extending-api.md +++ b/docs/guide/extensions/extending-api.md @@ -4,7 +4,7 @@ Some extensions need to have additional API methods to get some data directly fr You may add new ES collections [using the Migration mechanism](../data/data-migrations.md) -Then you may extend the [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) to add your custom API methods. Please take a look at: [mailchimp-subscribe](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/api/extensions/mailchimp-subscribe/index.js) for reference. +Then you may extend the [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) to add your custom API methods. Please take a look at: [mailchimp-subscribe](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/api/extensions/mailchimp-subscribe/index.js) for reference. To add the API extension to `vue-storefront-api`: diff --git a/docs/guide/extensions/introduction.md b/docs/guide/extensions/introduction.md index a320c6eaab..9e9cd2da6e 100644 --- a/docs/guide/extensions/introduction.md +++ b/docs/guide/extensions/introduction.md @@ -3,9 +3,9 @@ ## What do Vue Storefront extensions look like? Depending on your needs, Vue Storefront extensions can have two parts: -- **Client-side part,** which is just a [Vue Storefront module](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/modules/introduction.md). It covers most of the use cases. +- **Client-side part,** which is just a [Vue Storefront module](https://github.com/vuestorefront/vue-storefront/blob/master/docs/guide/modules/introduction.md). It covers most of the use cases. -- **Server-side part** which is a [Vue Storefront API extension](https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/extensions/extending-api.md) and should be used if you want to add some endpoints to `vue-storefront-api` or interact with Elasticsearch. +- **Server-side part** which is a [Vue Storefront API extension](https://github.com/vuestorefront/vue-storefront/blob/master/docs/guide/extensions/extending-api.md) and should be used if you want to add some endpoints to `vue-storefront-api` or interact with Elasticsearch. ## Where extensions are located - On the client side, extension modules should be placed in `src/modules` folder of `vue-storefront` or installed via NPM cli and registered in `src/modules/index.ts` diff --git a/docs/guide/general/introduction.md b/docs/guide/general/introduction.md index 49fd636a46..9988317722 100644 --- a/docs/guide/general/introduction.md +++ b/docs/guide/general/introduction.md @@ -8,7 +8,7 @@ Vue Storefront is a rather complex solution with a lot of possibilities. Learnin Vue Storefront is a headless and backend-agnostic eCommerce [Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps/) written in Vue.js. The fact that it's using headless architecture allows Vue Storefront to connect with any eCommerce platform so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce and etc. - It's a very popular [Open Source project](https://github.com/DivanteLtd/vue-storefront) with a strong and growing community. + It's a very popular [Open Source project](https://github.com/vuestorefront/vue-storefront) with a strong and growing community. **Key features of Vue Storefront:** - Platform-agnostic @@ -23,7 +23,7 @@ Vue Storefront is a headless and backend-agnostic eCommerce [Progressive Web App ## How does it connect with backend platforms? -Vue Storefront manages to be platform-agnostic thanks to the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api) and [dedicated API connectors](https://github.com/DivanteLtd/vue-storefront#integrations) for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform, which means no matter what eCommerce backend you use, your frontend remains the same without any change. +Vue Storefront manages to be platform-agnostic thanks to the [vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api) and [dedicated API connectors](https://github.com/vuestorefront/vue-storefront#integrations) for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform, which means no matter what eCommerce backend you use, your frontend remains the same without any change. It's a great strategy for migrations since you can easily migrate from one platform to another (or one version to another, e.g. Magento 1 to 2) without touching your frontend. @@ -31,13 +31,13 @@ It's a great strategy for migrations since you can easily migrate from one platf ![Architecture diagram](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/master/docs/.vuepress/public/GitHub-Architecture-VS.png) The API connector works in two phases: -- **data pump** ([mage2nosql](https://github.com/DivanteLtd/mage2vuestorefront) in the image) is pulling static data (catalog, orders, etc.) from your eCommerce platform to Vue Storefront Elasticsearch and changes its format to the one consumed by vue-storefront-api. Once finished pulling the data, you can display the product catalog in Vue Storefront. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly. +- **data pump** ([mage2nosql](https://github.com/vuestorefront/mage2vuestorefront) in the image) is pulling static data (catalog, orders, etc.) from your eCommerce platform to Vue Storefront Elasticsearch and changes its format to the one consumed by vue-storefront-api. Once finished pulling the data, you can display the product catalog in Vue Storefront. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly. - **worker pool** is a synchronization process of so-called dynamic calls (user sessions, cart rules, etc.) that couldn't be stored in the database and need to be called by vue-storefront-api directly from the backend platform. VueStorefront works seamlessly with your backend platform while two integration phases are managed as above. -Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/DivanteLtd/mage2vuestorefront), [Magento 1](https://github.com/DivanteLtd/magento1-vsbridge), [CoreShop](https://github.com/DivanteLtd/coreshop-vsbridge), [BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront), [WooCommerce](https://github.com/DivanteLtd/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/DivanteLtd/vue-storefront-integration-boilerplate). +Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/vuestorefront/mage2vuestorefront), [Magento 1](https://github.com/vuestorefront/magento1-vsbridge), [CoreShop](https://github.com/vuestorefront/coreshop-vsbridge), [BigCommerce](https://github.com/vuestorefront/bigcommerce2vuestorefront), [WooCommerce](https://github.com/vuestorefront/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/vuestorefront/vue-storefront-integration-boilerplate). The blue parts on the diagram are responsible for offline cache and will be explained later in the article. @@ -55,7 +55,7 @@ To summarize: Your shop is basically a Vue Storefront theme that uses features p Knowing these 3 concepts allows you to confidently work with Vue Storefront and make your own shops. -Useful materials: [Vue Storefront project structure](https://docs.vuestorefront.io/guide/basics/project-structure.html) +Useful materials: [Vue Storefront project structure](/guide/basics/project-structure.html) ## Installing Vue Storefront When you want to play with Vue Storefront, there are three options: @@ -71,7 +71,7 @@ To do any of this, simply type `yarn installer` in the root of the project and a ## Vue Storefront config file -Most of the Vue Storefront configuration (like the active theme, backend API addresses, multistore setup, etc.) is done through its [config](https://docs.vuestorefront.io/guide/basics/configuration.html) file that can be found under the `config` folder. The `default.json` file contains all the default setup. +Most of the Vue Storefront configuration (like the active theme, backend API addresses, multistore setup, etc.) is done through its [config](/guide/basics/configuration.html) file that can be found under the `config` folder. The `default.json` file contains all the default setup. For your own implementation you should create a `local.json` file in the same directory and include fields from `default.json` that you want to override. These two files will be merged in favor of `local.json` during the build process. If you use the installer to set up your Vue Storefront instance, it'll generate proper config files. @@ -86,7 +86,7 @@ The mechanism of injecting core business logic into themes is ridiculously simpl So assume we have a core Microcart component with business logic as above (left side), we can easily inject it into any of our theme components (right side) just by importing it and adding as a mixin `mixins: [Microcart]`. This is all you need to make use of core business logic inside your theme. With this approach, we can easily ship updates to all core components without breaking your shop. -[Check how to create theme based on our official themes](https://docs.vuestorefront.io/guide/installation/theme.html). +[Check how to create theme based on our official themes](/guide/installation/theme.html). ## Offline mode and cache Vue Storefront still works even while the user is offline. @@ -111,12 +111,12 @@ You may not believe me but this is all you need to know to start working with Vu ## Useful Links -- [Documentation](https://docs.vuestorefront.io/) +- [Documentation](/) - [Community slack invitation link](https://join.slack.com/t/vuestorefront/shared_invite/enQtOTUwNjQyNjY5MDI0LWFmYzE4NTYxNDBhZDRlMjM5MDUzY2RiMjU0YTRjYWQ3YzdkY2YzZjZhZDZmMDUwMWQyOWRmZjQ3NDgwZGQ3NTk) -- [Project structure explained](https://docs.vuestorefront.io/guide/basics/project-structure.html) -- [Configuration file explained](https://docs.vuestorefront.io/guide/basics/configuration.html) -- [Extending Vue Storefront](https://docs.vuestorefront.io/guide/extensions/introduction.html) -- [How to contribute](https://docs.vuestorefront.io/guide/basics/contributing.html#how-to-contribute) +- [Project structure explained](/guide/basics/project-structure.html) +- [Configuration file explained](/guide/basics/configuration.html) +- [Extending Vue Storefront](/guide/extensions/introduction.html) +- [How to contribute](/guide/basics/contributing.html#how-to-contribute) ## Video with training You can also watch a video recording from 4th Vue Storefront hackathon with free introduction training diff --git a/docs/guide/installation/linux-mac.md b/docs/guide/installation/linux-mac.md index 3669470ee8..20feb6b5a4 100644 --- a/docs/guide/installation/linux-mac.md +++ b/docs/guide/installation/linux-mac.md @@ -19,7 +19,7 @@ Let's go! If you're MacOS or Linux user now you're able to install with pretty nice CLI installer :) ```bash -git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront +git clone https://github.com/vuestorefront/vue-storefront.git vue-storefront cd vue-storefront yarn yarn installer @@ -96,10 +96,10 @@ Your project should contain 2 folders at this moment: `vue-storefront` and `vue- ### Install the vue-storefront-api -You need to use [https://github.com/DivanteLtd/vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api). It's the ultimate API backend for this application. +You need to use [https://github.com/vuestorefront/vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api). It's the ultimate API backend for this application. ```bash -git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api +git clone https://github.com/vuestorefront/vue-storefront-api.git vue-storefront-api cd vue-storefront-api ``` @@ -139,7 +139,7 @@ cp config/default.json config/local.json nano config/local.json ``` -The config file is quite simple, but here you have some comments: [Config file for vue-storefront](https://github.com/DivanteLtd/vue-storefront/wiki/Config-file-format-for-vue-storefront). +The config file is quite simple, but here you have some comments: [Config file for vue-storefront](https://github.com/vuestorefront/vue-storefront/wiki/Config-file-format-for-vue-storefront). :::tip NOTE We're using the powerful node.js library for config files, check the docs to learn more on it: [https://github.com/lorenwest/node-config](https://github.com/lorenwest/node-config). @@ -184,10 +184,10 @@ Now, it's the time to install the frontend itself. ### Install the vue-storefront -First step is to clone [vue-storefront](https://github.com/DivanteLtd/vue-storefront) +First step is to clone [vue-storefront](https://github.com/vuestorefront/vue-storefront) ```bash -git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront +git clone https://github.com/vuestorefront/vue-storefront.git vue-storefront cd vue-storefront ``` diff --git a/docs/guide/installation/magento.md b/docs/guide/installation/magento.md index da1cbba2a7..5fcbcce377 100644 --- a/docs/guide/installation/magento.md +++ b/docs/guide/installation/magento.md @@ -1,7 +1,7 @@ # Integration with Magento 2 ## Using native Magento 2 module -There is a native Magento 2 [module](https://github.com/DivanteLtd/magento2-vsbridge-indexer) that synchronizes Magento 2 source data and **Vue Storefront** data store; *Elasticsearch*. -[Magento 2 VSBridge Indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) has a few advantages. More than anything, it's faster and reliable. +There is a native Magento 2 [module](https://github.com/vuestorefront/magento2-vsbridge-indexer) that synchronizes Magento 2 source data and **Vue Storefront** data store; *Elasticsearch*. +[Magento 2 VSBridge Indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) has a few advantages. More than anything, it's faster and reliable. ## Using Magento 2 API via OAuth authorization The tool is using Magento 2 API via OAuth authorization, so you need to prepare Magento Integration access at first. Go to your Magento 2 admin panel and click: System → Integrations. @@ -31,7 +31,7 @@ In the result, you’ll click _Activate_ and get some OAuth access tokens: ### Fast integration -The Magento2 data import is now integrated into `vue-storefront-api` for simplicity. It's still managed by the [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront), added as a dependency to `vue-storefront-api`. +The Magento2 data import is now integrated into `vue-storefront-api` for simplicity. It's still managed by the [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront), added as a dependency to `vue-storefront-api`. After setting the `config.magento2.api` section using yours Magento 2 OAuth credentials: @@ -68,10 +68,10 @@ yarn mage2vs import ### Manual integration -First, you need to install [mage2vuestorefront ](https://github.com/DivanteLtd/mage2vuestorefront): +First, you need to install [mage2vuestorefront ](https://github.com/vuestorefront/mage2vuestorefront): ```bash -git clone https://github.com/DivanteLtd/mage2vuestorefront.git mage2vs +git clone https://github.com/vuestorefront/mage2vuestorefront.git mage2vs cd mage2vs/src yarn install ``` @@ -166,7 +166,7 @@ After setting up Magento access, you just need to run the Order2Magento worker, yarn o2m ``` -The code of this script is [located here](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/worker/order_to_magento2.js) so you can easily check how it’s working. +The code of this script is [located here](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/worker/order_to_magento2.js) so you can easily check how it’s working. Starting from Vue Storefront v1.6, now we have a special switch in `vue-storefront-api`: `config.orders.useServerQueue` which is set to `false` by default. With this option disabled, the `order_2_magento` process is no longer needed, as the incoming orders are directly send to Magento 2. If it's set to `true`, the old behavior of the server-based Redis queues used to stack the orders first is being used. @@ -182,4 +182,4 @@ We have an option for that! If you have the Magento 2 API configured within the synchronize: true; ``` -to `cart` section. Please check the [default config for reference](https://github.com/DivanteLtd/vue-storefront/blob/193cf44a6e936136fc19e22b45fe8dbc4b33f844/config/default.json#L8). +to `cart` section. Please check the [default config for reference](https://github.com/vuestorefront/vue-storefront/blob/193cf44a6e936136fc19e22b45fe8dbc4b33f844/config/default.json#L8). diff --git a/docs/guide/installation/production-setup.md b/docs/guide/installation/production-setup.md index 75a6ddcb7e..61838c1a18 100644 --- a/docs/guide/installation/production-setup.md +++ b/docs/guide/installation/production-setup.md @@ -11,7 +11,7 @@ To run Vue Storefront in production mode without Docker/Kubernetes, you'll need Assumptions for the rest of this tutorial: - You have root access to a Debian Linux machine. -- We'll be using the default local ports `3000` for [`vue-storefront`](https://github.com/DivanteLtd/vue-storefront) and `8080` for [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api); the ports **should not be exposed**, as they will be hidden behind **NGINX proxy**. +- We'll be using the default local ports `3000` for [`vue-storefront`](https://github.com/vuestorefront/vue-storefront) and `8080` for [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api); the ports **should not be exposed**, as they will be hidden behind **NGINX proxy**. - We're using **prod.vuestorefront.io** as a domain name. Please replace it with your host URL address. - We assume that you have an SSL certificate for **prod.vuestorefront.io** (or your domain, of course). SSL encryption is required for PWA and Service Workers. @@ -204,7 +204,7 @@ location /api/ { } ``` -The next proxy section is used for serving the API. It's a proxy to [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) app running on `8080` port (default config). API will be available under ___https://prod.vuestorefront.io/api___ +The next proxy section is used for serving the API. It's a proxy to [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) app running on `8080` port (default config). API will be available under ___https://prod.vuestorefront.io/api___ ``` location /img/ { @@ -212,7 +212,7 @@ location /img/ { } ``` -The last proxy is used for serving product images. It's a proxy to the [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api) app running on `8080` port (default config). Images will be available under ___https://prod.vuestorefront.io/img___ +The last proxy is used for serving product images. It's a proxy to the [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api) app running on `8080` port (default config). Images will be available under ___https://prod.vuestorefront.io/img___ #### Apache2 configuration @@ -247,8 +247,8 @@ You need to clone the `vue-storefront` and the `vue-storefront-api` repos accord ```bash su vuestorefront cd /home/www/vuestorefront -git clone https://github.com/DivanteLtd/vue-storefront.git -git clone https://github.com/DivanteLtd/vue-storefront-api.git +git clone https://github.com/vuestorefront/vue-storefront.git +git clone https://github.com/vuestorefront/vue-storefront-api.git ``` Then, you will need to install the required node packages: @@ -269,7 +269,7 @@ It may take a few minutes. The phantomjs dependency requires bzip2 to be install #### Vue Storefront configuration -The full configuration files are available here to download: [vue-storefront](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront/config) and [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config). +The full configuration files are available here to download: [vue-storefront](https://github.com/vuestorefront/vue-storefront/blob/develop/docs/guide/installation/vue-storefront/config) and [vue-storefront-api](https://github.com/vuestorefront/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config). Please create the `vue-storefront-api/config/local.json` and `vue-storefront/config/local.json` files accordingly by copying default.json into local.json by using `cp` command: ```bash @@ -342,7 +342,7 @@ If you want to see how the local.json should look like after your modifications, #### Vue Storefront API configuration -The [provided vue-storefront-api configuration](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config) requires almost no changes. +The [provided vue-storefront-api configuration](https://github.com/vuestorefront/vue-storefront/blob/develop/docs/guide/installation/vue-storefront-api/config) requires almost no changes. The only lines you need to alter are: @@ -405,7 +405,7 @@ yarn build #### Data import -Vue Storefront needs to have some data in the Elasticsearch to properly display products and categories. Of course, you can install [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) and configure the data pump to synchronize and update the Elasticsearch index whenever data is being changed in Magento. For the purpose of this tutorial, we'll just restore the data from the JSON file. +Vue Storefront needs to have some data in the Elasticsearch to properly display products and categories. Of course, you can install [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) and configure the data pump to synchronize and update the Elasticsearch index whenever data is being changed in Magento. For the purpose of this tutorial, we'll just restore the data from the JSON file. You can easily dump your current VS index using the following command (your local installation): diff --git a/docs/guide/installation/theme.md b/docs/guide/installation/theme.md index 9b1fd6816f..ae6fc1dac3 100644 --- a/docs/guide/installation/theme.md +++ b/docs/guide/installation/theme.md @@ -51,5 +51,5 @@ After official theme installation, you need to copy it and place it in `src/them and run `yarn` to make [Lerna](https://github.com/lerna/lerna) linking (which we use for monorepos). ## Our official themes: -- [Capybara](https://github.com/DivanteLtd/vsf-capybara) -- [Default](https://github.com/DivanteLtd/vsf-default) +- [Capybara](https://github.com/vuestorefront/vsf-capybara) +- [Default](https://github.com/vuestorefront/vsf-default) diff --git a/docs/guide/installation/windows.md b/docs/guide/installation/windows.md index 931c8f3762..d231169445 100644 --- a/docs/guide/installation/windows.md +++ b/docs/guide/installation/windows.md @@ -13,10 +13,10 @@ Vue Storefront is based on open-source technologies, which should (in theory) wo ## Installation of vue-storefront-api 1. Open your command line of choice with [Git](https://git-scm.com/download/win) access or use Github desktop. -2. Clone the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api) project: +2. Clone the [vue-storefront-api](https://github.com/vuestorefront/vue-storefront-api) project: ```bash -git clone https://github.com/DivanteLtd/vue-storefront-api.git vue-storefront-api +git clone https://github.com/vuestorefront/vue-storefront-api.git vue-storefront-api ``` 3. Go to `vue-storefront-api` in dir: @@ -58,10 +58,10 @@ yarn dev ## Installation of vue-storefront 1. Open your command line of choice with [Git](https://git-scm.com/download/win) access or use Github desktop. -2. Clone the [vue-storefront](https://github.com/DivanteLtd/vue-storefront) project: +2. Clone the [vue-storefront](https://github.com/vuestorefront/vue-storefront) project: ```bash -git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront +git clone https://github.com/vuestorefront/vue-storefront.git vue-storefront ``` 3. Go to `vue-storefront` directory: diff --git a/docs/guide/integrations/integrations.md b/docs/guide/integrations/integrations.md index e2090e2c23..dd8e8fe2b7 100644 --- a/docs/guide/integrations/integrations.md +++ b/docs/guide/integrations/integrations.md @@ -2,10 +2,10 @@ Here is a short list of existing Vue Storefront integrations with links to their repositories. -- [Vue Storefront + Magento](https://github.com/DivanteLtd/mage2vuestorefront) -- [Vue Storefront + Magento 1.9](https://github.com/DivanteLtd/magento1-vsbridge) -- [Vue Storefront + with Magento checkout](https://github.com/DivanteLtd/magento2-external-checkout) -- [Vue Storefront + Pimcore](https://github.com/DivanteLtd/pimcore2vuestorefront) -- [Magento2 Product Reviews](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/Reviews.md) -- [Vue Storefront 3rd party platforms integration boilerplate](https://github.com/DivanteLtd/vue-storefront-integration-boilerplate) - This is the API you should implement to integrate a third-party platform. +- [Vue Storefront + Magento](https://github.com/vuestorefront/mage2vuestorefront) +- [Vue Storefront + Magento 1.9](https://github.com/vuestorefront/magento1-vsbridge) +- [Vue Storefront + with Magento checkout](https://github.com/vuestorefront/magento2-external-checkout) +- [Vue Storefront + Pimcore](https://github.com/vuestorefront/pimcore2vuestorefront) +- [Magento2 Product Reviews](https://github.com/vuestorefront/vue-storefront/blob/develop/doc/Reviews.md) +- [Vue Storefront 3rd party platforms integration boilerplate](https://github.com/vuestorefront/vue-storefront-integration-boilerplate) - This is the API you should implement to integrate a third-party platform. - [Vue Storefront + Fresh Relevance](https://github.com/TriggeredMessaging/vsf-freshrelevance) diff --git a/docs/guide/integrations/multistore.md b/docs/guide/integrations/multistore.md index d6e8f17853..8b4e319681 100644 --- a/docs/guide/integrations/multistore.md +++ b/docs/guide/integrations/multistore.md @@ -9,7 +9,7 @@ Vue Storefront supports Magento Multistore installations ## Multiwebsite indexing -Multiwebsite support starts with the Elasticsearch indexing. Basically, each store has its own Elasticsearch index and should be populated using the [Magento2 VSBridge Indexer](https://github.com/DivanteLtd/magento2-vsbridge-indexer) tool. +Multiwebsite support starts with the Elasticsearch indexing. Basically, each store has its own Elasticsearch index and should be populated using the [Magento2 VSBridge Indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) tool. :::warning @@ -220,7 +220,7 @@ export default function(app, router, store) { Another option is to create a separate theme for a specific storeview. Runtime theme changes are not possible, as themes are compiled in the JS bundles by webpack during the page build process. In that case, you should run separate instances of `vue-storefront` having the proper theme set in the `config/local.json` file. ## Multi Source Inventory (MSI) support -To support this custom feature you should take care of 2 things. At first please install [Magento2 VSBridge Indexer MSI Extension](https://github.com/DivanteLtd/magento2-vsbridge-indexer-msi). Then in `config/local.json` of your VSF-API add part like: +To support this custom feature you should take care of 2 things. At first please install [Magento2 VSBridge Indexer MSI Extension](https://github.com/vuestorefront/magento2-vsbridge-indexer-msi). Then in `config/local.json` of your VSF-API add part like: ```js "msi": { "enabled": true, diff --git a/docs/guide/integrations/paypal-payments.md b/docs/guide/integrations/paypal-payments.md index 441c36b68a..dae319574c 100644 --- a/docs/guide/integrations/paypal-payments.md +++ b/docs/guide/integrations/paypal-payments.md @@ -1,6 +1,6 @@ # PayPal payments support -Vue Storefront is supporting PayPal payments with PayPal Payment extension for [vue-storefront](https://github.com/DivanteLtd/vue-storefront), by [Develo Design](https://www.develodesign.co.uk). +Vue Storefront is supporting PayPal payments with PayPal Payment extension for [vue-storefront](https://github.com/vuestorefront/vue-storefront), by [Develo Design](https://www.develodesign.co.uk). ## The architecture diff --git a/docs/guide/integrations/reviews.md b/docs/guide/integrations/reviews.md index d08d3a7ff3..35d4625aba 100644 --- a/docs/guide/integrations/reviews.md +++ b/docs/guide/integrations/reviews.md @@ -1,16 +1,16 @@ # Product Reviews -Starting with the 1.4.0 release, Vue Storefront is supporting Magento 2 product reviews. Unfortunately, the Magento 2 REST API doesn't contain any Reviews-related endpoints, so to make it work, you need to install an [additional Magento 2 module](https://github.com/DivanteLtd/magento2-review-api). +Starting with the 1.4.0 release, Vue Storefront is supporting Magento 2 product reviews. Unfortunately, the Magento 2 REST API doesn't contain any Reviews-related endpoints, so to make it work, you need to install an [additional Magento 2 module](https://github.com/vuestorefront/magento2-review-api). Installation steps (in your Magento 2 directory): ```bash -composer config repositories.divante vcs https://github.com/DivanteLtd/magento2-review-api.git +composer config repositories.divante vcs https://github.com/vuestorefront/magento2-review-api.git composer require divante/magento2-review-api:dev-master php bin/magento setup:upgrade ``` -You should be aware that Reviews are stored in the Elasticsearch. To display Reviews correctly, you need to update your [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront/) and run the Reviews sync: +You should be aware that Reviews are stored in the Elasticsearch. To display Reviews correctly, you need to update your [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront/) and run the Reviews sync: ```bash node --harmony cli.js reviews diff --git a/docs/guide/integrations/totals-sync.md b/docs/guide/integrations/totals-sync.md index de95988d52..6c40fa7751 100644 --- a/docs/guide/integrations/totals-sync.md +++ b/docs/guide/integrations/totals-sync.md @@ -47,7 +47,7 @@ By default, the cart and totals sync is disabled. To make it work, you just need }, ``` -Please check the [`conf/default.json`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/config/default.json) for the reference. +Please check the [`conf/default.json`](https://github.com/vuestorefront/vue-storefront-api/blob/master/config/default.json) for the reference. 3. Move to your `vue-storefront` installation catalog and modify the `config/local.json`. You need to change the `cart` section to switch the `synchronize` and `synchronize_totals` flags to true: @@ -67,7 +67,7 @@ Please check the [`conf/default.json`](https://github.com/DivanteLtd/vue-storefr }, ``` -Please check the [`conf/default.json`](https://github.com/DivanteLtd/vue-storefront/blob/1302ed84561a514beb8c35e45ae1d0aa4dc9f74a/config/default.json#L8) for a reference. +Please check the [`conf/default.json`](https://github.com/vuestorefront/vue-storefront/blob/1302ed84561a514beb8c35e45ae1d0aa4dc9f74a/config/default.json#L8) for a reference. ## Prices sync @@ -81,7 +81,7 @@ One of the cool features of Vue Storefront is queued order sync. This means when On the server side, the `vue-storefront-api` is the first line that the order is crossing on its way back to Magento 2. No matter if the shopping cart was synchronized (as described above) or not, the order will be converted to a Magento 2 object. -The server API stores the order in the queue where it's processed by the [`order_2_magento`](https://github.com/DivanteLtd/vue-storefront-api/blob/master/src/worker/order_to_magento2.js) worker process. We do support multiple types of orders: for guest users and logged in, with already synchronized carts or not, etc. +The server API stores the order in the queue where it's processed by the [`order_2_magento`](https://github.com/vuestorefront/vue-storefront-api/blob/master/src/worker/order_to_magento2.js) worker process. We do support multiple types of orders: for guest users and logged in, with already synchronized carts or not, etc. This process doesn't require much additional configuration: diff --git a/docs/guide/modules/cart.md b/docs/guide/modules/cart.md index d1cb52fc35..1cb75f13f7 100644 --- a/docs/guide/modules/cart.md +++ b/docs/guide/modules/cart.md @@ -79,28 +79,28 @@ Cart Store is designed to handle all actions related the shopping cart. }, ``` -Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). +Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). The cart state data: - `itemsAfterPlatformTotals` - helper collection, dictionary where the key is Magento cart item `item_id` that stores the totals information per item - received from Magento; it's automatically populated when `config.cart.synchronize_totals` is enabled; -- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/syncTotals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) +- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/syncTotals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) - `cartIsLoaded` (bool) - true after dispatching `cart/load` - `shipping` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), - `payment` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), -- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added +- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/vuestorefront/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added ### Events The following events are published from `cart` store: -- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI +- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI - `EventBus.$emit('cart-before-add', { product: item })` - fired after product has been added to the cart, - `EventBus.$emit('cart-before-save', { items: state.cartItems })` - fired after the product cart has been saved, - `EventBus.$emit('cart-before-delete', { items: state.cartItems })` - the event fired before the cart item is going to be deleted with the current cart state (before item is deleted) - `EventBus.$emit('cart-after-delete', { items: state.cartItems })` - the event fired before the cart item has been deleted with the current cart state (after item is deleted) -- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property -- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property - `EventBus.$emit('application-after-loaded')` - event called after `cart/load` action has been dispatched to notify that cart is being available, - `EventBus.$emit('cart-after-updatetotals', { platformTotals: totals, platformTotalSegments: platformTotalSegments })` - event called after the totals from Magento has been synchronized with current state; it's going to be emitted only when `cart.synchronize_totals` option is enabled. diff --git a/docs/guide/modules/catalog.md b/docs/guide/modules/catalog.md index c017fd94ca..0241fe66c4 100644 --- a/docs/guide/modules/catalog.md +++ b/docs/guide/modules/catalog.md @@ -31,7 +31,7 @@ this.$store.dispatch('attribute/list', { }); ``` -This is example from [product compare feature](https://github.com/DivanteLtd/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). +This is example from [product compare feature](https://github.com/vuestorefront/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). The attribute state data: @@ -76,7 +76,7 @@ const state = { }; ``` -Category state is generally populated by just two methods [list](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) +Category state is generally populated by just two methods [list](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) :::tip Note The action `category/single` uses `localForage` cache only - no ElasticSearch data store directly; because of this optimization, please do download the categories list by dispatching `category/list` at first. @@ -84,7 +84,7 @@ The action `category/single` uses `localForage` cache only - no ElasticSearch da The category state data: -- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) - `current` - this is the current category object, - `filters` is a current state of the category filters - dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: @@ -103,7 +103,7 @@ Please note, that we're using the Magento like EAV attributes structure - so the The following events are published from `category` store: -- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded, +- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded, - `EventBus.$emit('category-after-current', { category: category })` - after current category has been changed - this is subsequent call of `category/single` action, - `EventBus.$emit('category-after-reset', { })` - after category has been reset (for example in the process of moving from one category page to another) - `EventBus.$emit('category-after-list', { query: qrObj, sort: sort, size: size, start: start, list: resp })` - this event emits the current category list as it's returned by `category/list`. @@ -172,13 +172,13 @@ const state = { }; ``` -Product state is generally populated by just two methods [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215) +Product state is generally populated by just two methods [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215) The product state data: -- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) -- `current` - this is the product object with selected `configurable_children` variant - so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203) this is the product which is added to the cart after "Add to cart" -- `current_options` - it's a list used to populate the variant selector on the [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56) it contains dictionary of attributes x possible attribute values and labels and it's populated by [setupVariants](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property +- `breadcrumbs` - this is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `current` - this is the product object with selected `configurable_children` variant - so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203) this is the product which is added to the cart after "Add to cart" +- `current_options` - it's a list used to populate the variant selector on the [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56) it contains dictionary of attributes x possible attribute values and labels and it's populated by [setupVariants](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property - `current_configuration` is a current product configuration - dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: ```json @@ -190,16 +190,16 @@ The product state data: Please note, that we're using the Magento like EAV attributes structure - so the values here are an attribute value indexes not the values itself. Please take a look at [Data formats](../data/elasticsearch.md) for a reference -- `parent` - if the current product is a `type_id="single"` then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) -- `list` - this is an Array of products loaded by [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) +- `parent` - if the current product is a `type_id="single"` then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) +- `list` - this is an Array of products loaded by [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) - `original` - used only for `configurable` products; this is the base product with no variant selected -- `related` - this is dictionary of related products; set outside this store (for [example here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) +- `related` - this is dictionary of related products; set outside this store (for [example here](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) #### Events The following events are published from `product` store: -- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento; +- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento; - `EventBus.$emit('product-after-configure', { product: product, configuration: configuration, selectedVariant: selectedVariant })` from `configureProductAsync` (called by `product/configure` action after `product/single`). This event provides the information about selected product variant on the product page - `EventBus.$emit('product-after-list', { query: query, start: start, size: size, sort: sort, entityType: entityType, result: resp })` - this event emits the current product list as it's returned by `product/list` providing the current filters etc. You can mark specific product list identifier by setting `meta` property; it's important because on single page this event can be executed multiple time for each individual block of products - `EventBus.$emit('product-after-single', { key: key, options: options, product: cachedProduct })` - after single product has been loaded (invoked by `product/single` action)related products @@ -224,7 +224,7 @@ This method is called as a subsequent call of `Product.vue:fetchData` or `produc **`checkConfigurableParent (context, {product})`** -This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so the redirect is being made to the parent product. It's a fix for [#508](https://github.com/DivanteLtd/vue-storefront/issues/508) +This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so the redirect is being made to the parent product. It's a fix for [#508](https://github.com/vuestorefront/vue-storefront/issues/508) **`setupVariants (context, { product })`** diff --git a/docs/guide/modules/checkout.md b/docs/guide/modules/checkout.md index 690b4372da..c5503edf4a 100644 --- a/docs/guide/modules/checkout.md +++ b/docs/guide/modules/checkout.md @@ -240,14 +240,14 @@ The Checkout Store is designed to handle the passage from user's cart to actual } ``` -The state of the Checkout module contains both the [Order object](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json) and the information given by the user during the checkout process, to be stored for further use in the `localForage`. +The state of the Checkout module contains both the [Order object](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json) and the information given by the user during the checkout process, to be stored for further use in the `localForage`. -The state is modified by [`placeOrder`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L11) action and [`load`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L41) which loads the state from browser database. +The state is modified by [`placeOrder`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L11) action and [`load`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/checkout/actions.js#L41) which loads the state from browser database. The category state data: -- `order` - this is the last order to be placed, the [schema is defined](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json) in Ajv compliant format -- `shippingDetails`, `paymentDetails` - the address information provided by the user during the [Checkout](https://github.com/DivanteLtd/vue-storefront/blob/master/core/pages/Checkout.vue). +- `order` - this is the last order to be placed, the [schema is defined](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json) in Ajv compliant format +- `shippingDetails`, `paymentDetails` - the address information provided by the user during the [Checkout](https://github.com/vuestorefront/vue-storefront/blob/master/core/pages/Checkout.vue). ### Actions @@ -255,7 +255,7 @@ The cart store provides following public actions: #### `placeOrder (context, { order })` -Action called by `Checkout.vue` to complete the order. Data object is validated against the [order schema](https://github.com/DivanteLtd/vue-storefront/blob/master/core/models/order.schema.json), stored within the `localForage` collection by subseqent call of [`order/placeOrder`](https://github.com/DivanteLtd/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/order/actions.js#L12) +Action called by `Checkout.vue` to complete the order. Data object is validated against the [order schema](https://github.com/vuestorefront/vue-storefront/blob/master/core/models/order.schema.json), stored within the `localForage` collection by subseqent call of [`order/placeOrder`](https://github.com/vuestorefront/vue-storefront/blob/1793aaa7afc89b3f08e443f40dd5c6131dd477ba/core/store/modules/order/actions.js#L12) #### `savePersonalDetails ({ commit }, personalDetails)` diff --git a/docs/guide/modules/introduction.md b/docs/guide/modules/introduction.md index 50119de2d2..f144640fca 100644 --- a/docs/guide/modules/introduction.md +++ b/docs/guide/modules/introduction.md @@ -50,7 +50,7 @@ This is the modularity and extendability we are looking for in Vue Storefront an ## What is the purpose of VS modules? -The purpose is well described in [this discussion](https://github.com/DivanteLtd/vue-storefront/issues/1213). It can be summarized to: +The purpose is well described in [this discussion](https://github.com/vuestorefront/vue-storefront/issues/1213). It can be summarized to: - **Better extendability**: We can extend each module or replace it completely with the new one. For example, we may want to replace our Cart module with the one that allows to have multiple carts. With module approach, we can just detach the current Cart module and replace it with the new one. Another example can be using different modules for different content CMSes integration etc. - **Better developer experience**: Along with the modules we are introducing many features focused on delivering better and easier experience for developers to hop on in a more predictable way. We changed the way you can compose components with features, added unit tests, TypeScript interfaces etc. @@ -82,7 +82,7 @@ interface VueStorefrontModuleConfig { } ``` -See code [here](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/index.ts) +See code [here](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/index.ts) ### `key` (required) @@ -128,7 +128,7 @@ Try to have a similar file structure inside the ones that you create. If all the Not all of this folders and files should exist in every module. The only mandatory file is `index.ts` which is the entry point. The rest depends on your needs and module functionality. -You can take a look at [module template](https://github.com/DivanteLtd/vue-storefront/tree/master/core/modules/module-template) with an example implementation of all features listed in config. +You can take a look at [module template](https://github.com/vuestorefront/vue-storefront/tree/master/core/modules/module-template) with an example implementation of all features listed in config. - `components` - Components logic related to this module (eg. Microcart for Cart module). Normally it contains `.ts` files but you can also create `.vue` files and provide some baseline markup if it is required for the component to work out of the box. - `pages` - If you want to provide full pages with your module, place them here. It's also a good practice to extend router configuration for these pages @@ -208,10 +208,10 @@ addToCart(product, success, failure) { } ``` -Try to choose a method based on use cases. [This](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28) is a good example of using callbacks. +Try to choose a method based on use cases. [This](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28) is a good example of using callbacks. -5. Create pure functions that can be easily called with a different argument. Rely on `data` properties instead of arguments only if it's required (for example, they are validated as [here](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28)) -6. Make a document for exported components like as follows : [document](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts) +5. Create pure functions that can be easily called with a different argument. Rely on `data` properties instead of arguments only if it's required (for example, they are validated as [here](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts#L28)) +6. Make a document for exported components like as follows : [document](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/mailchimp/components/Subscribe.ts) 7. If your module core functionality is an integration with external service, better name it the same as this service (for example `mailchimp`) 8. Use named exports and type check. @@ -282,4 +282,4 @@ If you want to create a third party module, just copy the `src/modules/module-te ## Contributions -Please introduce every new feature as a standalone, encapsulated module. We also need your help in rewriting Vue Storefront to modular approach - [here](https://github.com/DivanteLtd/vue-storefront/issues?q=is%3Aissue+is%3Aopen+label%3A%22API+Module%22) you can find tasks related to this architecture change and [here](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/refactoring-to-modules.md) is the tutorial on how to approach applying these changes. +Please introduce every new feature as a standalone, encapsulated module. We also need your help in rewriting Vue Storefront to modular approach - [here](https://github.com/vuestorefront/vue-storefront/issues?q=is%3Aissue+is%3Aopen+label%3A%22API+Module%22) you can find tasks related to this architecture change and [here](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/refactoring-to-modules.md) is the tutorial on how to approach applying these changes. diff --git a/docs/guide/modules/review.md b/docs/guide/modules/review.md index 9b3e84fb22..d4161b265f 100644 --- a/docs/guide/modules/review.md +++ b/docs/guide/modules/review.md @@ -79,28 +79,28 @@ Cart Store is designed to handle all actions related the shopping cart. }, ``` -Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). +Cart state is automatically loaded from `localForage` collection after page has been loaded whenever `core/components/blocks/Microcart.vue` is included. The cart state is loaded by dispatching `cart/load` action and [stored automatically by any change to the cart state](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/index.js#L118). The cart state data: - `itemsAfterPlatformTotals` - helper collection, dictionary where the key is Magento cart item `item_id` that stores the totals information per item - received from Magento; it's automatically populated when `config.cart.synchronize_totals` is enabled; -- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/serverTotals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) +- `platformTotals` - similarly to above item, here we have the full totals from Magento for the current shopping cart. These collections are populated by [`cart/serverTotals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/actions.js#L49) and the event handler for [`servercart-after-totals`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L30) - `cartIsLoaded` (bool) - true after dispatching `cart/load` - `shipping` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), - `payment` - (object) currently selected shipping method - only when NOT using `cart.synchronize_totals` (if so, the shipping and payment's data comes from Magento2), -- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added +- `cartItems` - collection of the cart items; the item format is the same as described in [ElasticSearch Data formats](https://github.com/vuestorefront/vue-storefront/blob/master/doc/ElasticSearch%20data%20formats.md) - the `product` class; the only difference is that the (int) `qty` field is added ### Events The following events are published from `cart` store: -- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI +- `EventBus.$emit('cart-after-itemchanged', { item: cartItem })` - executed after [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) - after server cart sync, that signalize the specific shopping cart item has been changed; `Microcart/Product.vue` component is subscribed to this event to refresh the shopping cart UI - `EventBus.$emit('cart-before-add', { product: item })` - fired after product has been added to the cart, - `EventBus.$emit('cart-before-save', { items: state.cartItems })` - fired after the product cart has been saved, - `EventBus.$emit('cart-before-delete', { items: state.cartItems })` - the event fired before the cart item is going to be deleted with the current cart state (before item is deleted) - `EventBus.$emit('cart-after-delete', { items: state.cartItems })` - the event fired before the cart item has been deleted with the current cart state (after item is deleted) -- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property -- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-before-itemchanged', { item: record })` - item called before the specific item properties are going to be changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property +- `EventBus.$emit('cart-after-itemchanged', { item: record })` - item called after the specific item properites has been changed; for example called when [`servercart-after-itemupdated`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L108) is going to change the `server_item_id` property - `EventBus.$emit('application-after-loaded')` - event called after `cart/load` action has been dispatched to notify that cart is being available, - `EventBus.$emit('cart-after-updatetotals', { platformTotals: totals, platformTotalSegments: platformTotalSegments })` - event called after the totals from Magento has been synchronized with current state; it's going to be emitted only when `cart.synchronize_totals` option is enabled. @@ -134,7 +134,7 @@ Action is dispatched to create the server cart and store the cart id (for furthe #### `serverUpdateItem (context, cartItem)`, `serverDeleteItem (context, cartItem)` -Actions called whenever the shopping cart item should be synchronized with server side (pushes changes to the server). Basically this method is called within [`servercart-after-pulled`](https://github.com/DivanteLtd/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L45) +Actions called whenever the shopping cart item should be synchronized with server side (pushes changes to the server). Basically this method is called within [`servercart-after-pulled`](https://github.com/vuestorefront/vue-storefront/blob/c43b2966a9ae10661e5a62b10445403ed9789b32/core/store/modules/cart/index.js#L45) #### `load (context)` diff --git a/docs/guide/modules/user.md b/docs/guide/modules/user.md index b149651122..b3edb7cf82 100644 --- a/docs/guide/modules/user.md +++ b/docs/guide/modules/user.md @@ -75,8 +75,8 @@ All user related data is stored in the original eCommerce CMS/Magento and the mo The user state data: -- `token` - this is the current user token got from the [`user/login`](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L64). It's used to authorize all subsequent calls with the current user identity. If this token is not empty it does mean that the user is authorized. -- `current` - this is the current user object received from [`user/me`](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L105) - immediately called after the login action. +- `token` - this is the current user token got from the [`user/login`](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L64). It's used to authorize all subsequent calls with the current user identity. If this token is not empty it does mean that the user is authorized. +- `current` - this is the current user object received from [`user/me`](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L105) - immediately called after the login action. The user data format: @@ -145,8 +145,8 @@ The user data format: The following events are published from `user` store: -- `EventBus.$emit('session-after-started')` - executed just [after the application has been loaded](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L22) and the User UI session has started -- `EventBus.$emit('user-after-loggedin', res)` - executed after the successful [`user/me` action call](https://github.com/DivanteLtd/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L123) - so the user has been authorized and the profile loaded +- `EventBus.$emit('session-after-started')` - executed just [after the application has been loaded](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L22) and the User UI session has started +- `EventBus.$emit('user-after-loggedin', res)` - executed after the successful [`user/me` action call](https://github.com/vuestorefront/vue-storefront/blob/fabea12dd6ab4f8824b58812b0cfdabce94cde70/core/store/modules/user/actions.js#L123) - so the user has been authorized and the profile loaded ### Actions @@ -174,7 +174,7 @@ Loads the user profile from eCommerce CMS; when `userCache` is set to true the r #### `update (context, userData)` -This action is used to update various user profile data. Please check the [user schema](https://github.com/DivanteLtd/vue-storefront/blob/master/core/store/modules/user/userProfile.schema.json) for the data format details. +This action is used to update various user profile data. Please check the [user schema](https://github.com/vuestorefront/vue-storefront/blob/master/core/store/modules/user/userProfile.schema.json) for the data format details. #### `changePassword (context, passwordData)` diff --git a/docs/guide/upgrade-notes/README.md b/docs/guide/upgrade-notes/README.md index 188807be26..9a48e4f1f8 100644 --- a/docs/guide/upgrade-notes/README.md +++ b/docs/guide/upgrade-notes/README.md @@ -8,7 +8,7 @@ Most of the changes added to 1.12 are backward compatible. To enable the new fea **Remove bodybuilder and compact API responses** -The new search adapter `api-search-query` has been added. When you switch to it, by setting the `config.server.api = "api-search-query"` the ElasticSearch query is being built in the [`vue-storefront-api`](https://github.com/DivanteLtd/vue-storefront-api/pull/390) which saves around 400kB in the bundle size as `bodybuilder` is no longer needed in the frontend. +The new search adapter `api-search-query` has been added. When you switch to it, by setting the `config.server.api = "api-search-query"` the ElasticSearch query is being built in the [`vue-storefront-api`](https://github.com/vuestorefront/vue-storefront-api/pull/390) which saves around 400kB in the bundle size as `bodybuilder` is no longer needed in the frontend. This new `api-search-query` adapter supports the `response_format` query parameter which now is sent to the `/api/catalog` endpoint. Currently there is just one additional format supported: `response_format=compact`. When used, the response format got optimized by: a) remapping the results, removing the `_source` from the `hits.hits`; b) compressing the JSON fields names according to the `config.products.fieldsToCompact`; c) removing the JSON fields from the `product.configurable_children` when their values === parent product values; overall response size reduced over -70%. @@ -76,10 +76,10 @@ Comment those lines: This is the last major release of Vue Storefront 1.x before 2.0 therefore more manual updates are required to keep external packages compatible with 1.x as long as possible. - `src/modules/index.ts` was renamed to `client.ts`, exported property was renamed to `registerClientModules` - Output compression module has been added; it's enabled by default on production builds; to disable it please switch the `src/modules/server.ts` configuration -- The [`formatCategoryLink`](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/modules/url/helpers/index.ts) now supports multistore - adding the `storeCode` when necessary; it could have caused double store prefixes like `/de/de` - but probably only in the Breadcrumbs (#3359) +- The [`formatCategoryLink`](https://github.com/vuestorefront/vue-storefront/blob/develop/core/modules/url/helpers/index.ts) now supports multistore - adding the `storeCode` when necessary; it could have caused double store prefixes like `/de/de` - but probably only in the Breadcrumbs (#3359) - All modules were refactored to new API. You can still register modules in previous format until 2.0 - `DroppointShipping` and `magento-2-cms `modules were deleted -- example modules moved to https://github.com/DivanteLtd/vsf-samples +- example modules moved to https://github.com/vuestorefront/vsf-samples - `core/helpers/initCacheStorage.ts` merged with `StorageManager.ts` (import path alias for backward compatibility added) - Old extensions mechanism (before VS 1.4) was finally removed after being deprecated for almost a year (`src/extensions` removal) - Cache collections were reorganized. In most cases Local Storage keys remained untouched, only collection keys were unified. also they're used only in the core. Posting changes in case someone is using those collections in their modules; @@ -149,7 +149,7 @@ If by some reasons you wan't to have the `localStorage` back on for `Products by - The modules: `Review`, `Mailer`, `Order`, `RecentlyViewed`, `InstantCheckout` are no longer loaded by default in the main bundle as they are loading on-demand on the related pages. - Authentication guard was moved from user module router to `MyAccount` pages mixin. - The getters `cmsBlocks`, `cmsBlockIdentifier`, `cmsBlockId` are deprecated. Please use `getCmsBlocks`, `getCmsBlockIdentifier`, `getCmsBlockId` instead. -- Translations for "Order #", "Price ", "Select size ", "You are logged in as" and "items" changed, they now include a placeholder for the value. Please refer to [this commit](https://github.com/DivanteLtd/vue-storefront/pull/3550/commits/366d31bf28a1e27a7f14b222369cba8fe0a6d3e0) in order to adjust them, otherwise they might get lost. +- Translations for "Order #", "Price ", "Select size ", "You are logged in as" and "items" changed, they now include a placeholder for the value. Please refer to [this commit](https://github.com/vuestorefront/vue-storefront/pull/3550/commits/366d31bf28a1e27a7f14b222369cba8fe0a6d3e0) in order to adjust them, otherwise they might get lost. - `i18n.currencySignPlacement` config value is replaced by `i18n.priceFormat` so price format becomes more flexible - Theme initialization needs to be modified in customized themes - Delete the line `RouterManager.addRoutes(routes, router, true)`. This is now handled in `setupMultistoreRoutes`, including the default store. @@ -209,12 +209,12 @@ const module = createModule(moduleConfig) - Update your local.json config and set default `api.url` path, without it you may have problems with elasticsearch queries. ### Troubleshooting -- In case of CORS problem after upgrade check your elasticsearch url in config file. Best practice for that change can be found [here](https://github.com/DivanteLtd/vue-storefront/commit/77fc9c2765068303879c75ef9ed4a4b98f6763b6) +- In case of CORS problem after upgrade check your elasticsearch url in config file. Best practice for that change can be found [here](https://github.com/vuestorefront/vue-storefront/commit/77fc9c2765068303879c75ef9ed4a4b98f6763b6) - In case of app crashing, especially when opening `vue devtools` in browser, try setting `storeViews.commonCache` to `false`. ## 1.7 -> 1.8 -Full changelog is available [here](https://github.com/DivanteLtd/vue-storefront/blob/master/CHANGELOG.md) +Full changelog is available [here](https://github.com/vuestorefront/vue-storefront/blob/master/CHANGELOG.md) - `store/types` have moved to new module named `core/types`. - `store/lib/search` has been moved to `core/lib/search`. @@ -244,13 +244,13 @@ Backward compatibility: To reverse to the 1.0–1.6 behavior: **NOTE:** Offline mode may not work properly in development mode (localhost) because of Service Workers and lack of bundle prefetching (bundles lazy loading). -With 1.7, the number of attribute descriptors that are loaded on the product page is limited and dynamically adjusted to the fields used in the product. This behavior shouldn't have any negative impact on your app; however, if you haven’t used the `attribute/list` action explicitly based on all attributes loaded by default (up to 1.6), this may cause problems. You can switch off the dynamic loader by setting the `config.entities.product.useDynamicAttributeLoader=false`. Details: [#2137](https://github.com/DivanteLtd/vue-storefront/pull/2137/files) +With 1.7, the number of attribute descriptors that are loaded on the product page is limited and dynamically adjusted to the fields used in the product. This behavior shouldn't have any negative impact on your app; however, if you haven’t used the `attribute/list` action explicitly based on all attributes loaded by default (up to 1.6), this may cause problems. You can switch off the dynamic loader by setting the `config.entities.product.useDynamicAttributeLoader=false`. Details: [#2137](https://github.com/vuestorefront/vue-storefront/pull/2137/files) Dynamic Categories prefetching (#2076). Starting with Vue Storefront 1.7, we added a configuration option `config.entities.category.categoriesDynamicPrefetch` (by default set to `true`). TThis 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. -**NOTE:** Since we're no longer generating `category.slug` client-side, we need to have `category.url_key` field unique. If Your Magento2 url_keys are unique it will work without any changes. If not - please do use [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) to re-import the categories. There is a new `categories` importer option `--generateUniqueUrlKeys` which is set to true by default. +**NOTE:** Since we're no longer generating `category.slug` client-side, we need to have `category.url_key` field unique. If Your Magento2 url_keys are unique it will work without any changes. If not - please do use [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) to re-import the categories. There is a new `categories` importer option `--generateUniqueUrlKeys` which is set to true by default. -With the new modules architecture available from 1.6 we've [updated the payment modules guide](https://github.com/DivanteLtd/vue-storefront/pull/2135). If You've used the custom payment (and basically any other) extensions please make sure You've already ported them to [new modules architecture](https://docs.vuestorefront.io/guide/modules/introduction.html). +With the new modules architecture available from 1.6 we've [updated the payment modules guide](https://github.com/vuestorefront/vue-storefront/pull/2135). If You've used the custom payment (and basically any other) extensions please make sure You've already ported them to [new modules architecture](/guide/modules/introduction.html). ## 1.5 -> 1.6 @@ -261,7 +261,7 @@ Due to architectural changes, `core/components` and `core/store/modules` folders Overall, the theme upgrade for the default theme requires 105 files to be changed, but 85% of these changes are just a new import paths for the core component, which makes this update time-consuming, but easy to follow and not risky. -[Here](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f) you can find detailed information (as an upgrade commit with notes) about what needs to be changed in the theme to support VS 1.6. +[Here](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f) you can find detailed information (as an upgrade commit with notes) about what needs to be changed in the theme to support VS 1.6. #### Global changes - Notifications are now based on Vuex Store instead of Event Bus. We also pulled hardcoded notifications from core to theme. @@ -286,7 +286,7 @@ and make sure you are importing `rootStore`. - Lazy loading for non-SSR routes is now available. -You can now [use dynamic imports to lazy load non-SSR routes](https://router.vuejs.org/guide/advanced/lazy-loading.html). You can find examples from the default theme [here](https://github.com/DivanteLtd/vue-storefront/tree/develop/src/themes/default/router) +You can now [use dynamic imports to lazy load non-SSR routes](https://router.vuejs.org/guide/advanced/lazy-loading.html). You can find examples from the default theme [here](https://github.com/vuestorefront/vue-storefront/tree/develop/src/themes/default/router) - Extensions are now rewritten to modules (and the extensions system will be depreciated in 1.7). @@ -300,84 +300,84 @@ Change all `@vue-storefront/core/plugins/event-bus` imports to `@vue-storefront/ Required action: Change the import path. In case of additional changes click on a component name to see how to update. -- [`AddToCart.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-16a4dd1cbf1aaf74e001e6541fb27725) -- [`Breadcrumbs.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-fa33732560b7c39ea7854f701c4187bf) -- [`ColorSelector.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-551ae89c6d9e297a662749ee02676d45) -- [`GenericSelector.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-cbd08cdda068c587e3146bb3441e2161) -- [`NewsletterPopup.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7b6cae3e664a647ff7397d6692e61cd6) -- [`Notification.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d91127b094ff36e25dd94834c3aded6a) + `exec` changed to `execAction`, added `execAction` -- [`Overlay.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-66a3ae90ace32b95ebe4513c496f76ce) -- [`PriceSelector.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-f564bd3cf6c2687c23c442d1363fe97b) -- [`ProductAttribute.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-b9783243d8666d5b2e46df608e6ace48) -- [`ProductCustomOptions.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-14db476c8821b640e674f1e655340de5) -- [`ProductGallery.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-66a4dfcf61217934307df12e9e3f14c6) -- [`SizeSelector.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a83c265a63b7b594b5052ec61907cde1) -- [`SortBy.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5dab270f8342facd10835e828e5d7509) + change from dropdown to select -- [`ValidationError.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e80a538151f16af10b20efa810ae0bc3) -- [`Login.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-3ac818c5cd6c41a9c9d7a3acba41cdb5) -- [`Category/Sidebar.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-88e78ea0dd0f96c15c4a00d29922e44c) + added possibility to clear all filters -- [`CartSummary.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bacd489920bede6d60bc9ce0b165e517) -- [`OrderReview.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-958fa5f4d0d271422146a86119bde82d) + notifications moved from core to theme -- [`Payment.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-878b5e4180d8f997d0b57a7dc5d28154) -- [`PersonalDetails.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d8651354142bff547c667cdab2e87a9f) -- [`Checkout/Product.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a08ecdd137cc1b32d02d458e3ae22079) -- [`Shipping.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a83c265a63b7b594b5052ec61907cde1) -- [`AccountIcon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-b25a4326cbb2102f3293084aefe6d4c8) -- [`CompareIcon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4180179a247fd8ebb816f4d8e94e6c5b) -- [`HamburgerIcon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-39d690ab85a291546f5ebe1606250fb5) -- [`MicrocartIcon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-ddcf89d0ca46b06824190f07c87f6031) -- [`Returnicon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-68dfc0097a84464e2f8196d0948b4a03) -- [`WishlistIcon.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-fabd1714a4872a2bcf26619adbe0709c) -- [`Microcart.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-ffba5dcba1456c20f565e314790cd450) -- [`Microcart/Product.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5715f58dacfe621ce8d056e382f1be8b) -- [`MyNewsletter.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-48b9d7ff2e2e8e6cf6965fd582e51957) -- [`MyOrder.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a8dbaeacd2cf4fb6440959d7827372fa) -- [`MyOrders.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4d60c889f1362249fc19756d60f8f9b1) -- [`MyProfile.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-677b7e3129afc1c974c3bd08069662c7) -- [`MyShippingDetails.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5ed705e03a497368b98d9ce41ec378de) -- [`Related.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c1703e08c80fcacd8135eeb6d707aa95) + `refreshList` method changed -- [`SearchPanel.gql.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-2020399a5c1abfc37c176bfcc5912293) -- [`SearchPanel.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e2ff52db282530838ffce57893ed4a77) -- [`SidebarMenu.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c341122656ef878fc532a5c34348a1ec) + bugfix (hide longer menus that are below currently active one), direct router link instead of event -- [`Wishlist/Product.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7c0514d730223832fd2e1fae9d5f2068) -- [`Wishlist.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-8dc4f61d36ae2b2ffc2a4c4603e844b8) -- [`Collection.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-26a650b112a3b01efd1ff3a5c752aba1) -- [`Home.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-91bc0c9fe9fa95dd88900beff8975200) +- [`AddToCart.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-16a4dd1cbf1aaf74e001e6541fb27725) +- [`Breadcrumbs.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-fa33732560b7c39ea7854f701c4187bf) +- [`ColorSelector.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-551ae89c6d9e297a662749ee02676d45) +- [`GenericSelector.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-cbd08cdda068c587e3146bb3441e2161) +- [`NewsletterPopup.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7b6cae3e664a647ff7397d6692e61cd6) +- [`Notification.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d91127b094ff36e25dd94834c3aded6a) + `exec` changed to `execAction`, added `execAction` +- [`Overlay.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-66a3ae90ace32b95ebe4513c496f76ce) +- [`PriceSelector.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-f564bd3cf6c2687c23c442d1363fe97b) +- [`ProductAttribute.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-b9783243d8666d5b2e46df608e6ace48) +- [`ProductCustomOptions.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-14db476c8821b640e674f1e655340de5) +- [`ProductGallery.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-66a4dfcf61217934307df12e9e3f14c6) +- [`SizeSelector.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a83c265a63b7b594b5052ec61907cde1) +- [`SortBy.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5dab270f8342facd10835e828e5d7509) + change from dropdown to select +- [`ValidationError.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e80a538151f16af10b20efa810ae0bc3) +- [`Login.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-3ac818c5cd6c41a9c9d7a3acba41cdb5) +- [`Category/Sidebar.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-88e78ea0dd0f96c15c4a00d29922e44c) + added possibility to clear all filters +- [`CartSummary.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bacd489920bede6d60bc9ce0b165e517) +- [`OrderReview.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-958fa5f4d0d271422146a86119bde82d) + notifications moved from core to theme +- [`Payment.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-878b5e4180d8f997d0b57a7dc5d28154) +- [`PersonalDetails.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d8651354142bff547c667cdab2e87a9f) +- [`Checkout/Product.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a08ecdd137cc1b32d02d458e3ae22079) +- [`Shipping.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a83c265a63b7b594b5052ec61907cde1) +- [`AccountIcon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-b25a4326cbb2102f3293084aefe6d4c8) +- [`CompareIcon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4180179a247fd8ebb816f4d8e94e6c5b) +- [`HamburgerIcon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-39d690ab85a291546f5ebe1606250fb5) +- [`MicrocartIcon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-ddcf89d0ca46b06824190f07c87f6031) +- [`Returnicon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-68dfc0097a84464e2f8196d0948b4a03) +- [`WishlistIcon.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-fabd1714a4872a2bcf26619adbe0709c) +- [`Microcart.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-ffba5dcba1456c20f565e314790cd450) +- [`Microcart/Product.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5715f58dacfe621ce8d056e382f1be8b) +- [`MyNewsletter.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-48b9d7ff2e2e8e6cf6965fd582e51957) +- [`MyOrder.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a8dbaeacd2cf4fb6440959d7827372fa) +- [`MyOrders.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4d60c889f1362249fc19756d60f8f9b1) +- [`MyProfile.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-677b7e3129afc1c974c3bd08069662c7) +- [`MyShippingDetails.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5ed705e03a497368b98d9ce41ec378de) +- [`Related.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c1703e08c80fcacd8135eeb6d707aa95) + `refreshList` method changed +- [`SearchPanel.gql.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-2020399a5c1abfc37c176bfcc5912293) +- [`SearchPanel.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e2ff52db282530838ffce57893ed4a77) +- [`SidebarMenu.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c341122656ef878fc532a5c34348a1ec) + bugfix (hide longer menus that are below currently active one), direct router link instead of event +- [`Wishlist/Product.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7c0514d730223832fd2e1fae9d5f2068) +- [`Wishlist.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-8dc4f61d36ae2b2ffc2a4c4603e844b8) +- [`Collection.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-26a650b112a3b01efd1ff3a5c752aba1) +- [`Home.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-91bc0c9fe9fa95dd88900beff8975200) #### Components that were moved from core to theme Required action: Add moved content and remove core import. In case of additional changes, click on a component name to see how to update. -- [`Loader.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a2791ef5c57fb2459362720b4a624e53) -- [`Modal.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-527c2bb9d04213a2aaf1aac75673bc71) + static content removed -- [`ProductLinks.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-9ccb222e8d3decebb067729ee935899a) -- [`ProductListing.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-000bc323621dca4883033c0e91f9125a) -- [`ProductTile.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4049e5b38efd1a5d0215fd71e32136a3) + core import moved to module -- [`ProductSlider.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-624e75f15bdb9b2f7d5f417138c9f0ec) -- [`ForgotPass.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e2fbfb707a274bea8b9f7af3e3c57032) -- [`Register.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-f5266afaec9d55f2fc93cf3b874b7288) + core import moved to module -- [`SignUp.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-df0c798d67a63c4eef4d3141393db5f9) -- [`BaseCheckbox.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-23e3b8989b402a011ee4cb3f985fa3ce) -- [`BaseInput.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d209385c453bdf31b89bc51772bd2bda) -- [`BaseRadioButton.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-1493dcb05a06ce313807003d1774fa14) -- [`BaseSelect.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c4c37e440fd8ec3deeacef085b48ed9f) -- [`BaseTextArea.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-0ea48ec8c1545db8cbdacfd348f8bf75) -- [`Header.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5f4560c69df1a5f6d97f0b064b9b792f) -- [`MainSlider.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-19c964e13db826a1358f30839627986b) -- [`Reviews.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d8861516b2c7dfc547b91e1066ca4755) + empty array instead of null, core import path changed -- [`Compare.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-0aa476fa2f0314806d4afd620c80be54) +- [`Loader.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a2791ef5c57fb2459362720b4a624e53) +- [`Modal.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-527c2bb9d04213a2aaf1aac75673bc71) + static content removed +- [`ProductLinks.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-9ccb222e8d3decebb067729ee935899a) +- [`ProductListing.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-000bc323621dca4883033c0e91f9125a) +- [`ProductTile.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-4049e5b38efd1a5d0215fd71e32136a3) + core import moved to module +- [`ProductSlider.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-624e75f15bdb9b2f7d5f417138c9f0ec) +- [`ForgotPass.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-e2fbfb707a274bea8b9f7af3e3c57032) +- [`Register.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-f5266afaec9d55f2fc93cf3b874b7288) + core import moved to module +- [`SignUp.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-df0c798d67a63c4eef4d3141393db5f9) +- [`BaseCheckbox.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-23e3b8989b402a011ee4cb3f985fa3ce) +- [`BaseInput.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d209385c453bdf31b89bc51772bd2bda) +- [`BaseRadioButton.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-1493dcb05a06ce313807003d1774fa14) +- [`BaseSelect.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c4c37e440fd8ec3deeacef085b48ed9f) +- [`BaseTextArea.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-0ea48ec8c1545db8cbdacfd348f8bf75) +- [`Header.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-5f4560c69df1a5f6d97f0b064b9b792f) +- [`MainSlider.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-19c964e13db826a1358f30839627986b) +- [`Reviews.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-d8861516b2c7dfc547b91e1066ca4755) + empty array instead of null, core import path changed +- [`Compare.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-0aa476fa2f0314806d4afd620c80be54) #### Other -- [`ProductBundleOption.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-32809917812e7c8c4571be70a693d65b) - splitted single option from `ProductBundleOptions.vue` component. -- [`ProductBundleOptions.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7ccee94c636406b1a82feddea3a7f520) - single option moved to separate component `ProductBundleOption.vue`, moved to module. -- [`ThankYouPage.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-84c29c5b22568c31b021dc864221563f) added order id display, order confirmation, pulled notifications from core and added mail confirmation -- [`main.scss`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c65e47159738f3552a22f16ec5c5974f) removed duplicated flexbox grid -- [`index.template.html`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bf0804a2329350f8e9d9071e40cf1429) (+ all other templates that you may have like minimal, basic etc), added ` output.appendHead(), renderStyles()` -- [`Category.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-eb709969add1ca4a266ac072cddde954) notifications moved to theme -- [`Checkout.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-1c6544c28d075f275812201fa42755de) notifications moved to theme -- [`MyAccount.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bb873f532ed9a2efbb157af79a70e0f7) notifications moved to theme -- [`Product.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-174db65df8e0c43df20b73b5bf16881b) minor changes in attribute var names that may influence the markup, notifications moved to theme -- [`Static.vue`](https://github.com/DivanteLtd/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a3a9b6eeeba4c915c1ea1aae1c489ecc) static pages are no longed using markdown files. +- [`ProductBundleOption.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-32809917812e7c8c4571be70a693d65b) - splitted single option from `ProductBundleOptions.vue` component. +- [`ProductBundleOptions.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-7ccee94c636406b1a82feddea3a7f520) - single option moved to separate component `ProductBundleOption.vue`, moved to module. +- [`ThankYouPage.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-84c29c5b22568c31b021dc864221563f) added order id display, order confirmation, pulled notifications from core and added mail confirmation +- [`main.scss`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-c65e47159738f3552a22f16ec5c5974f) removed duplicated flexbox grid +- [`index.template.html`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bf0804a2329350f8e9d9071e40cf1429) (+ all other templates that you may have like minimal, basic etc), added ` output.appendHead(), renderStyles()` +- [`Category.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-eb709969add1ca4a266ac072cddde954) notifications moved to theme +- [`Checkout.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-1c6544c28d075f275812201fa42755de) notifications moved to theme +- [`MyAccount.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-bb873f532ed9a2efbb157af79a70e0f7) notifications moved to theme +- [`Product.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-174db65df8e0c43df20b73b5bf16881b) minor changes in attribute var names that may influence the markup, notifications moved to theme +- [`Static.vue`](https://github.com/vuestorefront/vue-storefront/commit/cc17b5bfa43a9510815aea14dce8bafac382bc7f#diff-a3a9b6eeeba4c915c1ea1aae1c489ecc) static pages are no longed using markdown files. ## 1.4 -> 1.5 @@ -405,22 +405,22 @@ We added GraphQL support. Please read more on the [GraphQL Action Plan](/guide/b #### SSR: Advanced output and cache -This change does not involve any required actions to port the code, but please be aware that we're supporting [SSR Cache](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/SSR%20Cache.md) + [dynamic layout changes](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/Layouts%20and%20advanced%20output%20operations.md) etc. If you're using the modified version of the theme, you can hardly use these without updating `themes/YourTheme/App.vue` to the new format (check the default theme for details). +This change does not involve any required actions to port the code, but please be aware that we're supporting [SSR Cache](https://github.com/vuestorefront/vue-storefront/blob/develop/doc/SSR%20Cache.md) + [dynamic layout changes](https://github.com/vuestorefront/vue-storefront/blob/develop/doc/Layouts%20and%20advanced%20output%20operations.md) etc. If you're using the modified version of the theme, you can hardly use these without updating `themes/YourTheme/App.vue` to the new format (check the default theme for details). #### Reviews -We added Reviews support, however, Magento 2 is still lacking Reviews support in the REST API. To have reviews up and running, please add the https://github.com/DivanteLtd/magento2-review-api to your Magento 2 instance. +We added Reviews support, however, Magento 2 is still lacking Reviews support in the REST API. To have reviews up and running, please add the https://github.com/vuestorefront/magento2-review-api to your Magento 2 instance. #### Microcart 1. We moved core functionalities of coupon codes to API modules: - - **Coupon** computed value is now **appliedCoupon** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) - - **removeCoupon** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) - - **applyCoupon** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) - - **totals** -> **cartTotals** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) - - **shipping** -> **cartShipping** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) - - **payment** -> **cartPayment** ([read more](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **Coupon** computed value is now **appliedCoupon** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **removeCoupon** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **applyCoupon** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **totals** -> **cartTotals** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **shipping** -> **cartShipping** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) + - **payment** -> **cartPayment** ([read more](https://github.com/vuestorefront/vue-storefront/blob/master/doc/api-modules/cart.md)) 2. We moved/renamed methods responsible for UI to the default theme: - **addDiscountCoupon** - toggle coupon form @@ -450,8 +450,8 @@ We added Reviews support, however, Magento 2 is still lacking Reviews support in ### Changes -1. We removed event emit from client-entry.js with online status information. Instead, we are now using [vue-offline](https://github.com/filrak/vue-offline) mixin. [#1494](https://github.com/DivanteLtd/vue-storefront/issues/1494) -2. We removed the isOnline variable from Microcart.js. Instead, we are now using variables from [vue-offline](https://github.com/filrak/vue-offline) mixin. [#1494](https://github.com/DivanteLtd/vue-storefront/issues/1494) +1. We removed event emit from client-entry.js with online status information. Instead, we are now using [vue-offline](https://github.com/filrak/vue-offline) mixin. [#1494](https://github.com/vuestorefront/vue-storefront/issues/1494) +2. We removed the isOnline variable from Microcart.js. Instead, we are now using variables from [vue-offline](https://github.com/filrak/vue-offline) mixin. [#1494](https://github.com/vuestorefront/vue-storefront/issues/1494) ### Upgrade step-by-step @@ -467,21 +467,21 @@ Import of CmsData must be changed in `CustomCmsPage.vue` component to: `import CmsData from '@vue-storefront/extension-magento2-cms/components/CmsData'` -## 1.1 -> 1.2 ([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.2.0)) +## 1.1 -> 1.2 ([release notes](https://github.com/vuestorefront/vue-storefront/releases/tag/v1.2.0)) There were no breaking-changes introduced. No special treatment needed 😃 -## 1.0 -> 1.1 ([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.1.0)) +## 1.0 -> 1.1 ([release notes](https://github.com/vuestorefront/vue-storefront/releases/tag/v1.1.0)) ### Modifications #### Plugins registration simplified -Instead of exporting an object in `{theme}/plugins/index.js` just use `Vue.use(pugin)` directly in this file ( [docs](https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Working%20with%20plugins.md) ) +Instead of exporting an object in `{theme}/plugins/index.js` just use `Vue.use(pugin)` directly in this file ( [docs](https://github.com/vuestorefront/vue-storefront/blob/master/doc/Working%20with%20plugins.md) ) #### Microcart logic moved to API module (partially) -Starting from Microcart, we are moving most of the logic to core modules along with unit testing them. [Read more](https://github.com/DivanteLtd/vue-storefront/issues/1213). +Starting from Microcart, we are moving most of the logic to core modules along with unit testing them. [Read more](https://github.com/vuestorefront/vue-storefront/issues/1213). Changes that happened in `Microcart.js` core component and `Microcart.vue` component from default theme: @@ -499,23 +499,23 @@ Now it mirrors `core/` folder structure, which is desired behaviour. ### vue-storefront-api docker support has been extended -We added the possibility to run the `vue-storefront-api` fully in Docker (previously, just the Elastic and Redis images were present in the `docker-compose.yml`. Please read the [README.md](https://github.com/DivanteLtd/vue-storefront-api) for more details. +We added the possibility to run the `vue-storefront-api` fully in Docker (previously, just the Elastic and Redis images were present in the `docker-compose.yml`. Please read the [README.md](https://github.com/vuestorefront/vue-storefront-api) for more details. **PLEASE NOTE:** We changed the structure of the `elasticsearch` section of the config files, moving `esIndexes` to `elasticsearch.indices` etc. There is an automatic migration that will update your config files automatically by running: `yarn migrate` in the `vue-storefront-api` folder. ### Default storage of the shopping carts and user data moved to localStorage -Currently, there is a config option to set up the default local storage configs: https://github.com/DivanteLtd/vue-storefront/blob/271a33fc6e712b978e10b91447b05529b6d04801/config/default.json#L148. If you like the previous behavior of storing the carts in the indexedDb, please change the config backend to `INDEXEDDB`. +Currently, there is a config option to set up the default local storage configs: https://github.com/vuestorefront/vue-storefront/blob/271a33fc6e712b978e10b91447b05529b6d04801/config/default.json#L148. If you like the previous behavior of storing the carts in the indexedDb, please change the config backend to `INDEXEDDB`. ### mage2vuestorefront improvements -A lot of improvements have been added to the [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) importer. importer. For example, fixed special_price sync. For such changes, please update [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront) and re-import your products. We also added the dynamic on/demand indexing. +A lot of improvements have been added to the [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) importer. importer. For example, fixed special_price sync. For such changes, please update [mage2vuestorefront](https://github.com/vuestorefront/mage2vuestorefront) and re-import your products. We also added the dynamic on/demand indexing. ### New features We added [`vue-progressbar`](https://github.com/hilongjw/vue-progressbar) to default theme, which can be found in `App.vue` file. -## 1.0RC-3 -> 1.0([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.0.0)) +## 1.0RC-3 -> 1.0([release notes](https://github.com/vuestorefront/vue-storefront/releases/tag/v1.0.0)) This is the official, stable release of Vue Storefront. @@ -549,7 +549,7 @@ export default { 4. We've added Multistore support. It shouldn't imply any breaking changes to the existing themes / extensions (by default it's just disabled). -## 1.0RC-2 -> 1.0RC-3 ([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.0.0-rc.3)) +## 1.0RC-2 -> 1.0RC-3 ([release notes](https://github.com/vuestorefront/vue-storefront/releases/tag/v1.0.0-rc.3)) This release contains three important refactoring efforts: @@ -611,13 +611,13 @@ If `optimize` is set to false, it's a fallback to the previous behaviour (gettin 7.Product and Category pages got refactored. It's a massive refactoring moving all the logic to the Vuex stores, so if you played with the core `fetchData`/`loadData` functions, your code may be affected by this change. -## 1.0RC -> 1.0RC-2 ([release notes](https://github.com/DivanteLtd/vue-storefront/releases/tag/v1.0.0-rc.2)) +## 1.0RC -> 1.0RC-2 ([release notes](https://github.com/vuestorefront/vue-storefront/releases/tag/v1.0.0-rc.2)) This release brings some cool new features (Magento 1.x support, Magento 2 external checkout, My Orders, Discount Codes) together with some minor refactors. Unfortunately, with the refactors comes two manual changes that need to be applied to your custom themes after the update. -Here You can check an **[example how did we migrated our own default_m1 theme to RC-2](https://github.com/DivanteLtd/vue-storefront/commit/111519c04acec272657e7eefec7ea8405da95f13)**. +Here You can check an **[example how did we migrated our own default_m1 theme to RC-2](https://github.com/vuestorefront/vue-storefront/commit/111519c04acec272657e7eefec7ea8405da95f13)**. 1. We changed `ColorButton`, `SizeButton`, `PriceButton` in the `core` to `ColorSelector`, `SizeSelector`, `PriceSelector` and added the `GenericSelector` for all other attribute types. Because of this change, the `coreComponent('ColorButton')` must be changed to `coreComponent('ColorSelector')` etc. diff --git a/docs/guide/vuex/attribute-store.md b/docs/guide/vuex/attribute-store.md index 7d15e04742..a1f4523a1a 100644 --- a/docs/guide/vuex/attribute-store.md +++ b/docs/guide/vuex/attribute-store.md @@ -23,7 +23,7 @@ this.$store.dispatch('attribute/list', { }); ``` -This is an example from [product compare feature](https://github.com/DivanteLtd/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). +This is an example from [product compare feature](https://github.com/vuestorefront/vue-storefront/blob/c954b96f6633a201e10bed1d2e4c0def1aeb3071/core/pages/Compare.vue). The attribute state data: diff --git a/docs/guide/vuex/category-store.md b/docs/guide/vuex/category-store.md index 438b70e564..74a35f02c1 100644 --- a/docs/guide/vuex/category-store.md +++ b/docs/guide/vuex/category-store.md @@ -16,7 +16,7 @@ const state = { }; ``` -The category state is generally populated by just two methods- [list](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) - and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) +The category state is generally populated by just two methods- [list](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L38) and [single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) - and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L28) :::tip Note The action `category/single` uses `localForage` cache only—no Elasticsearch data store directly. Because of this optimization, download the categories list by dispatching the `category/list` at first. @@ -24,7 +24,7 @@ The action `category/single` uses `localForage` cache only—no Elasticsearch da The category state data: -- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) - `current` - This is the current category object. - `filters` is a current state of the category filters, a dictionary of selected variant attributes; for example it contains dictionary of selected product attributes: @@ -43,7 +43,7 @@ Please note, we're using the Magento-like EAV attributes structure so the values The following events are published from `category` store: -- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/DivanteLtd/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded. +- `EventBus.$emit('category-after-single', { category: mainCategory })` - from [category/single](https://github.com/vuestorefront/vue-storefront/blob/06fbb89a5a8bc2c607847f65a7bca9ad54ed7146/core/store/modules/category.js#L70) after single category is loaded. - `EventBus.$emit('category-after-current', { category: category })` - After current category has been changed - this is subsequent call of `category/single` action. - `EventBus.$emit('category-after-reset', { })` - After the category has been reset (for example, in the process of moving from one category page to another). - `EventBus.$emit('category-after-list', { query: qrObj, sort: sort, size: size, start: start, list: resp })` - This event emits the current category list as it's returned by `category/list`. diff --git a/docs/guide/vuex/introduction.md b/docs/guide/vuex/introduction.md index 0e6d4110fb..db5399966a 100644 --- a/docs/guide/vuex/introduction.md +++ b/docs/guide/vuex/introduction.md @@ -1,7 +1,7 @@ # Introduction All data processing and remote requests should be managed by Vuex data stores. The core modules generally contain `store` folder inside. -You can modify the existing store actions by responding to events. Events are specified in the docs below and can be found in the [core module](https://github.com/DivanteLtd/vue-storefront/tree/master/core), where `EventBus.$emit` has been mostly used for Vuex Actions. +You can modify the existing store actions by responding to events. Events are specified in the docs below and can be found in the [core module](https://github.com/vuestorefront/vue-storefront/tree/master/core), where `EventBus.$emit` has been mostly used for Vuex Actions. **You should put all the REST calls, Elasticsearch data queries inside the Vuex Actions.** This is our default design pattern for managing the data. @@ -20,7 +20,7 @@ Before you start working with Vuex, it's recommended to get familiar with our [v - [Sync](sync-store.md) - [User](User%20Store.md) - [Attribute](attribute-store.md) -- [UI Store]() +- [UI Store]() ## Override existing core modules diff --git a/docs/guide/vuex/product-store.md b/docs/guide/vuex/product-store.md index f6e0ec7b20..7c3e9b44a7 100644 --- a/docs/guide/vuex/product-store.md +++ b/docs/guide/vuex/product-store.md @@ -19,13 +19,13 @@ const state = { }; ``` -The product state is generally populated by just two methods - [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) - and cleared to the defaults by [reset](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215). +The product state is generally populated by just two methods - [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) and [single](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L428) - and cleared to the defaults by [reset](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L215). The product state data: -- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/DivanteLtd/vue-storefront/blob/master/core/components/Breadcrumbs.js) -- `current` - This is the product object with selected `configurable_children` variant, so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203). This is the product which is added to the cart after "Add to cart" -- `current_options` - The list used to populate the variant selector on the [Product.vue page](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56). It contains dictionary of attributes and possible attribute values and labels, and it's populated by [setupVariants](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property. +- `breadcrumbs` - This is the list of routes used by the [Breadcrumbs component](https://github.com/vuestorefront/vue-storefront/blob/master/core/components/Breadcrumbs.js) +- `current` - This is the product object with selected `configurable_children` variant, so it's the base product with attributes overridden by the values from selected `configurable_children` variant; it's used on [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/pages/Product.vue#L203). This is the product which is added to the cart after "Add to cart" +- `current_options` - The list used to populate the variant selector on the [Product.vue page](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/themes/default/pages/Product.vue#L56). It contains dictionary of attributes and possible attribute values and labels, and it's populated by [setupVariants](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L344) based on the `configurable_children` property. - `current_configuration` The current product configuration. A dictionary of selected variant attributes; for example, it contains a dictionary of selected product attributes: ```json @@ -37,16 +37,16 @@ The product state data: Please note, we're using the Magento-like EAV attributes structure so the values here are attribute value indexes, not the values itself. Please take a look at [Data formats](../data/elasticsearch.md) for a reference. -- `parent` - If the current product is a `type_id="single"`, then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) -- `list` - This is an array of products loaded by [list](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) +- `parent` - If the current product is a `type_id="single"`, then in this variable the parent, `configurable` product is stored. This data is populated only on `Product.vue` by [checkConfigurableParent](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L323) +- `list` - This is an array of products loaded by [list](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L395) - `original` - Used only for `configurable` products, this is the base product with no selected variant. -- `related` - This is dictionary of related products; set outside this store (for [example here](https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) +- `related` - This is dictionary of related products; set outside this store (for [example here](https://github.com/vuestorefront/vue-storefront/blob/master/src/themes/default/components/core/blocks/Product/Related.vue)) by calling and [related action](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L528) ## Events The following events are published from `product` store: -- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/DivanteLtd/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento. +- `EventBus.$emit('product-after-priceupdate', product)` - from [syncProductPrice](https://github.com/vuestorefront/vue-storefront/blob/bd559f1baad7cd392bc5bae7b935a60484e2e6e5/src/store/modules/product.js#L33) after product price is synced with Magento. - `EventBus.$emit('product-after-configure', { product: product, configuration: configuration, selectedVariant: selectedVariant })` from `configureProductAsync` (called by `product/configure` action after `product/single`). This event provides the information about selected product variant on the product page. - `EventBus.$emit('product-after-list', { query: query, start: start, size: size, sort: sort, entityType: entityType, result: resp })` - this event emits the current product list as it's returned by `product/list`providing the current filters, etc. You can mark the specific product list identifier by setting the `meta` property; it's important because on a single page, this event can be executed multiple time for each individual block of products. - `EventBus.$emit('product-after-single', { key: key, options: options, product: cachedProduct })` - After single product has been loaded (invoked by `product/single` action). @@ -71,7 +71,7 @@ This method is called as a subsequent call of `Product.vue:fetchData` or `produc ### `checkConfigurableParent (context, {product})` -This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so, the redirect is being made to the parent product. It's a fix for [#508](https://github.com/DivanteLtd/vue-storefront/issues/508) +This method is called by `Product.vue:fetchData` to check if current, simple product has got an configurable parent. If so, the redirect is being made to the parent product. It's a fix for [#508](https://github.com/vuestorefront/vue-storefront/issues/508) ### `setupVariants (context, { product })`