Skip to content
This repository was archived by the owner on Jan 26, 2024. It is now read-only.

Commit 9b92958

Browse files
authored
Merge pull request #2739 from Jensderond/patch-5
[UPDATED] Documentation: Correct spelling #2737
2 parents 159357f + 1d7cf90 commit 9b92958

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

docs/guide/README.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Introduction to Vue Storefront
2-
Vue Storefront is rather a complex solution with a lot of possibilities. Learning all of them can take some time. In this introduction we will learn all it's crucial concepts in a few minutes which are enough enough to start playing with Vue Storefront right after reading it,
2+
Vue Storefront is rather a complex solution with a lot of possibilities. Learning all of them can take some time. In this introduction, we will learn all its crucial concepts in a few minutes which are enough to start playing with Vue Storefront right after reading it.
33

44
## What is Vue Storefront
55
Vue Storefront is a headless and backend-agnostic eCommerce Progressive Web App written in Vue.js. The fact that it's using headless architecture allows Vue Storefront to be connected with any eCommerce platform so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce etc.
@@ -10,23 +10,23 @@ Key features of Vue Storefront are:
1010
- mobile-first approach
1111
- cutting-edge tech
1212
- no limitations in theming and customization
13-
- being Open Source with MIT licence
14-
- lot of focus on developer experience
15-
- out of the box Server Side Rendering (for SEO)
13+
- being Open Source with MIT license
14+
- a lot of focus on developer experience
15+
- out of the box Server-Side Rendering (for SEO)
1616
- offline mode
1717

1818
## How it connects with backend platforms?
1919
Vue Storefront manages to be platform agnostic thanks to the [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront-api) and dedicated API connectors for eCommerce backend platforms. The data format in vue-storefront-api is always the same for any platform which means no matter which eCommerce backend you'll use your frontend remains without changes.
2020

21-
It's a great strategy for migrations since you can easly migrate from one platform to another (or it's other version like Magento 1 -> 2) without touching your frontend.
21+
It's a great strategy for migrations since you can easily migrate from one platform to another (or another version like Magento 1 -> 2) without touching your frontend.
2222

2323
![Architecture diagram](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/master/docs/.vuepress/public/GitHub-Architecture-VS.png)
2424

2525
The API connector works in two phases:
26-
- **data pump** (on the image mage2nosql) is pulling static data (catalog, orders etc) from your eCommerce platform to Vue Storefront ElasticSearch and changes it's format to the one consumed by vue-storefront-api. After pulling the data you can display product catalog in Vue Storefront. After pumping the data into ElasticSearch it will stay in sync with changes on backend platform side and update it's content.
27-
- **worker pool** is a synchronization of so called dynamic calls (user sessions, cart rules etc) that can't be stored in the database and needs to be called by vue-storefront-api directly from the backend platform.
26+
- **data pump** (on the image mage2nosql) is pulling static data (catalog, orders etc) from your eCommerce platform to Vue Storefront ElasticSearch and changes it's format to the one consumed by vue-storefront-api. After pulling the data you can display product catalog in Vue Storefront. After pumping the data into ElasticSearch it will stay in sync with changes on the backend platform side and update its content.
27+
- **worker pool** is a synchronization of so-called dynamic calls (user sessions, cart rules etc) that can't be stored in the database and needs to be called by vue-storefront-api directly from the backend platform.
2828

29-
While managing this two phases of integration Vue Storefront can work with your backend platform. 
29+
While managing these two phases of integration Vue Storefront can work with your backend platform. 
3030

3131
Some of the backend platforms already have their integrations (Magento 2, Magento 1, CoreShop, BigCommerce, WooCommerce) but you can easily make your own with [integration boilerplate](https://github.com/DivanteLtd/bigcommerce2vuestorefront
3232
).
@@ -52,34 +52,34 @@ When you want to play with Vue Storefront there are 3 options:
5252
- you can set up frontend with your own `vue-storefront-api` and database dumped from demo
5353
- you can set up frontend with `vue-storefront-api` connected to your eCommerce backend
5454

