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.
Starting with Vue Storefront 1.4.0 (currently on develop branch) we're supporting two ways of getting data from the backend:
4
+
5
+
- existing `api` mode - which is using ElasticSearch DSL as a query language,
6
+
- new `graphql` mode - which is using GraphQL queries.
7
+
8
+
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).
9
+
10
+
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 ultra cool feature especially when you're integrating Vue Storefront with custom backend application: you're able [to create your own adapter](https://github.com/DivanteLtd/vue-storefront/blob/develop/core/store/lib/search/adapter/factory.js) to customize the way data is gathered from the backend.
11
+
12
+
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.
let relatedProductsQuery =prepareRelatedQuery(key, sku);
40
+
41
+
this.$store
42
+
.dispatch('product/list', {
43
+
query: relatedProductsQuery,
44
+
size:8,
45
+
prefetchGroupProducts:false,
46
+
updateState:false,
47
+
})
48
+
.then(response=> {
49
+
if (response) {
50
+
this.$store.dispatch('product/related', {
51
+
key:this.type,
52
+
items:response.items,
53
+
});
54
+
this.$forceUpdate();
55
+
}
56
+
});
57
+
```
58
+
59
+
[More information on how to query the data](https://github.com/DivanteLtd/vue-storefront/blob/develop/doc/data/ElasticSearch%20Queries.md).
60
+
61
+
**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.
62
+
63
+
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).
64
+
65
+
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).
Copy file name to clipboardExpand all lines: docs/guide/basics/project-structure.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ Below you can find the Vue Storefront project structure with explanations and co
31
31
-`router` - Core Vue Router setup. The definition of routes happens in `{themeroot}/index.js`
32
32
-`scripts` - Core scripts like app installer, extension installer etc.
33
33
-`service-worker` - Core service worker. It's merged with `sw-precache` data from `build` and `{theme}/service-worker-ext.js`
34
-
-`store` - Core Vuex stores (related: [Working with Vuex](../data/vuex.md), [Working with data](../core-themes/data.md))
34
+
-`store` - Core Vuex stores (related: [Working with Vuex](../vuex/introduction.md), [Working with data](../core-themes/data.md))
35
35
36
36
-`src` - Main project folder containing Vue Storefront core and themes. This is your app playground so you can modify this folder.
37
37
-`extensions` - Custom extensions made for Vue Storefront like integration with MailChimp or support for Google Analytics) (see: [Working with extensions](../core-themes/extensions.md))
Copy file name to clipboardExpand all lines: docs/guide/basics/recipes.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -216,7 +216,7 @@ It's done via Database Tool schema changes. Please follow the instructions from
216
216
Unfortunately, Magento extensions are not compliant with any PWA available solution yet. So if you would like to integrate some existing extensions, the simplest way is to:
217
217
218
218
- expose the data via some Magento2 REST api endpoints;
219
-
- consume the endpoints in the VS using Vuex stores; [read more](../data/vuex.md) about Vuex in Vue Storefront;
219
+
- consume the endpoints in the VS using Vuex stores; [read more](../vuex/introduction.md) about Vuex in Vue Storefront;
220
220
- implement the UI in VS
221
221
222
222
If the extensions are not playing with the User Interface, probably they will work with VS out of the box, as we're using the standard Magento2 API calls for the integration part.
Copy file name to clipboardExpand all lines: docs/guide/basics/ssr-cache.md
+26-17Lines changed: 26 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# SSR Cache
2
2
3
-
Vue Storefront generates the Server Side rendered pages to improve the SEO results. In the latest version of Vue Storefront we've added the Output cache option (disabled by default) to improve the performance.
3
+
Vue Storefront generates the Server Side rendered pages to improve the SEO results. In the latest version of Vue Storefront we've added the Output cache option (disabled by default) to improve performance.
4
4
5
5
The output cache is set by the following `config/local.json` variables:
6
6
@@ -23,7 +23,7 @@ The output cache is set by the following `config/local.json` variables:
23
23
24
24
## Dynamic tags
25
25
26
-
The dynamic tags config uption: `useOutputCacheTaging` - if set to true, Vue Storefront is generating the special HTTP Header `X-VS-Cache-Tags`
26
+
The dynamic tags config option: `useOutputCacheTaging` - if set to `true`, Vue Storefront is generating the special HTTP Header `X-VS-Cache-Tags`
27
27
28
28
```js
29
29
res.setHeader('X-VS-Cache-Tags', cacheTags);
@@ -35,24 +35,31 @@ Cache tags are assigned regarding the products and categories which are used on
35
35
X-VS-Cache-Tags: P1852 P198 C20
36
36
```
37
37
38
-
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).
38
+
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).
39
39
40
40
## Redis
41
41
42
-
If both `useOutputCache` and `useOutputCacheTagging` options are set to `true` - Vue Storefront is using Output Cache stored in Redis (configured in the `redis` section of the config file). Cache is tagged with Dynamic tags and can be invalidated using special webhook:
42
+
If both `useOutputCache` and `useOutputCacheTagging` options are set to `true` - Vue Storefront is using Output Cache stored in Redis (configured in the `redis` section of the config file). Cache is tagged with Dynamic tags and can be invalidated using a special webhook:
43
43
44
44
Example call to clear all pages containing specific product and category:
We strongly recommend You to NOT USE Output cache in the development mode. By using it You won't be able to refresh the UI changes after modyfing the Vue components etc.
We strongly recommend you NOT TO USE Output cache in the development mode. By using it you won't be able to refresh the UI changes after modifying the Vue components etc.
58
+
:::
52
59
53
60
## CLI cache clear
54
61
55
-
You can manualy clear Redis cache for specific tags by running the following command:
62
+
You can manually clear Redis cache for specific tags by running the following command:
56
63
57
64
```bash
58
65
npm run cache clear
@@ -63,25 +70,27 @@ npm run cache clear -- --tag=*
63
70
64
71
Available tag keys are set in the `config.server.availableCacheTags` (by default: `"product", "category", "home", "checkout", "page-not-found", "compare", "my-account", "P", "C"`)
65
72
66
-
**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront)do support output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on specific page). Mage2vuestorefront can invalidate cache of product and category pages if You set the following ENV variables:
73
+
**Dynamic cache invalidation:** Recent version of [mage2vuestorefront](https://github.com/DivanteLtd/mage2vuestorefront)supports output cache invalidation. Output cache is being tagged with the product and categories id (products and categories used on specific page). Mage2vuestorefront can invalidate cache of a product and category pages if you set the following ENV variables:
**SECURITY NOTE:** Please note that `key=SECRETKEY` should be equal to `vue-storefront/config/local.json` value of `server.invalidateCacheKey`
80
+
:::warning Security note
81
+
Please note that `key=SECRETKEY` should be equal to `vue-storefront/config/local.json` value of `server.invalidateCacheKey`
82
+
:::
74
83
75
84
## Adding new types / cache tags
76
85
77
-
If You're adding new type of page (`core/pages`) and `config.server.useOutputCache=true` - You should also extend the `config.server.availableCacheTags` of new general purpose tag that will be connected with the URLs connected with this new page.
86
+
If you're adding a new type of page (`core/pages`) and `config.server.useOutputCache=true`, you should also extend the `config.server.availableCacheTags` of new general purpose tag that will be connected with the URLs connected with this new page.
78
87
79
-
After doing so, please add the `asyncData` method to Your page code assigning the right tag (please take a look at `core/pages/Home.js` for instance):
88
+
After doing so, please add the `asyncData` method to your page code assigning the right tag (please take a look at `core/pages/Home.js` for instance):
80
89
81
90
```js
82
-
asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
91
+
asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data
-`pagination` - an object that defines two settings:
10
+
-`perPage` of product items to load per page, currently set to 50
11
+
-`offset` that probably defines which page has been last loaded, currently set to 0 and isn't changed anywhere.
12
+
-`enabled` - enables/disables paging. When it's disabled it lazy-loads other products on scroll
13
+
-`filters.available`, `filters.chosen` - a set of filters that user has defined on Category page - there we have available filters and chosen filter values
14
+
-`products` - computed property that returns a list of product items of current category from the Vuex store.
15
+
-`isCategoryEmpty` - computed property that returns `true` if product list of current category is empty.
16
+
-`category` - computed property that returns current category from the Vuex store.
17
+
-`categoryName` - category name.
18
+
-`categoryId` - category ID.
19
+
-`breadcrumbs` - breadcrumbs for the current category from the Vuex store.
20
+
-`productsCounter` - how many products are in the category.
21
+
-`lazyLoadProductsOnscroll` - allows lazy-loading more products on scroll, by default it's true
22
+
23
+
## Methods
24
+
25
+
-`fetchData ({ store, route })` - prepares query for fetching a list of products of the current category and dispatches `product/list` action that extracts that list.
26
+
27
+
-`{ store, route }` - an object consisting of the Vuex store and global router references.
28
+
29
+
-`validateRoute ({ store, route })` - this method is called whenever the global `$route` object changes its value. It dispatches `'category/single'` action to load current category object and then calls `fetchData` method to load a list of products that relate to this category.
30
+
-`{ store, route }` - an object consisting of the Vuex store and global router references.
31
+
32
+
## Events
33
+
34
+
### asyncData
35
+
36
+
Since the app is using SSR, this method prefetches and resolves the asynchronous data before rendering happens and saves it to Vuex store. Asynchronous data for Category page is a list of all categories, category attributes and list of products for each category.
37
+
38
+
### beforeMount
39
+
40
+
`filter-changed-category` event listener is initialized. The event is fired when user selects custom filter value.
41
+
42
+
### beforeDestroy
43
+
44
+
`filter-changed-category`event listener is removed.
Simple modal component. Visibility of modal container is based on internal state `isVisible`. We can set this state by `$emit` event on global `$bus` event.
4
+
5
+
## Basic usage
6
+
7
+
### Component markup
8
+
9
+
```html
10
+
<modalname="modal-example">
11
+
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
| close || Alias for manually hides a modal. Helpful for Close button |
36
+
37
+
### Styles
38
+
39
+
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)
0 commit comments