/woocommerce

Webshop with Vue and Woocommerce REST API. Tests

Primary LanguageJavaScript

M.W.E. (Manegame WooCommerce Engine)

What is this for?

WooCommerce Vuejs Vuejs

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

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