Routes

By default, these routes are required:

  • cart.index: Shopping cart page
  • collection.collection: Show all collections
  • collection.detail: Collection detail page
  • home.index: Home page
  • page.collection: Show list of pages
  • page.detail: Show page detail
  • product.collection: Show all of products and search tool
  • product.detail: Product detail page

These routes are optional, they're pre-defined in case you didn't define them

  • payment.successful: Payment successful page (Thank you page)
  • payment.cancelled: Payment cancelled page

You will have to create a view component for each route. The recommended structure is:

// You can feel free to organize your structure by your way
src/
    ...
    views/
        cart/
            Index.vue
        collection/
            Collection.vue
            Detail.vue
        home/
            Index.vue
        page/
            Collection.vue
            Detail.vue
        payment/
            Successful.vue
            Cancelled.vue
        product/
            detail-components/
                Images.vue
                Option.vue
            Collection.vue
            Detail.vue

Now open src/route.js, import your view components and define your routes. Your src/router.js would look like this:

import Vue from 'vue'
import Router from 'vue-router'

// Import view components
import Cart from '@/views/cart/Index';
import CollectionCollection from '@/views/collection/Collection';
import CollectionDetail from '@/views/collection/Detail';
import Home from '@/views/home/Index';
import PageCollection from '@/views/page/Collection';
import PageDetail from '@/views/page/Detail';
import PaymentSuccessful from '@/views/payment/Successful';
import PaymentCancelled from '@/views/payment/Cancelled';
import ProductCollection from '@/views/product/Collection';
import ProductDetail from '@/views/product/Detail';

// Import hiweb base
import hiweb from 'hiweb-vue-base-storefront';

Vue.use(Router)

// Get hiweb routes helper
const routes = hiweb.routes;

export default new Router({
  mode: 'history',
  routes: [
    ...routes.routes({
      'cart.index': Cart,
      'collection.collection': CollectionCollection,
      'collection.detail': CollectionDetail,
      'home.index': Home,
      'page.collection': PageCollection,
      'page.detail': PageDetail,
      'payment.successful': PaymentSuccessful,
      'payment.cancelled': PaymentCancelled,
      'product.collection': ProductCollection,
      'product.detail': ProductDetail
    })
  ]
})

Next, we'll learn about how to using hiweb's mixins for your view component