You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 26, 2024. It is now read-only.
Copy file name to clipboardExpand all lines: docs/guide/README.md
+20-20Lines changed: 20 additions & 20 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
# 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.
3
3
4
4
## What is Vue Storefront
5
5
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:
10
10
- mobile-first approach
11
11
- cutting-edge tech
12
12
- 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 ServerSide 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)
16
16
- offline mode
17
17
18
18
## How it connects with backend platforms?
19
19
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.
20
20
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.
-**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 socalled 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.
28
28
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.
30
30
31
31
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
32
32
).
@@ -52,34 +52,34 @@ When you want to play with Vue Storefront there are 3 options:
52
52
- you can set up frontend with your own `vue-storefront-api` and database dumped from demo
53
53
- you can set up frontend with `vue-storefront-api` connected to your eCommerce backend
54
54
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.
56
56
57
-
## Vue Storefront configfile
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 configfile
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.
59
59
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.
61
61
62
62
## Building themes in Vue Storefront
63
63
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.
65
65
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.
66
66
67
-
Business logic from core component can be easly injected into any theme component as a Vue.jsmixin. 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.jsmixin. 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.
68
68
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).
70
70
71
-
## Offline mode andcache
71
+
## Offline mode andcache
72
72
73
-
Vue Storefront is still working even while user is offline.
73
+
Vue Storefront is still working even while a user is offline.
74
74
75
75
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.
77
77
78
78
:::warning
79
79
Please mind that Service Worker is working only on production mode.
80
80
:::
81
81
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`.
83
83
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.
0 commit comments