M.W.E. (Manegame WooCommerce Engine)

What is this for?

With this setup you can make a highly customizable webshop experience combining the backend power of established Woocommerce and frontend power of the Vue.js framework

Features

• Payment options (expandable)

  • Credit Card via Stripe

• Woocommerce features in backend

  • stock keeping
  • variable products (diff sizes, colors, etc.)

• Email customers with Sendgrid

  • get notified when someone places a new order
  • email your customers with e-mail templates made to fit your need

What you need to start with

• Vuejs frontend including vuex for state management
• A Wordpress installation on an SSL-secured server (HTTPS)
• The MANEGAME WooCommerce REST Payments endpoint plugin

Setup Wordpress

1. Install and activate beforementioned Wordpress plugins

Woocommerce

1. Follow install instructions
2. Enable REST API
3. Keys

• Sendgrid for mail

• Custom endpoint for payments

Setup Vue side

Wildcard SSL certificate for secure payment (€115 for two years inc. VAT)

vue (+ wp + woocommerce)

Based on vue-cli/webpack

Build Setup

# install dependencies with Yarn (yarnpkg.com)
yarn

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

Formatting

prettier + standard

(S)CSS method

BEM

Recommended editor

VS code

Vue-specific style guide

Vue Style Guide

Useful libraries/components

• swiper
• fuse.js
• vue-slideout
• vue-scrollto
• bulma
• perfect-scrollbar
• reframe.js
• date-fns