Skip to content
Merged

Develop #2198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
fee8239
Add Absolute Web Services Partner
tom-aniol Dec 7, 2018
87b0995
fixed bug with compiling of Nofications.vue
Dec 11, 2018
095e530
Merge pull request #2079 from ladrua/master
pkarw Dec 12, 2018
1da8147
re-add nginx config in docs, update link to master branch
Dec 12, 2018
43c6605
fix double slash in github link
Dec 12, 2018
011ab77
Update README.md
pkarw Dec 12, 2018
95e20e0
fixed bug with toggle wishlist
Dec 12, 2018
12498cd
Merge pull request #2086 from shkodasv/master
pkarw Dec 13, 2018
0a971c1
Merge pull request #2080 from janmyszkier/jan/fix_nginx_config_link
pkarw Dec 13, 2018
c813b26
findConfigurableChildAsync - fix checking stock for configurable child
Dec 18, 2018
4672d29
Merge pull request #2097 from afirlejczyk/bugfix/findConfigurableChil…
pkarw Dec 18, 2018
dd524b1
Update README.md
filrak Dec 23, 2018
8ae4a27
Update README.md
filrak Dec 23, 2018
ad2d0c6
Update README.md
filrak Dec 24, 2018
fc15901
Fix user logout (clear wishlist and checkout user fields)
Dec 27, 2018
8c2dc63
Merge pull request #2117 from sniffy1988/bugfix/fix-user-logout
pkarw Dec 27, 2018
9268119
Update production-setup.md
Jan 3, 2019
651d980
Merge pull request #2125 from janmyszkier/patch-1
pkarw Jan 3, 2019
cc0ce3c
Update production-setup.md
Jan 3, 2019
5f6376e
Merge pull request #2126 from janmyszkier/patch-3
pkarw Jan 3, 2019
9ca5081
Add DevMe Tokyo in Readme
tom-aniol Jan 4, 2019
1304eec
fix multiple placing order invocation after changing payment methods
patzick Jan 6, 2019
6629242
Merge pull request #2133 from patzick/bugfix/payment-method-change-ca…
pkarw Jan 6, 2019
8d68bf4
updated docs config
filrak Jan 7, 2019
08c5aa1
Update config.js
filrak Jan 7, 2019
9eef209
Create CNAME
filrak Jan 7, 2019
b650c3c
Update config.js
filrak Jan 7, 2019
32d980b
corrected master docs
filrak Jan 7, 2019
f2bb7e8
Merge pull request #2138 from filrak/master
filrak Jan 7, 2019
6930831
Update config.js
filrak Jan 7, 2019
e482893
Update config.js
filrak Jan 7, 2019
f46ab60
Create introduction.md
filrak Jan 7, 2019
b8cb929
Update introduction.md
filrak Jan 7, 2019
1943aff
Update config.js
filrak Jan 7, 2019
4accc16
Update introduction.md
filrak Jan 7, 2019
027ed90
Update introduction.md
filrak Jan 7, 2019
4bb1ca0
Update introduction.md
filrak Jan 7, 2019
07ddff7
Update introduction.md
filrak Jan 7, 2019
2c3ce4d
Update introduction.md
filrak Jan 7, 2019
2b2f389
Update introduction.md
filrak Jan 7, 2019
2c1c472
Update introduction.md
filrak Jan 7, 2019
c7f45d2
Update introduction.md
filrak Jan 7, 2019
7aa96c9
Update introduction.md
filrak Jan 7, 2019
d7cfb3f
Update amp.md
filrak Jan 8, 2019
3f1775d
Update introduction.md
filrak Jan 9, 2019
1047a8a
Update Readme
tom-aniol Jan 9, 2019
bb6d6bc
Merge branch 'develop' into master
patzick Jan 15, 2019
93fcab3
Merge pull request #2190 from DivanteLtd/master
patzick Jan 15, 2019
97ad959
Module extending made easier / bug corrected
filrak Jan 15, 2019
bbc6689
extendModule commented out
filrak Jan 15, 2019
7af0e36
Merge branch 'develop' into bugfix-modules
filrak Jan 15, 2019
091b897
Merge pull request #2191 from filrak/bugfix-modules
filrak Jan 15, 2019
655d731
add notes of changes in theme
patzick Jan 15, 2019
7c4fc9a
fix installer imgUrl
patzick Jan 15, 2019
f0ec91b
Merge pull request #2193 from patzick/add-notes
filrak Jan 15, 2019
48e9583
remove debugger statement
filrak Jan 15, 2019
64e84b9
Merge pull request #2197 from filrak/release-1-7
filrak Jan 15, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
![Branch Develop](https://img.shields.io/badge/dev%20branch-develop-blue.svg)
<a href="https://join.slack.com/t/vuestorefront/shared_invite/enQtMzA4MTM2NTE5NjM2LTI1M2RmOWIyOTk0MzFlMDU3YzJlYzcyYzNiNjUyZWJiMTZjZjc3MjRlYmE5ZWQ1YWRhNTQyM2ZjN2ZkMzZlNTg">![Branch Develop](https://img.shields.io/badge/community%20chat-slack-FF1493.svg)</a>

Vue Storefront is a standalone PWA storefront for your eCommerce, possible to connect with any eCommerce backend (eg. Magento, <a href="https://github.com/DivanteLtd/coreshop-vsbridge">Pimcore/CoreShop</a>, 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, <a href="https://github.com/DivanteLtd/coreshop-vsbridge">Pimcore/CoreShop</a>, [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.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -258,7 +274,7 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
<td align="center" valign="middle">
<a href="http://www.summasolutions.net">
<img
src="http://www.summasolutions.net/sites/all/themes/summa2015/images/logo-tablet.jpg"
src="https://divante.co/partners/Vue-Storefront/summa_logo_horizontal_rgb.jpg"
alt="Summa Solutions"
width="150"
>
Expand Down Expand Up @@ -500,14 +516,29 @@ Vue Storefront is a Community effort brought to You by our great Core Team and s
</a>
</td>
<td align="center" valign="middle">
<a href="">
<a href="https://www.absolutewebservices.com">
<img
src="https://divante.co/partners/Vue-Storefront/absolute-logo.png"
alt="Absolute Web Services"
height="50"
>
</a>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<a href="https://www.devmetokyo.com/">
<img
src=""
alt=""
src="https://divante.co/partners/Vue-Storefront/devMeTokyo-logo.png"
alt="DevMe Tokyo"
height="50"
>
</a>
</td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
</tr>
</tbody>
</table>
Expand Down
6 changes: 5 additions & 1 deletion core/lib/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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')()
}

Expand Down
8 changes: 4 additions & 4 deletions core/modules/catalog/helpers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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
Expand Down Expand Up @@ -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
}
}
Expand Down Expand Up @@ -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) {
Expand Down
4 changes: 4 additions & 0 deletions core/modules/user/store/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,10 @@ const actions: ActionTree<UserState, RootState> = {
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
Expand Down
2 changes: 1 addition & 1 deletion core/scripts/installer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion docs/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
module.exports = {
base: '/vue-storefront/',
base: '/',
head: [['link', { rel: 'icon', href: '/favicon.png' }]],
themeConfig: {
repo: 'DivanteLtd/vue-storefront',
Expand Down Expand Up @@ -88,6 +88,7 @@ module.exports = {
title: 'Extensions',
collapsable: false,
children: [
'extensions/introduction',
'extensions/extending-api',
'extensions/extending-server-side-routes',
],
Expand Down
1 change: 1 addition & 0 deletions docs/CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
docs.vuestorefront.io
1 change: 1 addition & 0 deletions docs/deploy.sh
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
set -e

# build
npm i
npm run docs:build

# navigate into the build output directory
Expand Down
20 changes: 20 additions & 0 deletions docs/guide/extensions/introduction.md
Original file line number Diff line number Diff line change
@@ -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.
Original file line number Diff line number Diff line change
@@ -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/;
}
}
13 changes: 10 additions & 3 deletions docs/guide/installation/production-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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):

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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:
Expand Down
23 changes: 20 additions & 3 deletions docs/guide/modules/introduction.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
Loading