Vue Storefront for Shopware 6

ℹ️ Try the native solution first -> visit the official shopware-pwa repository 💙

---

This project is on the early stages of development. However it's probably OK for some limited production use. Expect some features that still requires development/bug fixing. See the Roadmap section.

Vue Storefront is a extremly fast and customizable frontend framework for eCommerce. Based on Vue.js, leverages the Headless architecture approach. With Vue Storefront You could build the stunning UI interfaces, increase the Conversion Rates, improve the UX. Now it's available for Shopware 6!.

Make the eCommerce development Fun Again. It's easy to do with Shopware 6 + Vue Storefront :-)

Made with ❤️ by Vue Storefront team.

What makes it unique?

This projects bring You the Shopware 6 support as a backend platform for Vue Storefront - first Progressive Web App for e-Commerce.

Vue Storefront is a standalone PWA storefront for your eCommerce. It leverages the Headless Architecture and lets You make the most of the modern Shopware 6 Storefront API.

Here are the key characteristics of Vue Storefront for Shopware:

• Full product, categories, attributes + multimedia indexing.
• Shopping cart with dynamic totals + promo rules applied,
• Checkout with the dynamic shipping methods and 'Cash on delivery' payment method,
• 100% offline support - via in-browser database + caching,
• High speed with local caching (Service Workers + IndexedDB); avg. server response time < 0.3s; avg client-side rendering time < 2s,
• Offline Orders support (via in-browser queue),
• Single Page App User Experience with Server Side Rendering support for SEO,
• Native app features - install on Home Screen (iOS, Android, Chrome), push notifications (via customization),
• NoSQL/ElasticSearch database backend,
• Modern Vue.js based frontend - easy to design and customize, atomic-design, design-system backed,
• It's a Framework - customizable via Extensions, Themes, easy to update with separated Core,

This integration is not finished and it's not supporting all Shopware6 features. See the Roadmap section below.

The To-Do list includes:

• Add support for configurable products (#4)
• Add the on-demand indexeing capabilities (#5)
• Add the order History support for the user account (#6)
• Add the support for online payment methods (#7)
• Add the CMS integration (#8)
• ...

Roadmap

Based on the success of shopware2vuestorefront integration Shopware and Divante are working together on the next version of enhanced, native and dedicated PWA for Shopware. It will be Open Source (MIT) and will be released in Q2 2020.

This project is no longer actively supported by Vue Storefront. It will remain available open source, however we recommend using the official Shopware PWA, powered by Vue Storefront, which is currently being build. More information can be found on FAQ.

Contributors

We are looking for contributors and agencies willing to join us and build the best Frontend Experience for Shopware!

Read the contributing guide and start by creating Your first Pull Request!

See it in action

Try out our open demo and if you like it first give us some star on Github ★ and then contact us on Slack or via [email protected]. This demo site is connected to Shopware 6 with shopping carts and users synchronization so You can make an order (which unfortunatelly won't be shipped ;P). If You like to learn more or contribute please do contact us.

How to try it?

Feel free to check out. In order to have the Shopware 6 PWA up and running on Your local host You need to install the Vue Storefront first.

Install Vue Storefront

Please do install the Vue Storefront using the official Installer. Make Sure that Vue Storefront is running with the default demo database on http://localhost:3000

git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront
cd vue-storefront
yarn
yarn installer

Download the Indexer and Api Extension

Vue Storefornt integration always requires two steps.

First - Integrate the Dynamic Requests calls

... requests like user login, shopping cart synchronization must find out the way to Your Shopware 6 backend. Vue Storefront API is in charge of sending these requests and all You need is to setup the Shopware connector in it.

Download a *.zip with the content of this repository (vsf-api-extension and vsf-shopware-indexer) and unpack the folders in the same parent directory Your vue-storefront and vue-storefront-api folders are located.

cd ..
wget https://github.com/DivanteLtd/shopware2vuestorefront/archive/master.zip
unzip master

Then, copy the content of vsf-api-extension/* to vue-storefront-api/src/platform/shopware

mkdir vue-storefront-api/src/platform/shopware
cp vsf-api-extension/* vue-storefront-api/src/platform/shopware/

Change the vue-storefront-api/config/local.json setting the platform to shopware. In the end - set the Shopware 6 API credentials in the vue-storefront-api/config/local.json.

Example shopware credentials inside vue-storefront-api/config/local.json

...
"shopware": {
     "imgUrl": "",
     "assetPath":"",
     "magentoUserName": "",
     "magentoUserPassword": "",
     "httpUserName": "",
     "httpUserPassword": "",
     "api": {
         "url": "https://yourshop.biz/api",
         "accessToken": "SWxxxxxxxxxxxxxG"
     },  
     "url":"https://yourshop.biz"
}
...

Second - Configure indexer and index the products, categories and other static elements

The second part of the integration is product's catalog which should be indexed into ElasticSearch index - which is the local database Vue Storefront is using in order to display the product catalog.

Follow the instructions located in vsf-shopware-indexer/README.md and then move to the next steps:

Now, please do configure the vsf-shopware-indexer by copying the vsf-shopware-indexer/config.js.dist to vsf-shopware-indexer/config.js and setting the proper API credentials. 9. Install the dependencies: cd vsf-shopware-indexer/; yarn install 8. Now You need to index Your local ElasticSearch index with the products from Shopware instance by running the:

node vsf-shopware-indexer/cli.js reindex attribute
node vsf-shopware-indexer/cli.js reindex category

Take a look for the attributes' IDs (for instance: color and size), and put them into vsf-shopware-indexer/config.js in the map section, adn then:

node vsf-shopware-indexer/cli.js reindex product

Then make sure You applied the proper data schema on Your brand-new Elastic index by running the: cd vue-storefront-api; yarn db rebuild

Restart Your Vue Storefront

Kill all Your node processes with the killall node (in order to apply the config changes). Run the yarn dev command in both: vue-storefront-api and vue-storefront folders.

Please do contact us in the case of any issues with the installation procedure.

More on Vue Storefront

Technical Webcast #1 - demo and the architecture

Join the community on Slack

If you have any questions or ideas feel free to join our slack: https://vuestorefront.slack.com via invitation link

Contributing

If you want to help shaping future of Vue and Shopware we'd be more than happy if you want to contribute! Here you can find all the required information.