diff --git a/README.md b/README.md index 54309fef38..ce51c5581d 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ ![Branch Develop](https://img.shields.io/badge/dev%20branch-develop-blue.svg) ![Branch Develop](https://img.shields.io/badge/community%20chat-slack-FF1493.svg) -Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore/CoreShop, Prestashop or Shopware) through the API. +Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, Pimcore/CoreShop, [BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront), Prestashop or Shopware) through the API. Vue Storefront is and always will be in the open source. Anyone can use and support the project, we want it to be a tool for the improvement of the shopping experience. The project is in the **production ready** phase. @@ -67,8 +67,23 @@ If you have any questions or ideas feel free to join our slack: https://vuestore ## Roadmap +[Here](https://github.com/DivanteLtd/vue-storefront/milestones) you can find the accepted roadmap for current milestone and what you can expect with next release. + +#### Roadmap planning +[Here](https://github.com/DivanteLtd/vue-storefront/projects/3) you can vote for feature requests and see which ones were accepted. The most upvoted ones will be added to next milestones. You can also joj slack channel `#roadmap-planning` where we discuss next milestones. + +The process of adding new features to the roadmap looks like this: +1. You create an issue and label it as `feature request`. +2. One of VS Core team verifies the feature request and if the explaination is clear adds it to the `Roadmap` project so it's visible in the board. +3. Now people can vote for this feature to be added into next milestone with `thumb up` emoji. +4. Feature requests with biggest popularity will be added into next milestones. + We are planning 1-2 milestones ahead. Our milestones are based on requirements from community, partners and production implementations. -[See the roadmap](https://github.com/DivanteLtd/vue-storefront/milestones). + +Please note that bugfixes are treated separately and in most cases added to the milestones immediately. + + + [Check the feature list of 1.0](https://divanteltd.github.io/vue-storefront/guide/basics/feature-list.html). If youd like to take part in roadmap planning feel free to join #roadmap-planning channel on our slack @@ -131,7 +146,8 @@ Tutorial series on creating themes for Vue Storefront: - [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) +- [Vue Storefront + BigCommerce](https://github.com/DivanteLtd/bigcommerce2vuestorefront) +- [Vue Storefront + Pimcore](https://github.com/DivanteLtd/coreshop-vsbridge) - [Magento2 Product Reviews](https://divanteltd.github.io/vue-storefront/guide/integrations/reviews.html) - [PayPal Payments integration](https://divanteltd.github.io/vue-storefront/guide/integrations/paypal-payments.html) - [Direct prices sync with Magento](https://divanteltd.github.io/vue-storefront/guide/integrations/direct-prices-sync.html) @@ -258,7 +274,7 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s Summa Solutions @@ -500,14 +516,29 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s - + + Absolute Web Services + + + + + + + + + + diff --git a/core/lib/module.ts b/core/lib/module.ts index 25666a11d4..f922eaf5e5 100644 --- a/core/lib/module.ts +++ b/core/lib/module.ts @@ -32,6 +32,10 @@ export class VueStorefrontModule { return this._c } + public set config (config) { + this._c = config + } + private static _registeredModules: VueStorefrontModuleConfig[] = [] private static _doesStoreAlreadyExists (key: string) : boolean { @@ -60,7 +64,7 @@ export class VueStorefrontModule { private _extend (extendedConfig: VueStorefrontModule) { const key = this._c.key - this._c = merge(this._c, extendedConfig.config) + this._c = merge(this._c, extendedConfig) Logger.info('Module "' + key + '" has been succesfully extended.', 'module')() } diff --git a/core/modules/catalog/helpers/index.ts b/core/modules/catalog/helpers/index.ts index 1d5a3eb843..6bd032e9c4 100644 --- a/core/modules/catalog/helpers/index.ts +++ b/core/modules/catalog/helpers/index.ts @@ -356,7 +356,7 @@ export function populateProductConfigurationAsync (context, { product, selectedV for (let option of product.configurable_options) { let attribute_code let attribute_label - if (option.attribute_id) { + if (option.attribute_id) { let attr = context.rootState.attribute.list_by_id[option.attribute_id] if (!attr) { console.error('Wrong attribute given in configurable_options - can not find by attribute_id', option) @@ -368,7 +368,7 @@ export function populateProductConfigurationAsync (context, { product, selectedV } else { if (!option.attribute_code) { console.error('Wrong attribute given in configurable_options - no attribute_code', option) - continue + continue } else { // we do have attribute_code! attribute_code = option.attribute_code attribute_label = option.frontend_label ? option.frontend_label : option.default_frontend_label @@ -419,7 +419,7 @@ export function findConfigurableChildAsync({ product, configuration = null, sele if (availabilityCheck) { if (configurableChild.stock && !rootStore.state.config.products.listOutOfStockProducts) { - if (!configurableChild.is_in_stock) { + if (!configurableChild.stock.is_in_stock) { return false } } @@ -513,7 +513,7 @@ export function configureProductAsync (context, { product, configuration, select if (selectDefaultVariant) { context.dispatch('setCurrent', product) // without the configuration } - } + } return selectedVariant } else { if (fallbackToDefaultWhenNoAvailable) { diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts index c35f0189c9..a660ae238c 100644 --- a/core/modules/user/store/actions.ts +++ b/core/modules/user/store/actions.ts @@ -278,6 +278,10 @@ const actions: ActionTree = { context.commit(types.USER_GROUP_TOKEN_CHANGED, '') context.commit(types.USER_GROUP_CHANGED, null) context.commit(types.USER_INFO_LOADED, null) + context.dispatch('wishlist/clear', null, {root: true}) + context.dispatch('checkout/savePersonalDetails', {}, {root: true}) + context.dispatch('checkout/saveShippingDetails', {}, {root: true}) + context.dispatch('checkout/savePaymentDetails', {}, {root: true}) }, /** * Logout user diff --git a/core/scripts/installer.js b/core/scripts/installer.js index 643be77f44..cce6bcd26a 100644 --- a/core/scripts/installer.js +++ b/core/scripts/installer.js @@ -264,7 +264,7 @@ class Backend extends Abstract { config.imageable.whitelist.allowedHosts.push(host) config.magento2.url = urlParser(this.answers.m2_url).href - config.magento2.imgUrl = this.answers.m2_url ? urlParser(this.answers.m2_url).href + '/pub/media/catalog/product' : config.magento2.api.imgUrl + config.magento2.imgUrl = this.answers.m2_url ? urlParser(this.answers.m2_url).href + '/pub/media/catalog/product' : config.magento2.imgUrl config.magento2.api.url = urlParser(this.answers.m2_api_url).href || config.magento2.api.url config.magento2.api.consumerKey = this.answers.m2_api_consumer_key || config.magento2.api.consumerKey config.magento2.api.consumerSecret = this.answers.m2_api_consumer_secret || config.magento2.api.consumerSecret diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 61258c0c76..923b84d8b4 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,5 +1,5 @@ module.exports = { - base: '/vue-storefront/', + base: '/', head: [['link', { rel: 'icon', href: '/favicon.png' }]], themeConfig: { repo: 'DivanteLtd/vue-storefront', @@ -88,6 +88,7 @@ module.exports = { title: 'Extensions', collapsable: false, children: [ + 'extensions/introduction', 'extensions/extending-api', 'extensions/extending-server-side-routes', ], diff --git a/docs/CNAME b/docs/CNAME new file mode 100644 index 0000000000..51fee44682 --- /dev/null +++ b/docs/CNAME @@ -0,0 +1 @@ +docs.vuestorefront.io \ No newline at end of file diff --git a/docs/deploy.sh b/docs/deploy.sh index ab56466785..0874d8f231 100755 --- a/docs/deploy.sh +++ b/docs/deploy.sh @@ -4,6 +4,7 @@ set -e # build +npm i npm run docs:build # navigate into the build output directory diff --git a/docs/guide/extensions/introduction.md b/docs/guide/extensions/introduction.md new file mode 100644 index 0000000000..18581145b5 --- /dev/null +++ b/docs/guide/extensions/introduction.md @@ -0,0 +1,20 @@ +# Introduction + +## How Vue Storefront extensions look like? +Depending on 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. +- **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 Elastic Search. + +## 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` +- On the server side extensions should be placed in `src/api/extensions` folder of `vue-storefront-api` and registered in config file + +## Writing extensions +If you are writing VS extension as an NPM module start package name with `vsf-` prefix so it can be transpiled with other VS code and ship it as a raw es6/typescript module. If you don't use the prefix you need to handle transpilation by yourself. We are currently building extension boilerplate to make it easier to develop one. + +Here you can find two articles explaining how to create custom Vue Storefront extensions: +- [How to create an Instagram Feed module for Vue Storefront](https://itnext.io/how-to-create-an-instagram-feed-module-for-vue-storefront-eaa03019b288) by Javier Villanueva +- [Developing a Vue Storefront payment module](https://www.develodesign.co.uk/news/development-of-the-paypal-module-for-vue-storefront/#.XCoa2h2Mmmo.twitter) by Dmitry Schegolikhin from [Develo Design](https://www.develodesign.co.uk/) + +## Extensions list +You can find a curated list of VS extensions in [Awesome Vue Storefront](https://github.com/frqnck/awesome-vue-storefront) list. diff --git a/docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io b/docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io new file mode 100644 index 0000000000..0d1cda8d79 --- /dev/null +++ b/docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io @@ -0,0 +1,62 @@ +server { + listen 80; + server_name prod.vuestorefront.io; + return 301 https://prod.vuestorefront.io$request_uri; +} + +server { + listen 443 ssl; + server_name prod.vuestorefront.io http2; + + ssl on; + + ssl_certificate /etc/nginx/ssl/prod.vuestorefront.io.chained.crt; + ssl_certificate_key /etc/nginx/ssl/prod.vuestorefront.io.key; + + ssl_protocols TLSv1 TLSv1.1 TLSv1.2; + ssl_prefer_server_ciphers on; + ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:DHE-RSA-AES256-SHA; + ssl_ecdh_curve secp384r1; + ssl_session_timeout 10m; + ssl_session_cache shared:SSL:10m; + ssl_session_tickets off; + ssl_stapling on; + ssl_stapling_verify on; + resolver 8.8.8.8 8.8.4.4 valid=300s; + resolver_timeout 5s; + + ssl_dhparam /etc/nginx/ssl/dhparam.pem; + + add_header Strict-Transport-Security "max-age=31536000" always; + add_header X-Frame-Options DENY; + add_header X-Content-Type-Options nosniff; + add_header X-XSS-Protection "1; mode=block"; + add_header X-Robots-Tag none; + + gzip on; + gzip_proxied any; + gzip_types + text/css + text/javascript + text/xml + application/javascript + application/json + text/json + text/html; + + location / { + proxy_pass http://localhost:3000/; + } + + location /assets/ { + proxy_pass http://localhost:3000/assets/; + } + + location /api/ { + proxy_pass http://localhost:8080/api/; + } + + location /img/ { + proxy_pass http://localhost:8080/img/; + } +} diff --git a/docs/guide/installation/production-setup.md b/docs/guide/installation/production-setup.md index 610ac47227..1a52b5dbae 100644 --- a/docs/guide/installation/production-setup.md +++ b/docs/guide/installation/production-setup.md @@ -70,7 +70,7 @@ Some additional materials: #### Nginx configuration -[Here is the complete `/etc/nginx/sites-enabled/prod.vuestorefront.io` file](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/develop/docs/guide/installation/prod.vuestorefront.io). +[Here is the complete `/etc/nginx/sites-enabled/prod.vuestorefront.io` file](https://github.com/DivanteLtd/vue-storefront/tree/master/docs/guide/installation/etc/nginx/sites-enabled/prod.vuestorefront.io). Create nginx config file from the template (please run as a root user): @@ -250,7 +250,7 @@ It may take a few minutes. Once the modules are installed we can set configurati #### Vue Storefront configuration -The full configuration files are available here to download: [vue-storefront](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront/config) and [vue-storefront-api](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront-api/config). +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). Please create the `vue-storefront-api/config/local.json` and `vue-storefront/config/local.json` files accordingly. @@ -321,7 +321,7 @@ There are 27 more instances of `prod.vuestorefront.io` to be replaced with your #### Vue Storefront API configuration -The [provided vue-storefront-api configuration](https://github.com/DivanteLtd/vue-storefront/tree/develop/docs/guide/installation/vue-storefront/config) requires almost no changes. +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 only lines you need to alter are: @@ -362,6 +362,13 @@ The only lines you need to alter are: You should put here the `allowedHosts` and `trustedHosts` for the Imageable - to download the product images. The domain name points to the **Magento2** instance where images are sourced. In this example Magento2 is running under **http://demo-magento2.vuestorefront.io**. + #### Using your own magento2 instance + In this case you'll have to update `magento2` config node with correct hostname in vue-storefront-api config file. To get all necessary Magento2 API data for `api` node, navigate to SYSTEM -> Extensions -> Integrations in Magento2 Admin. + - click Add new integration + - check the necessary permissions (check Catalog, Sales, My Account and Carts on API permissions tab ) + - click Activate + - copy necessary keys, secrets and tokens into `api` section of vue-storefront-api config + #### Build VS Before we can run Vue Storefront and Vue Storefront API we should build it in the production mode. To do so please just execute the following commands: diff --git a/docs/guide/modules/introduction.md b/docs/guide/modules/introduction.md index ec7ac8e725..c1ec666992 100644 --- a/docs/guide/modules/introduction.md +++ b/docs/guide/modules/introduction.md @@ -1,10 +1,27 @@ # Introduction +# Table of contents -## What are VS modules? +**Introduction and motivation** +- [What are VS Modules](#what-are-vs-modules) +- [Motivation](#motivation) +- [What is the purpose of VS modules?](#what-is-the-purpose-of-vs-modules) -You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features. +**Technical part** +- [Module config and it's capabilities](#module-config-and-capabilities) +- [Module file structure](#module-file-structure) +- [Module registration](#module-registration) -## Motivation +**Patterns and good practices for common use cases** +- [General rules and good practices](#general-rules-and-good-practices) +- [Adding new features as VS modules](#adding-new-features-as-vs-modules) +- [Extending and overriding Vue Storefront modules](#extending-and-overriding-vue-storefront-modules) + + +# What are VS modules? + +You can think about each module as a one, independent feature available in Vue Storefront with all it's logic and dependencys inside. This 'one feature' however is a common denominator that links all the features inside. For example common denominator for adding product to the cart, receiving list of items that are in a cart or applying a cart coupon is obviously a `cart` and `cart` is not a feature of anything bigger than itself (it's common denominator is a shop) so it should be a module. Wishlist, Reviews or Newsletter are also a good examples of modules as we intuitively think about them as a standalone features. + +# Motivation I believe that some neat metaphore can clearly describe the problem as well as a solution. diff --git a/docs/guide/upgrade-notes/README.md b/docs/guide/upgrade-notes/README.md index f866de2468..c3115e29bd 100644 --- a/docs/guide/upgrade-notes/README.md +++ b/docs/guide/upgrade-notes/README.md @@ -8,6 +8,10 @@ Starting from Vue Storefront 1.7 we've changed the Caching strategy + Offline re - 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 the `LocalStorage` with a quota set to 4MB (`config.server.elasticCacheQuota`). If the storage quota is set, the cache purging is executed each 30s using LRU algorithm. Local Storage is limited to 5MB in most browsers - we've added `config.server. disableLocalStorageQueriesCache` which is set to `true` by default. When this option is `on` then we're not storing the ElasticSearch results in local cache - this is due to the fact that results are by default cached in Service Worker cache anyway. +- `module.extend` has been changed to `extendModule`. You can find usage example in `src/modules/index.ts`. +- [routes](https://github.com/patzick/vue-storefront/commit/a97eb11868de2915e86d57c4279caf944d4de422#diff-a334a7caeb7f61836f8c1178d92de3e0), [layouts](https://github.com/patzick/vue-storefront/commit/a97eb11868de2915e86d57c4279caf944d4de422#diff-48863b9fe31d7713222ec5709ef5a4fa) 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 manipulating `store.state.category.current_product_query` somewhere. +- [here](https://github.com/patzick/vue-storefront/commit/a97eb11868de2915e86d57c4279caf944d4de422) are all changes in default themes Backward compatibility - to reverse to the 1.0-1.6 behavior please set: - set `config.server.disableLocalStorageQueriesCache` = `false`, @@ -144,11 +148,7 @@ Required action: Add moved content and remove core import. In case of additional - [`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 -<<<<<<< HEAD -- [`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() -======= - [`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()` ->>>>>>> main/develop - [`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 diff --git a/src/modules/index.ts b/src/modules/index.ts index 7e5d3fbef3..7709468d6f 100644 --- a/src/modules/index.ts +++ b/src/modules/index.ts @@ -21,20 +21,30 @@ import { PaymentCashOnDelivery } from './payment-cash-on-delivery'; import { RawOutputExample } from './raw-output-example' import { Magento2CMS } from './magento-2-cms' -// Some modules that still needs API refactoring are temporary registered in core -// This is how you can adjust any module with application-specific behavior -// const extendedExample = { -// key: 'example', -// afterRegistration: function(isServer, config) { -// console.info('Hello, im extended now!') + +// This is how you can extend any of VS modues +// const extendCartVuex = { +// actions: { +// load () { +// console.info('New load function') +// } // } -// } +// } -// extendModule(extendedExample) +// const cartExtend = { +// key: 'cart', +// afterRegistration: function(isServer, config) { +// console.info('New afterRegistration hook') +// }, +// store: { modules: [{ key: 'cart', module: extendCartVuex }] }, +// } + +// extendModule(cartExtend) /** * Some of the modules are registered lazily only when components from module are appearing on current page. * If you want to use this modules in pages without it's components you need to remember about registering module first + * In VS 1.8 this modules will be semlessly lazyLoaded after proper action dispatch * - Wishlist */ export const registerModules: VueStorefrontModule[] = [ diff --git a/src/modules/module-template/index.ts b/src/modules/module-template/index.ts index 4c78752d01..2c53165f6e 100644 --- a/src/modules/module-template/index.ts +++ b/src/modules/module-template/index.ts @@ -17,7 +17,7 @@ export const cacheStorage = initCacheStorage(KEY) // Put everything that should extend the base app here so it can be later registered as VS module const moduleConfig: VueStorefrontModuleConfig = { key: KEY, - store: { modules: [{ key: KEY, module }, { key: 'mailchimp', module: extendMailchimp }], plugin }, + store: { modules: [{ key: KEY, module }], plugin }, beforeRegistration, afterRegistration, router: { beforeEach, afterEach } diff --git a/src/modules/module-template/store/mailchimp/index.ts b/src/modules/module-template/store/mailchimp/index.ts deleted file mode 100644 index 024d9be6c0..0000000000 --- a/src/modules/module-template/store/mailchimp/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -// With store.extend property you can extend currently existing VS modules. -// Vuex Module below will be merged with the one with the same key property. -// You can add new properties to currently existing stores or override existing ones just by using the same name -// In this example we will override mailchimp vuex store -import { Module } from 'vuex' - -// you can use mailchimp state instead of any -export const extendMailchimp: Module = { - state: { - addedproperty: 'Hello!' - }, - actions: { - unsubscribe () { - // mailchimp module 'unsubscribe' action will be overwritten by this one - console.info('Hello from mailchimp module extension! Now this action is broken ;o') - }, - logHello () { - // this action will be added to mailchimp vuex module - console.info('Hello!') - } - } -} \ No newline at end of file diff --git a/src/modules/payment-backend-methods/hooks/afterRegistration.ts b/src/modules/payment-backend-methods/hooks/afterRegistration.ts index 1ba3d863da..38aac0de11 100644 --- a/src/modules/payment-backend-methods/hooks/afterRegistration.ts +++ b/src/modules/payment-backend-methods/hooks/afterRegistration.ts @@ -1,9 +1,14 @@ import * as types from './../store/mutation-types' export function afterRegistration(Vue, config, store, isServer) { + + let correctPaymentMethod = false + // Place the order. Payload is empty as we don't have any specific info to add for this payment method '{}' const placeOrder = function () { - Vue.prototype.$bus.$emit('checkout-do-placeOrder', {}) + if (correctPaymentMethod) { + Vue.prototype.$bus.$emit('checkout-do-placeOrder', {}) + } } if (!Vue.prototype.$isServer) { @@ -12,15 +17,15 @@ export function afterRegistration(Vue, config, store, isServer) { store.commit('payment-backend-methods/' + types.SET_BACKEND_PAYMENT_METHODS, methods) }) + Vue.prototype.$bus.$on('checkout-before-placeOrder', placeOrder) + // Mount the info component when required. Vue.prototype.$bus.$on('checkout-payment-method-changed', (paymentMethodCode) => { let methods = store.state['payment-backend-methods'].methods if (methods !== null && methods.find(item => item.code === paymentMethodCode)) { - // Register the handler for what happens when they click the place order button. - Vue.prototype.$bus.$on('checkout-before-placeOrder', placeOrder) + correctPaymentMethod = true } else { - // unregister the extensions placeorder handler - Vue.prototype.$bus.$off('checkout-before-placeOrder', placeOrder) + correctPaymentMethod = false } }) } diff --git a/src/themes/default/components/core/Notification.vue b/src/themes/default/components/core/Notification.vue index 17b6863894..6f4ab10b43 100644 --- a/src/themes/default/components/core/Notification.vue +++ b/src/themes/default/components/core/Notification.vue @@ -4,7 +4,7 @@