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/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/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/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 @@