# Upgrade notes
We're trying to keep the upgrade process as easy as possible. Unfortunately, sometimes manual code changes are required. Before pulling out the latest version, please take a look at the upgrade notes below:
# 1.11 -> 1.12
Most of the changes added to 1.12 are backward compatible. To enable the new features (mostly the optimization features) please follow the steps described below.
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
(opens new window) 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%.
Re-enable amp-renderer
The amp-renderer
module has been disabled by default to save the bundle size; If you'd like to enable it uncomment the module from the src/modules
and uncomment the product-amp
and category-amp
links that are added to the <head>
section in the src/themes/default/Product.vue
and src/themes/default/Category.vue
Check entity optimization settings
Cart optimization was earlier disabled automatically if entity optimization was disabled. Now they can be used independently from each other. If you don't want to use cart optimization, make sure that the entities.optimizeShoppingCart
configuration entry is disabled explicitly.
deprecated actions and helpers
Product module has been refactored, here is list of actions that are not used anymore and you can remove them to reduce bundle.
deprecated actions:
- product/reset
- product/setupBreadcrumbs
- product/syncPlatformPricesOver
- product/setupAssociated
- product/loadConfigurableAttributes
- product/setupVariants
- product/filterUnavailableVariants
- product/list
- product/preConfigureAssociated
- product/preConfigureProduct
- product/configureLoadedProducts
- product/configureBundleAsync
- product/configureGroupedAsync
- product/configure
- product/setCurrentOption
- product/setCurrentErrors
- product/setOriginal
- product/loadProductAttributes
- category/list (new action is category-next/fetchMenuCategories)
deprecated helpers:
- configureProductAsync
- populateProductConfigurationAsync
- setConfigurableProductOptionsAsync
Here is list of actions that are used from 1.12 in product module:
- product/doPlatformPricesSync
- product/single
- product/checkConfigurableParent
- product/findProducts
- product/findConfigurableParent
- product/setCustomOptions
- product/setBundleOptions
- product/setCurrent
- product/loadProduct
- product/addCustomOptionValidator
- product/setProductGallery
- product/loadProductBreadcrumbs
- product/getProductVariant
All of those actions and helpers that are deprecated, can be removed so you will have smaller bundle. Comment those lines:
- core/modules/catalog/store/product/actions.ts:318
- core/modules/catalog/helpers/index.ts:14-18
- core/modules/catalog-next/store/category/actions.ts:265
# 1.10 -> 1.11
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 toclient.ts
, exported property was renamed toregisterClientModules
- 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
(opens new window) now supports multistore - adding thestoreCode
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
andmagento-2-cms
modules were deleted- example modules moved to https://github.com/vuestorefront/vsf-samples
core/helpers/initCacheStorage.ts
merged withStorageManager.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;
syncTaskCollection
renamed tosyncTasks
compareCollection
renamed tocompare
cmsData
renamed tocms
cartsCollection
renamed tocarts
checkoutFieldValues
,checkoutFieldsCollection
renamed tocheckout
(checkoutFieldsCollection
wasn’t used)ordersCollection
andorders
renamed to justorders
(ordersCollection
wasn’t used)elasticCacheCollection
renamed toelasticCache
usersCollection
usersData
merged and renamed touser
attributesCollection
,attributes
renamed to justattributes
ordersHistoryCollection
merged touser
cache where it belongscategoriesCollection
renamed to categories- Collections in theme like
claimsCollection
(claims modules) remained untouched
UserOrder
component has been renamed toUserOrderHistory
and moved fromsrc/modules/order-history/components/UserOrders
to@vue-storefront/core/modules/order/components/UserOrdersHistory
. This component was used inMyOrders
component found here:src/themes/default/components/core/blocks/MyAccount/MyOrders.vue
. In this file theimport
path has to be updated.claims
,promoted-offers
,homepage
andui
modules have been moved from@vue-storefront/src/modules
tosrc/themes/default/store/
and reduced to stores only.
Delete those folders:
--src/modules/claims
--src/modules/promoted-offers
--src/modules/homepage
--src/modules/ui-store
Copy foldertheme/store/
fromtheme default
.
Register the stores copied in previous step insrc/themes/default/index.js
. To do that, import them along withStorageManager
method, used to replaceclaims beforeRegistration hook
.
import { StorageManager } from '@vue-storefront/core/lib/storage-manager';
import { store as claimsStore } from 'theme/store/claims'
import { store as homeStore } from 'theme/store/homepage'
import { store as uiStore } from 'theme/store/ui'
import { store as promotedStore } from 'theme/store/promoted-offers'
Next, inside initTheme
method use store.registerModule
method to register the stores.
StorageManager.init('claims');
store.registerModule('claims', claimsStore);
store.registerModule('homepage', homeStore);
store.registerModule('ui', uiStore);
store.registerModule('promoted', promotedStore);
WebShare
moved from@vue-storefront/core/modules/social-share/components/WebShare.vue
to@vue-storefront/src/themes/default/components/theme/WebShare.vue
. This component was used inProduct
component found here:src/themes/default/pages/Product.vue
. In this file theimport
path has to be updated.We've fixed the naming strategy for product prices; The following fields were renamed:
special_priceInclTax
->special_price_incl_tax
,priceInclTax
->price_incl_tax
,priceTax
->price_tax
; The names have been kept and marked as @deprecated. These fields will be removed with Vue Storefront 2.0rc-1.We've decreased the
localStorage
quota usage + error handling by introducing new config variables:config.products.disablePersistentProductsCache
to not store products by SKU (by default it's on). Products are cached in ServiceWorker cache anyway so theproduct/list
will populate the in-memory cache (cache.setItem(..., memoryOnly = true)
);config.seo.disableUrlRoutesPersistentCache
- to not store the url mappings; they're stored in in-memory cache anyway so no additional requests will be made to the backend for url mapping; however it might cause some issues with url routing in the offline mode (when the offline mode PWA installed on homescreen got reloaded, the in-memory cache will be cleared so there won't potentially be the url mappings; however the same like withproduct/list
the ServiceWorker cache SHOULD populate url mappings anyway);config.syncTasks.disablePersistentTaskQueue
to not store the network requests queue in service worker. Currently only the stock-check and user-data changes were using this queue. The only downside it introduces can be related to the offline mode and these tasks will not be re-executed after connectivity established, but just in a case when the page got reloaded while offline (yeah it might happen using ServiceWorker;syncTasks
can't be re-populated in cache from SW)We've moved files from /store/lib to /lib. Basically to use it from the new directory you have to import now from
@vue-storefront/core/lib/store/
instead of@vue-storefront/core/store/lib/
. These core files got changed:
core/build/webpack.base.config.ts
core/lib/sync/task.ts
core/lib/storage-manager.ts
core/modules/catalog/helpers/search.ts
core/modules/catalog/store/attribute/mutations.ts
core/modules/catalog/store/category/actions.ts
core/modules/catalog/store/category/mutations.ts
core/modules/catalog/store/product/actions.ts
core/modules/catalog/store/tax/mutations.ts
core/modules/compare/store/actions.ts
core/modules/order/store/mutations.ts
core/modules/order/index.ts
core/modules/wishlist/store/actions.ts
If by some reasons you wan't to have the localStorage
back on for Products by SKU
, Url Routes
and SyncTasks
- please just set these variables back to false
in your config/local.json
.
- New page-not-found handling requires to update router/index.js in the theme.
- The option
config.ssr.lazyHydrateFor
withcategory-next.products
value was introduced which is responsible for hydrating products list and loading them only on client side. It means there is no category products in the__INITIAL__STATE__
. It's enabled by default. - 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 usegetCmsBlocks
,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 (opens new window) in order to adjust them, otherwise they might get lost.
i18n.currencySignPlacement
config value is replaced byi18n.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 insetupMultistoreRoutes
, including the default store. - Optionally give theme routes priority, to ensure they override module routes if there are any conflicts. For example
setupMultistoreRoutes(config, router, routes, 10)
. - See
/src/themes/default/index.js
for a complete example.
- Delete the line
- In
storeView
config there is no moredisabled
flag for specific language config. Links for other languages will be displayed if specificstoreView
config exist. - Categories can be filtered globally, to never be loaded, by setting
entities.category.filterFields
in local.json, e.g."filterFields": { "is_active": true }
. - Categories can be filtered in the Breadcrumbs, by setting
entities.category.breadcrumbFilterFields
in local.json, e.g."breadcrumbFilterFields": { "include_in_menu": true }
.
# 1.10 -> 1.10.4
We've decreased the localStorage
quota usage + error handling by introducing new config variables:
config.products.disablePersistentProductsCache
to not store products by SKU (by default it's on). Products are cached in ServiceWorker cache anyway so theproduct/list
will populate the in-memory cache (cache.setItem(..., memoryOnly = true)
);config.seo.disableUrlRoutesPersistentCache
- to not store the url mappings; they're stored in in-memory cache anyway so no additional requests will be made to the backend for url mapping; however it might cause some issues with url routing in the offline mode (when the offline mode PWA installed on homescreen got reloaded, the in-memory cache will be cleared so there won't potentially be the url mappings; however the same like withproduct/list
the ServiceWorker cache SHOULD populate url mappings anyway);config.syncTasks.disablePersistentTaskQueue
to not store the network requests queue in service worker. Currently only the stock-check and user-data changes were using this queue. The only downside it introuces can be related to the offline mode and these tasks will not be re-executed after connectivity established, but just in a case when the page got reloaded while offline (yeah it might happen using ServiceWorker;syncTasks
can't be re-populated in cache from SW)
If by some reasons you wan't to have the localStorage
back on for Products by SKU
, Url Routes
and SyncTasks
- please juset set these variables back to false
in your config/local.json
.
# 1.9 -> 1.10
- Event
application-after-init
is now emitted by event bus instead of root Vue instance (app), so you need to listen toVue.prototype.$bus
(EventBus.$on()
) now - The lowest supported node version is currently 8.10.0,
- Module Mailchimp is removed in favor of Newsletter.
local.json
configuration under keymailchimp
moved to keynewsletter
. - In multistore mode now there is a possibility to skip appending storecode to url with
appendStoreCode
config option. To keep the original behavior, it should be set to true. - @lukeromanowicz (#3048). - The
cart/addItem
is no longer displaying the error messages - please use thediffLog.clientNorifications
to update the UI instead (take a look at theAddToCart.ts
for a reference) - Please make sure your
AddToCart.vue
component has thenotifyUser
method defined for showing the errors / success messages while adding to the cart. The default implementation is:
notifyUser (notificationData) {
this.$store.dispatch('notification/spawnNotification', notificationData, { root: true })
}
- The getter
cart/totals
has been replaced withcart/getTotals
- @pkarw (#2522) - The getter
cart/coupon
has been replaced withcart/getCoupon
- @pkarw (#2522) - The getter
cart/totalQuantity
has been replaced withcart/getItemsTotalQuantity
- @pkarw (#2522)
# 1.8 -> 1.9
- The Url Dispatcher feature added for friendly URLs. When
config.seo.useUrlDispatcher
set to true theproduct.url_path
andcategory.url_path
fields are used as absolute URL addresses (no/c
and/p
prefixes anymore). Check the latestmage2vuestorefront
snapshot and reimport Your products to properly seturl_path
fields cart.multisiteCommonCart
config property changed tostoreViews.commonCache
- Way of creating VS Modules was changed to use factory method instead of explict object creation. Even though the feature is backward compatible we highly encourage all developers to refactor their modules to use new syntax.
The process of creating a new module with the factory method looks like the following:
import { createModule } from '@vue-storefront/core/lib/module'
const moduleConfig: VueStorefrontModuleConfig = {
// VS module config
}
const module = createModule(moduleConfig)
@vue-storefront/store
package has been depreciated. Just change imports to@vue-storefront/core/store
.breadCrumbRoutes
helper has been refactored toformatBreadCrumbRoutes
- orders which fail validation in API are assumed to have http code 400 instead of 500
- notification message about invalid order address now uses email configured in mailer section instead of hardcoded one
- Added validation for UTF8 alpha and alphanumeric characters in most checkout fields
- 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 (opens new window)
In case of app crashing, especially when opening
vue devtools
in browser, try settingstoreViews.commonCache
tofalse
.
# 1.7 -> 1.8
Full changelog is available here (opens new window)
store/types
have moved to new module namedcore/types
.store/lib/search
has been moved tocore/lib/search
.store/lib/multistore.ts
has been [moved] to (https://github.com/patzick/vue-storefront/commit/d42cdc44fc204dd10b173894d52dbeff244913f5#diff-87917f882ffc57fb755b1cc82ffa9e28L11) tocore/lib/multistore.ts
- new styles (opens new window) file for form elements
- Removed unused
src/themes/default/filters/index.js
file. Check if you're not using it as well. src/themes/default/resource/head.js
has been moved tosrc/themes/default/head.js
src/themes/default/index.basic.template.html
has been moved tosrc/themes/default/templates/index.basic.template.html
src/themes/default/index.minimal.template.html
has been moved tosrc/themes/default/templates/index.minimal.template.html
src/themes/default/index.template.html
has been moved tosrc/themes/default/templates/index.template.html
# 1.6 -> 1.7
Starting from Vue Storefront 1.7, we changed the caching strategy and offline-ready features:
- By default, the Elasticsearch Queries are executed using
GET
method and therefore are cached by Service Worker (config.elasticsearch.queryMethod
— set it to POST for the previous behavior and if you're using graphql). - By default, products and queries cache is set in
LocalStorage
with a quota set to 4MB (config.server.elasticCacheQuota
). If the storage quota is set, the cache purging is executed every 30 seconds using the LRU algorithm. Local Storage is limited to 5MB in most browsers. - We added
config.server. disablePersistentQueriesCache
, which is set totrue
by default. When this option is on, we're not storing the Elasticsearch results in the local cache because results are by default cached in the Service Worker cache anyway. module.extend
has been changed toextendModule
. You can find usage examples insrc/modules/index.ts
.- routes (opens new window), layouts (opens new window), and component, which are not visible at page rendering are now loaded when they are needed.
- Every store manipulation should be done by dispatching actions. Invoke store dispatch on
category/mergeSearchOptions
when manipulatingstore.state.category.current_product_query
somewhere. - here (opens new window) are all changes in default themes
Backward compatibility: To reverse to the 1.0–1.6 behavior:
- Set
config.server.disablePersistentQueriesCache
=false
, - Set
config.elasticsearch.queryMethod
=POST
- Set
config.localForage.defaultDrivers.elasticCache
=INDEXEDDB
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 (opens new window)
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 (opens new window) 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 (opens new window). If You've used the custom payment (and basically any other) extensions please make sure You've already ported them to new modules architecture (opens new window).
# 1.5 -> 1.6
With 1.6, we introduced new modular architecture and moved most of the theme-specific logic from the core to the default theme. It's probably the biggest update in VS history and the first step to making future upgrades more seamless.
Due to architectural changes, core/components
and core/store/modules
folders were removed and reorganised into modules ( core/modules
). In most cases, the components API remained the same (if not, we provided an API bridge in core/compatibility/components
folder which allows you to benefit from new features without making changes in your theme). It's a good idea to look for imports referring to deleted folders after migration to be sure that we made a full update.
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 (opens new window) 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.
Change every component:
this.$bus.$emit('notification',
to:
this.$store.dispatch('notification/spawnNotification',
Change every store:
EventBus.$emit('notification',
to:
rootStore.dispatch('notification/spawnNotification',
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 (opens new window). You can find examples from the default theme here (opens new window)
- Extensions are now rewritten to modules (and the extensions system will be depreciated in 1.7).
If you haven't modified any extensions directly, you don't need to change anything. If you made such changes, you probably need to rewrite your extension to a module.
- The old event bus is moved to the compatibility folder. From now we are trying to create new features without it and slowly depreciate the event bus whenever possible. It'll be replaced with some enhanced module-based mechanism with event autosuggestion support.
Change all @vue-storefront/core/plugins/event-bus
imports to @vue-storefront/core/compatibility/plugins/event-bus
# Components that were moved or the API was changed and the compatibility component was created.
Required action: Change the import path. In case of additional changes click on a component name to see how to update.
AddToCart.vue
(opens new window)Breadcrumbs.vue
(opens new window)ColorSelector.vue
(opens new window)GenericSelector.vue
(opens new window)NewsletterPopup.vue
(opens new window)Notification.vue
(opens new window) +exec
changed toexecAction
, addedexecAction
Overlay.vue
(opens new window)PriceSelector.vue
(opens new window)ProductAttribute.vue
(opens new window)ProductCustomOptions.vue
(opens new window)ProductGallery.vue
(opens new window)SizeSelector.vue
(opens new window)SortBy.vue
(opens new window) + change from dropdown to selectValidationError.vue
(opens new window)Login.vue
(opens new window)Category/Sidebar.vue
(opens new window) + added possibility to clear all filtersCartSummary.vue
(opens new window)OrderReview.vue
(opens new window) + notifications moved from core to themePayment.vue
(opens new window)PersonalDetails.vue
(opens new window)Checkout/Product.vue
(opens new window)Shipping.vue
(opens new window)AccountIcon.vue
(opens new window)CompareIcon.vue
(opens new window)HamburgerIcon.vue
(opens new window)MicrocartIcon.vue
(opens new window)Returnicon.vue
(opens new window)WishlistIcon.vue
(opens new window)Microcart.vue
(opens new window)Microcart/Product.vue
(opens new window)MyNewsletter.vue
(opens new window)MyOrder.vue
(opens new window)MyOrders.vue
(opens new window)MyProfile.vue
(opens new window)MyShippingDetails.vue
(opens new window)Related.vue
(opens new window) +refreshList
method changedSearchPanel.gql.vue
(opens new window)SearchPanel.vue
(opens new window)SidebarMenu.vue
(opens new window) + bugfix (hide longer menus that are below currently active one), direct router link instead of eventWishlist/Product.vue
(opens new window)Wishlist.vue
(opens new window)Collection.vue
(opens new window)Home.vue
(opens new window)
# 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
(opens new window)Modal.vue
(opens new window) + static content removedProductLinks.vue
(opens new window)ProductListing.vue
(opens new window)ProductTile.vue
(opens new window) + core import moved to moduleProductSlider.vue
(opens new window)ForgotPass.vue
(opens new window)Register.vue
(opens new window) + core import moved to moduleSignUp.vue
(opens new window)BaseCheckbox.vue
(opens new window)BaseInput.vue
(opens new window)BaseRadioButton.vue
(opens new window)BaseSelect.vue
(opens new window)BaseTextArea.vue
(opens new window)Header.vue
(opens new window)MainSlider.vue
(opens new window)Reviews.vue
(opens new window) + empty array instead of null, core import path changedCompare.vue
(opens new window)
# Other
ProductBundleOption.vue
(opens new window) - splitted single option fromProductBundleOptions.vue
component.ProductBundleOptions.vue
(opens new window) - single option moved to separate componentProductBundleOption.vue
, moved to module.ThankYouPage.vue
(opens new window) added order id display, order confirmation, pulled notifications from core and added mail confirmationmain.scss
(opens new window) removed duplicated flexbox gridindex.template.html
(opens new window) (+ all other templates that you may have like minimal, basic etc), addedoutput.appendHead(), renderStyles()
Category.vue
(opens new window) notifications moved to themeCheckout.vue
(opens new window) notifications moved to themeMyAccount.vue
(opens new window) notifications moved to themeProduct.vue
(opens new window) minor changes in attribute var names that may influence the markup, notifications moved to themeStatic.vue
(opens new window) static pages are no longed using markdown files.
# 1.4 -> 1.5
# Modifications
# New Modules API
With 1.5.0, we introduced a new, heavily refactored modules API. We tried to keep the old theme components backward compatible, so now you can view some "mock" components in the /core/components
referencing to the /modules/<module>/components
original. Please read how modules work and are structured to check if it implies any changes to your theme. Though it may seem like a lot of changes (a lot of files were added/removed/renamed), it should not impact your custom code.
# New Newsletter module
The existing newsletter-integration module was pretty chaotic and messy. @filrak has rewritten it from scratch. If you've relied on existing newsletter module logic / events / etc., it could have affected your code (low probability).
# Memory leaks fixed
We fixed SSR memory leaks with #1882. It should not affect your custom code, but if you've modified any SSR features, please make sure that everything still works just fine.
# 1.3 -> 1.4
# Modifications
# GraphQL
We added GraphQL support. Please read more on the GraphQL Action Plan. Starting from this release, the bodybuilder package is deprecated. You should use the SearchQuery internal class that can be used against API and GraphQL endpoints. Read more on how to query data.
# 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 (opens new window) + dynamic layout changes (opens new window) 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.
# Microcart
We moved core functionalities of coupon codes to API modules:
- Coupon computed value is now appliedCoupon (read more (opens new window))
- removeCoupon (read more (opens new window))
- applyCoupon (read more (opens new window))
- totals -> cartTotals (read more (opens new window))
- shipping -> cartShipping (read more (opens new window))
- payment -> cartPayment (read more (opens new window))
We moved/renamed methods responsible for UI to the default theme:
- addDiscountCoupon - toggle coupon form
- removeCoupon -> clearCoupon - removing coupon by dispatch removeCoupon API method and toggle coupon form
- applyCoupon -> setCoupon - submit coupon form by dispatch applyCoupon API method
- enterCoupon - was removed, because @keyup="enterCoupon" we changed to @keyup.enter="setCoupon"
We moved $emit with notification about appliedCoupon and removedCoupon from Vuex store to the default theme. Now applyCoupon and removeCoupon returns promise, which you can handle by yourself.
We moved VueOfflineMixin and onEscapePress mixins to the theme component. The core component is clean from UI stuff now.
We've replaced one method
Microcart
-cartTotals
->totals
# Assets
- We removed the default assets from
core/assets
. From now on, we only use the assets fromyour-theme/assets
.
# Store
- We moved the socialTiles Vuex store from the core to the theme, because it's specific to the theme.
# i18n
- We removed all the theme-specific translations for the core.
# 1.2 -> 1.3
# Changes
- We removed event emit from client-entry.js with online status information. Instead, we are now using vue-offline (opens new window) mixin. #1494 (opens new window)
- We removed the isOnline variable from Microcart.js. Instead, we are now using variables from vue-offline (opens new window) mixin. #1494 (opens new window)
# Upgrade step-by-step
# global.$VS
replaced with rootStore
and config
was moved to config
To get access to rootStore, import it by
import config from 'config'
# cms extenstion was renamed to extension-magento2-cms
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 (opens new window))
There were no breaking-changes introduced. No special treatment needed 😃
# 1.0 -> 1.1 (release notes (opens new window))
# Modifications
# Plugins registration simplified
Instead of exporting an object in {theme}/plugins/index.js
just use Vue.use(pugin)
directly in this file ( docs (opens new window) )
# 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 (opens new window).
Changes that happened in Microcart.js
core component and Microcart.vue
component from default theme:
closeMicrocart
renamed tocloseMicrocartExtend
items
renamed toproductsInCart
removeFromCart
method added to core Microcart
# theme/app-extend.js
removed
It was redundant.
# {theme}/service-worker-ext.js
moved to {theme}/service-worker/index.js
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 (opens new window) 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/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 (opens new window) importer. importer. For example, fixed special_price sync. For such changes, please update mage2vuestorefront (opens new window) and re-import your products. We also added the dynamic on/demand indexing.
# New features
We added vue-progressbar
(opens new window) to default theme, which can be found in App.vue
file.
# 1.0RC-3 -> 1.0(release notes (opens new window))
This is the official, stable release of Vue Storefront.
- We renamed
the core/components/*.vue
->the core/components/*.js
- We renamed
the core/pages/*.vue
->the core/pages/*.js
- We removed
corePage
andcoreComponent
helpers and created an es-lint rule to migrate theimport
statements automatically (with--fix
parameter)
You should replace the mixin declarations from the previous version:
<script>
import { coreComponent } from '@vue-storefront/core/lib/themes';
export default {
mixins: [coreComponent('blocks/MyAccount/MyOrders')],
};
</script>
to
<script>
import MyOrders from '@vue-storefront/core/components/blocks/MyAccount/MyOrders';
export default {
mixins: [MyOrders],
};
</script>
- 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 (opens new window))
This release contains three important refactoring efforts:
We changed the user-account endpoints and added the token-reneval mechanism, which is configured by
config.users.autoRefreshTokens
. If set to true and user token will expire, VS will try to refresh it.We separated the user-account endpoints, so please copy the following defaults from
default.json
to Yourlocal.json
and set the correct API endpoints:
"users": {
"autoRefreshTokens": true,
"endpoint": "http://localhost:8080/api/user",
"history_endpoint": "http://localhost:8080/api/user/order-history?token={{token}}",
"resetPassword_endpoint": "http://localhost:8080/api/user/reset-password",
"changePassword_endpoint": "http://localhost:8080/api/user/change-password?token={{token}}",
"login_endpoint": "http://localhost:8080/api/user/login",
"create_endpoint": "http://localhost:8080/api/user/create",
"me_endpoint": "http://localhost:8080/api/user/me?token={{token}}",
"refresh_endpoint": "http://localhost:8080/api/user/refresh"
},
The endpoints are also set by the yarn installer
so You can try to reinstall VS using this command.
- We optimized the performance by limiting the fields loaded each time in JSON objects from the backend. Please review the
config/default.json
and if some fields required / used by your app are missing, copy the following fragment to theconfig/local.json
and add the required fields:
"entities": {
"optimize": true,
"twoStageCaching": true,
"category": {
"includeFields": [ "children_data", "id", "children_count", "sku", "name", "is_active", "parent_id", "level" ]
},
"attribute": {
"includeFields": [ "attribute_code", "id", "entity_type_id", "options", "default_value", "is_user_defined", "frontend_label", "attribute_id", "default_frontend_label", "is_visible_on_front", "is_visible", "is_comparable" ]
},
"productList": {
"includeFields": [ "type_id", "sku", "name", "price", "priceInclTax", "original_price_incl_tax", "id", "image", "sale", "new" ],
"excludeFields": [ "configurable_children", "description", "configurable_options", "sgn", "tax_class_id" ]
},
"productListWithChildren": {
"includeFields": [ "type_id", "sku", "name", "price", "priceInclTax", "original_price_incl_tax", "id", "image", "sale", "new", "configurable_children.image", "configurable_children.sku", "configurable_children.price", "configurable_children.special_price", "configurable_children.price_incl_tax", "configurable_children.special_price_incl_tax", "configurable_children.original_price", "configurable_children.original_price_incl_tax", "configurable_children.color", "configurable_children.size" ],
"excludeFields": [ "description", "sgn", "tax_class_id" ]
},
"product": {
"excludeFields": [ "updated_at", "created_at", "attribute_set_id", "status", "visibility", "tier_prices", "options_container", "url_key", "msrp_display_actual_price_type", "has_options", "stock.manage_stock", "stock.use_config_min_qty", "stock.use_config_notify_stock_qty", "stock.stock_id", "stock.use_config_backorders", "stock.use_config_enable_qty_inc", "stock.enable_qty_increments", "stock.use_config_manage_stock", "stock.use_config_min_sale_qty", "stock.notify_stock_qty", "stock.use_config_max_sale_qty", "stock.use_config_max_sale_qty", "stock.qty_increments", "small_image"],
"includeFields": null
}
},
If optimize
is set to false, it's a fallback to the previous behaviour (getting all fields).
Another cool feature is
twoStageCaching
enabled by default. It means that for the Category page, VS is getting only the minimum number of JSON fields required to display the ProductTiles. Shortly after, it downloads the full objects by the second request to store them in the local cache.We tweaked the Service Worker to better cache the app; it sometimes can generate frustration if your home page is now cached in the SW (previously was not). Feel free to use
Clear Storage
in your Developers tools 😃The
mage2vuestorefront
tool got update and now it's loading themedia_gallery
with additional media per product. We also put some MediaGallery components on the product page.
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 (opens new window))
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 (opens new window).
We changed
ColorButton
,SizeButton
,PriceButton
in thecore
toColorSelector
,SizeSelector
,PriceSelector
and added theGenericSelector
for all other attribute types. Because of this change, thecoreComponent('ColorButton')
must be changed tocoreComponent('ColorSelector')
etc.We added the Vuex Stores extensibility to the themes. If You're getting the following build error:
ERROR in ./core/store/index.js
Module not found: Error: Can't resolve 'theme/store' in '***/vue-storefront/core/store'
It means, that you need to copy the template store to: <Your custom theme folder>/store
.