55-
To do any of this simply type `yarn installer` in the root of the project and answer the questions in the console. Once the installation is done type yarn dev to run your project (by default of port 3000). No matter what option you choose you can change the settings in config file later.
55+
To do any of this simply type `yarn installer` in the root of the project and answer the questions in the console. Once the installation is done type yarn dev to run your project (by default of port 3000). No matter what option you choose you can change the settings in the config file later.
5656

57-
## Vue Storefront config file
58-
Most of the Vue Storefront configuration (like active theme, backend API addresses, multistore setup etc) is done through it's config file that can be found under `config` folder. The `default.json` file contains all the default setup. 
57+
## Vue Storefront config file
58+
Most of the Vue Storefront configuration (like the active theme, backend API addresses, multistore setup etc) is done through its config file that can be found under `config` folder. The `default.json` file contains all the default setup. 
5959

60-
For your own implementation you should create a `local.json` file in the same directry and include fields from `default.json` that you want to override. This two files will be merged in favour of `local.json` during a build process. If you will use installer to set up your Vue Storefront instance it'll generate proper config files.
60+
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. This two files will be merged in favour of `local.json` during a build process. If you will use the installer to set up your Vue Storefront instance it'll generate proper config files.
6161

6262
## Building themes in Vue Storefront
6363

64-
While making themes in Vue Storefront in most cases all you need to take care of is creating your own HTML and CSS markup. All required business logic is exposed by core with it's core modules and can be easly injected into any of theme components.
64+
While making themes in Vue Storefront in most cases all you need to take care of is creating your own HTML and CSS markup. All required business logic is exposed by the core with its core modules and can be easily injected into any of the theme components.
6565
The mechanism of injecting core business logic into themes is very simple. We are using Vue.js mixins to keep upgradable business logic in the core.
6666

67-
Business logic from core component can be easly injected into any theme component as a Vue.js mixin. We can easly inject it into any of our theme components just my importing it and adding as a mixin ( eg `mixins: [Microcart]` is what you need to use core Microcart logic). This is all you need to make use of core business logic inside your theme. With this approach we can easly ship updates to all core components without breaking your shop.
67+
Business logic from core component can be easily injected into any theme component as a Vue.js mixin. We can easily inject it into any of our theme components just by importing it and adding it as a mixin ( eg `mixins: [Microcart]` is what you need to use core Microcart logic). 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.
6868

69-
The easiest way to create your own theme is to create a copy of the default one, change it's name in it's `package.json` file, change active theme in `config/local.jso`n and run `yarn` to make lerna linking (which we are using for monorepos).
69+
The easiest way to create your own theme is to create a copy of the default one, change it's name in it's `package.json` file, change active theme in `config/local.json` and run `yarn` to make lerna linking (which we are using for monorepos).
7070

71-
## Offline mode and cache
71+
## Offline mode and cache
7272

73-
Vue Storefront is still working even while user is offline.
73+
Vue Storefront is still working even while a user is offline.
7474

7575
We managed to do this by making heavy use of the browser cache. 
76-
For the static assets (only prod) we are using sw-precache plugin (config can be found in `core/build/webpack.prod.sw.config.js` ). They are cached in Service Worker and can be inspected under `Application/Cache Storage` tab of your Developer Tools.
76+
For the static assets (only prod) we are using the sw-precache plugin (config can be found in `core/build/webpack.prod.sw.config.js` ). They are cached in Service Worker and can be inspected under `Application/Cache Storage` tab of your Developer Tools.
7777

7878
:::warning
7979
Please mind that Service Worker is working only on production mode.
8080
:::
8181

82-
For the catalog and store data cache we are using IndexedDB and Local Storage. We are also prefetching products from visited categories so once you enter one all of it's products are available offline. The mechanism of offline storage is located under core/lin./storage.
82+
For the catalog and store data cache, we are using IndexedDB and Local Storage. We are also prefetching products from visited categories so once you enter one, all of it's products are available offline. The mechanism of offline storage is located under `core/store/lib/storage.ts`.
8383

84-
We are using some of cached data even while user is online to display the content instantly. This is why Vue Storefront is so fast.
84+
We are using some cached data even while the user is online to display the content instantly. This is why Vue Storefront is so fast.
8585

0 commit comments

Comments
 (0)