├── src
    ├── favicon.png
    ├── styles
    │   ├── main.scss
    │   ├── _notification.scss
    │   ├── _custom.scss
    │   └── _variables.scss
    ├── layouts
    │   └── Default.vue
    ├── templates
    │   ├── Page.vue
    │   ├── Collection.vue
    │   └── Product.vue
    ├── components
    │   ├── Account
    │   │   ├── AccountDetails.vue
    │   │   └── AccountOrders.vue
    │   ├── Cart
    │   │   ├── CartCheckoutForm.vue
    │   │   └── CartItemsTable.vue
    │   ├── Login
    │   │   ├── Reset.vue
    │   │   ├── Login.vue
    │   │   └── Register.vue
    │   └── Navbar.vue
    ├── pages
    │   ├── Login.vue
    │   ├── Collections.vue
    │   ├── Account.vue
    │   ├── Cart.vue
    │   └── Index.vue
    ├── main.js
    └── store.js
├── .gitignore
├── .eslintrc.js
├── gridsome.server.js
├── LICENSE
├── package.json
├── README.md
└── gridsome.config.js


/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/travis-r6s/gridsome-starter-shopify-advanced/HEAD/src/favicon.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.log
 2 | .cache
 3 | .DS_Store
 4 | src/.temp
 5 | node_modules
 6 | dist
 7 | .env*
 8 | .env.*
 9 | static/*
10 | 


--------------------------------------------------------------------------------
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 | @import "./custom";
3 | @import "bulma/bulma";
4 | 
5 | // Plugins
6 | @import "./notification"
7 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['travisreynolds-vue'],
 3 |   rules: {
 4 |     'vue-a11y/label-has-for': [ 2, {
 5 |       required: {
 6 |         some: [ 'nesting', 'id' ]
 7 |       },
 8 |       allowChildren: false
 9 |     }],
10 |     'vue/no-v-html': 0
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/gridsome.server.js:
--------------------------------------------------------------------------------
1 | // Server API makes it possible to hook into various parts of Gridsome
2 | // on server-side and add custom data to the GraphQL data layer.
3 | // Learn more: https://gridsome.org/docs/server-api
4 | 
5 | // Changes here require a server restart.
6 | // To restart press CTRL + C in terminal and run `gridsome develop`
7 | 


--------------------------------------------------------------------------------
/src/layouts/Default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container-fluid">
 3 |     <notifications />
 4 |     <Navbar />
 5 |     <section class="section">
 6 |       <slot />
 7 |     </section>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | // Components
13 | import Navbar from '@/components/Navbar'
14 | 
15 | export default {
16 |   components: { Navbar }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/templates/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="container has-text-centered">
 4 |       <h1 class="title">
 5 |         {{ page.title }}
 6 |       </h1>
 7 |       <hr>
 8 |       <br>
 9 |       <div
10 |         class="content"
11 |         v-html="page.body" />
12 |     </div>
13 |   </Layout>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'Page',
19 |   metaInfo () {
20 |     return {
21 |       title: this.page.title
22 |     }
23 |   },
24 |   computed: {
25 |     page () { return this.$page.shopifyPage }
26 |   }
27 | }
28 | </script>
29 | 
30 | <page-query>
31 | query Page ($id: ID!) {
32 |   shopifyPage (id: $id) {
33 |     id
34 |     title
35 |     body
36 |   }
37 | }
38 | </page-query>
39 | 


--------------------------------------------------------------------------------
/src/components/Account/AccountDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="column is-half">
 3 |     <h4 class="subtitle is-family-secondary">
 4 |       {{ displayName }}
 5 |     </h4>
 6 |     <p>{{ customer.email }}</p>
 7 |     <br>
 8 |     <div v-if="customer.defaultAddress">
 9 |       <p
10 |         v-for="(line, i) in customer.defaultAddress.formatted"
11 |         :key="i">
12 |         {{ line }}
13 |       </p>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   props: {
21 |     customer: {
22 |       type: Object,
23 |       default: () => ({})
24 |     }
25 |   },
26 |   computed: {
27 |     displayName () { return this.customer.firstName ? `${this.customer.firstName} ${this.customer.lastName}` : this.customer.displayName }
28 |   }
29 | }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Travis Reynolds
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/pages/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <notifications
 4 |       group="auth"
 5 |       position="top center" />
 6 |     <transition-group name="fade">
 7 |       <LoginForm
 8 |         v-if="form ==='login'"
 9 |         key="login"
10 |         @change="form = $event" />
11 |       <RegisterForm
12 |         v-if="form ==='register'"
13 |         key="register"
14 |         @change="form = $event" />
15 |       <ResetForm
16 |         v-if="form ==='reset'"
17 |         key="reset"
18 |         @change="form = $event" />
19 |     </transition-group>
20 |   </Layout>
21 | </template>
22 | 
23 | <script>
24 | // Components
25 | import LoginForm from '@/components/Login/Login'
26 | import RegisterForm from '@/components/Login/Register'
27 | import ResetForm from '@/components/Login/Reset'
28 | 
29 | export default {
30 |   name: 'Login',
31 |   components: { LoginForm, RegisterForm, ResetForm },
32 |   data: () => ({
33 |     form: 'login'
34 |   })
35 | }
36 | </script>
37 | 
38 | <style lang="scss" scoped>
39 | .fade-enter-active, .fade-leave-active {
40 |   transition: opacity .2s;
41 | }
42 | .fade-enter, .fade-leave-to {
43 |   opacity: 0;
44 | }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gridsome-starter-shopify-account",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "gridsome build",
 6 |     "develop": "gridsome develop",
 7 |     "explore": "gridsome explore"
 8 |   },
 9 |   "dependencies": {
10 |     "@gridsome/plugin-critical": "^0.1.6",
11 |     "@gridsome/plugin-google-analytics": "^0.1.1",
12 |     "@gridsome/plugin-sitemap": "^0.4.0",
13 |     "apollo-boost": "^0.4.9",
14 |     "bulma": "^0.9.0",
15 |     "currency.js": "^1.2.2",
16 |     "graphql-tag": "^2.10.3",
17 |     "gridsome": "^0.7.18",
18 |     "gridsome-plugin-flexsearch": "^1.0.1",
19 |     "gridsome-plugin-guess-js": "^0.1.1",
20 |     "gridsome-plugin-manifest": "^0.3.5",
21 |     "gridsome-plugin-purgecss": "^1.0.12",
22 |     "gridsome-plugin-service-worker": "^0.1.5",
23 |     "gridsome-source-shopify": "^0.1.13",
24 |     "isomorphic-fetch": "^2.2.1",
25 |     "js-cookie": "^2.2.1",
26 |     "typeface-karla": "^0.0.72",
27 |     "typeface-prata": "^0.0.72",
28 |     "v-lazy-image": "^1.4.0",
29 |     "vue-apollo": "^3.0.3",
30 |     "vue-notification": "^1.3.20",
31 |     "vuex": "^3.5.1",
32 |     "vuex-persist": "^2.2.0"
33 |   },
34 |   "devDependencies": {
35 |     "eslint-config-travisreynolds-vue": "1.1.8",
36 |     "node-sass": "^4.14.1",
37 |     "sass-loader": "^9.0.2"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/styles/_notification.scss:
--------------------------------------------------------------------------------
 1 | .vue-notification-group {
 2 |   display: block;
 3 |   position: fixed;
 4 |   z-index: 5000;
 5 | }
 6 | 
 7 | .vue-notification-wrapper {
 8 |   display: block;
 9 |   overflow: hidden;
10 |   width: 100%;
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | 
15 | .notification-title {
16 |   font-weight: 600;
17 | }
18 | 
19 | .vue-notification-template {
20 |   display: block;
21 |   box-sizing: border-box;
22 |   background: white;
23 |   text-align: left;
24 | }
25 | 
26 | .vue-notification {
27 |   display: block;
28 |   box-sizing: border-box;
29 |   text-align: left;
30 |   font-size: 12px;
31 |   padding: 10px;
32 |   margin: 0 5px 5px;
33 | 
34 |   color: white;
35 |   background: #44A4FC;
36 |   border-left: 5px solid #187FE7;
37 | }
38 | 
39 | .vue-notification.primary {
40 |   background: $primary;
41 |   border-left-color: $primary;
42 | }
43 | 
44 | .vue-notification.warn {
45 |   background: #ffb648;
46 |   border-left-color: #f48a06;
47 | }
48 | 
49 | .vue-notification.error {
50 |   background: #E54D42;
51 |   border-left-color: #B82E24;
52 | }
53 | 
54 | .vue-notification.success {
55 |   background: #68CD86;
56 |   border-left-color: #42A85F;
57 | }
58 | 
59 | .vn-fade-enter-active, .vn-fade-leave-active, .vn-fade-move  {
60 |   transition: all .5s;
61 | }
62 | 
63 | .vn-fade-enter, .vn-fade-leave-to {
64 |   opacity: 0;
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/Account/AccountOrders.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="column is-half">
 3 |     <h4 class="subtitle is-family-secondary">
 4 |       Order history
 5 |     </h4>
 6 |     <div>
 7 |       <p v-if="!orders.length">
 8 |         You have no orders.
 9 |       </p>
10 |       <table
11 |         v-else
12 |         class="table is-fullwidth">
13 |         <thead>
14 |           <tr>
15 |             <th>Order #</th>
16 |             <th>Total Items</th>
17 |             <th>Total Price</th>
18 |             <th />
19 |           </tr>
20 |         </thead>
21 |         <tbody>
22 |           <tr
23 |             v-for="order in orders"
24 |             :key="order.id">
25 |             <th>{{ order.name }}</th>
26 |             <th>{{ order.lineItems.edges.length }}</th>
27 |             <th>{{ formatCurrency(order.totalPrice) }}</th>
28 |             <th>
29 |               <a
30 |                 :href="order.statusUrl"
31 |                 target="_blank"
32 |                 rel="noreferrer">
33 |                 View Order
34 |               </a>
35 |             </th>
36 |           </tr>
37 |         </tbody>
38 |       </table>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script>
44 | export default {
45 |   props: {
46 |     orders: {
47 |       type: Array,
48 |       default: () => []
49 |     }
50 |   },
51 |   methods: {
52 |     formatCurrency ({ currencyCode, amount }) {
53 |       return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currencyCode }).format(amount)
54 |     }
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/styles/_custom.scss:
--------------------------------------------------------------------------------
 1 | // Button
 2 | .button {
 3 | 	font-weight: $weight-semibold;
 4 | 	text-transform: uppercase;
 5 | 	font-size: $size-small !important;
 6 | 	height: 50px !important;
 7 | }
 8 | 
 9 | // Navbar {
10 | .navbar {
11 | 	text-transform: uppercase;
12 | 	font-size: 0.8rem;
13 | }
14 | 
15 | // Cart
16 | .cart {
17 | 	.input {
18 | 		height: 50px !important;
19 | 	}
20 | 	.field.has-addons {
21 | 		.button {
22 | 			padding: 0 25px !important;
23 | 			border: 1px solid $grey-lighter;
24 | 			&.is-white {
25 | 				border: none;
26 | 			}
27 | 		}
28 | 	}
29 | 	.item-total {
30 | 		padding-top: 14px;
31 | 	}
32 | }
33 | 
34 | // Loading spinner - loading.io/css
35 | .lds-ring {
36 |   display: inline-block;
37 |   position: relative;
38 |   width: 80px;
39 | 	height: 80px;
40 | 	div {
41 | 		box-sizing: border-box;
42 | 		display: block;
43 | 		position: absolute;
44 | 		width: 64px;
45 | 		height: 64px;
46 | 		margin: 8px;
47 | 		border: 8px solid #fff;
48 | 		border-radius: 50%;
49 | 		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
50 | 		border-color: $black transparent transparent transparent;
51 | 		&:nth-child(1) {
52 | 			animation-delay: -0.45s;
53 | 		}
54 | 		&:nth-child(2) {
55 | 			animation-delay: -0.3s;
56 | 		}
57 | 		&:nth-child(3) {
58 | 			animation-delay: -0.15s;
59 | 		}
60 | 	}
61 | }
62 | 
63 | 
64 | @keyframes lds-ring {
65 |   0% {
66 |     transform: rotate(0deg);
67 |   }
68 |   100% {
69 |     transform: rotate(360deg);
70 |   }
71 | }
72 | 
73 | // Lazy Image
74 | .v-lazy-image {
75 |   filter: blur(10px);
76 |   transition: filter 0.7s;
77 | }
78 | .v-lazy-image-loaded {
79 |   filter: blur(0);
80 | }
81 | 


--------------------------------------------------------------------------------
/src/components/Cart/CartCheckoutForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="checkout">
 3 |     <div class="field is-grouped is-grouped-right">
 4 |       <div class="field has-addons">
 5 |         <div class="control">
 6 |           <label
 7 |             for="email"
 8 |             class="label">
 9 |             <input
10 |               id="email"
11 |               v-model="email"
12 |               class="input"
13 |               type="email"
14 |               placeholder="Your email address"
15 |               required>
16 |           </label>
17 |         </div>
18 |         <div class="control">
19 |           <button
20 |             :class="{'is-loading': isLoading}"
21 |             type="submit"
22 |             class="button is-primary">
23 |             Checkout
24 |           </button>
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </form>
29 | </template>
30 | 
31 | <script>
32 | // Packages
33 | import gql from 'graphql-tag'
34 | 
35 | export default {
36 |   props: {
37 |     isLoading: {
38 |       type: Boolean,
39 |       default: false
40 |     }
41 |   },
42 |   data: () => ({ email: '' }),
43 |   async mounted () {
44 |     if (this.$store.getters.isAuthenticated) {
45 |       const { data } = await this.$apollo.query({
46 |         query: gql`query CustomerDetails ($accessToken: String!) {
47 |           customer (customerAccessToken: $accessToken) {
48 |             id
49 |             email
50 |           }
51 |         }`,
52 |         variables: { accessToken: this.$store.getters.accessToken }
53 |       })
54 |       if (data && data.customer) {
55 |         this.email = data.customer.email
56 |       }
57 |     }
58 |   },
59 |   methods: {
60 |     checkout () {
61 |       this.$emit('checkout', this.email)
62 |     }
63 |   }
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // This is the main.js file. Import global CSS and scripts here.
 2 | // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 3 | 
 4 | // Layouts
 5 | import DefaultLayout from '~/layouts/Default.vue'
 6 | 
 7 | // Plugins
 8 | import Notifications from 'vue-notification/dist/ssr.js'
 9 | import { VLazyImagePlugin } from 'v-lazy-image'
10 | import VueApollo from 'vue-apollo'
11 | import createStore from './store'
12 | 
13 | // Dependencies
14 | import ApolloClient from 'apollo-boost'
15 | import fetch from 'isomorphic-fetch'
16 | 
17 | // Styles
18 | import '~/styles/main.scss'
19 | import 'typeface-karla'
20 | import 'typeface-prata'
21 | 
22 | export default function (Vue, { appOptions, isClient, router }) {
23 |   // Set default layout as a global component
24 |   Vue.component('Layout', DefaultLayout)
25 | 
26 |   // Import global plugins
27 |   Vue.use(Notifications)
28 |   Vue.use(VLazyImagePlugin)
29 |   Vue.use(VueApollo)
30 | 
31 |   // Create Apollo client
32 |   const apolloClient = new ApolloClient({
33 |     fetch,
34 |     uri: `https://${process.env.GRIDSOME_SHOPIFY_STOREFRONT}.myshopify.com/api/2020-04/graphql.json`,
35 |     headers: {
36 |       'X-Shopify-Storefront-Access-Token': process.env.GRIDSOME_SHOPIFY_STOREFRONT_TOKEN
37 |     }
38 |   })
39 | 
40 |   // Add client to vue-apollo provider
41 |   const apolloProvider = new VueApollo({
42 |     defaultClient: apolloClient
43 |   })
44 | 
45 |   // Add provider to vue app
46 |   appOptions.apolloProvider = apolloProvider
47 | 
48 |   // Add Vuex store
49 |   const store = createStore(Vue, { isClient })
50 |   appOptions.store = store
51 | 
52 |   // Authentication & Route handling
53 |   if (isClient) {
54 |     router.beforeEach((to, from, next) => {
55 |       const tokenExists = store.getters.isAuthenticated
56 |       if (to.path.includes('/account') && !tokenExists) next('/login')
57 |       else if (to.path.includes('/login') && tokenExists) next('/')
58 |       else next()
59 |     })
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/pages/Collections.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="container has-text-centered">
 4 |       <h1 class="title is-family-secondary">
 5 |         Collections
 6 |       </h1>
 7 |       <hr>
 8 |       <br>
 9 |       <p v-if="!collections.length">
10 |         No collections available.
11 |       </p>
12 |       <div
13 |         v-if="collections.length"
14 |         class="columns is-multiline">
15 |         <div
16 |           v-for="({ node: collection }) in collections"
17 |           :key="collection.id"
18 |           class="column is-4">
19 |           <div class="card">
20 |             <div class="card-image">
21 |               <figure class="image is-4by3">
22 |                 <v-lazy-image
23 |                   :src="collection.image.src"
24 |                   :src-placeholder="collection.image.placeholder"
25 |                   :alt="collection.image.altText || collection.title" />
26 |               </figure>
27 |             </div>
28 |             <div class="card-content">
29 |               <div class="media">
30 |                 <div class="media-content">
31 |                   <p class="title has-text-centered is-4 is-family-secondary">
32 |                     {{ collection.title }}
33 |                   </p>
34 |                 </div>
35 |               </div>
36 | 
37 |               <div class="field is-grouped is-grouped-centered">
38 |                 <div class="control">
39 |                   <g-link
40 |                     :to="collection.path"
41 |                     class="button is-white-ter">
42 |                     Browse
43 |                   </g-link>
44 |                 </div>
45 |               </div>
46 |             </div>
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   </Layout>
52 | </template>
53 | 
54 | <script>
55 | export default {
56 |   computed: {
57 |     collections () { return this.$page.allShopifyCollection.edges }
58 |   }
59 | }
60 | </script>
61 | 
62 | <page-query>
63 | query ShopifyProducts {
64 |   allShopifyCollection (limit: 100) {
65 |     edges {
66 |       node {
67 |         id
68 |         path
69 |         title
70 |         descriptionHtml
71 |         image {
72 |           altText
73 |           src: transformedSrc(maxWidth: 400, maxHeight: 300, crop: CENTER)
74 |           placeholder: transformedSrc(maxWidth: 100, maxHeight: 75, crop: CENTER)
75 |         }
76 |       }
77 |     }
78 |   }
79 | }
80 | </page-query>
81 | 
82 | <style lang="scss" scoped>
83 | .card {
84 |   box-shadow: unset !important;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/pages/Account.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="hero">
 4 |       <div class="hero-body">
 5 |         <div class="container has-text-centered">
 6 |           <h3 class="title is-family-secondary">
 7 |             Your Account
 8 |           </h3>
 9 |           <div
10 |             v-if="!customer || $apollo.loading"
11 |             class="lds-ring">
12 |             <div /><div /><div /><div />
13 |           </div>
14 |         </div>
15 |       </div>
16 |     </div>
17 |     <div
18 |       v-if="customer"
19 |       class="columns">
20 |       <account-orders :orders="orders" />
21 |       <account-details :customer="customer" />
22 |     </div>
23 |   </Layout>
24 | </template>
25 | 
26 | <script>
27 | // Packages
28 | import gql from 'graphql-tag'
29 | // Components
30 | import AccountOrders from '@/components/Account/AccountOrders'
31 | import AccountDetails from '@/components/Account/AccountDetails'
32 | 
33 | export default {
34 |   name: 'Account',
35 |   components: { AccountOrders, AccountDetails },
36 |   computed: {
37 |     orders () { return this.customer.orders.edges.map(({ node }) => node) }
38 |   },
39 |   apollo: {
40 |     customer: {
41 |       query: gql`query customerOrders ($accessToken: String!) {
42 |         customer (customerAccessToken: $accessToken) {
43 |           displayName
44 |           firstName
45 |           lastName
46 |           email
47 |           defaultAddress {
48 |             address1
49 |             address2
50 |             city
51 |             country
52 |             zip
53 |             formatted(withName: true)
54 |           }
55 |           orders (first: 10) {
56 |             edges {
57 |               node {
58 |                 id
59 |                 name
60 |                 statusUrl
61 |                 lineItems (first: 100) {
62 |                   edges {
63 |                     node {
64 |                       title
65 |                       quantity
66 |                     }
67 |                   }
68 |                 }
69 |                 totalPrice: totalPriceV2 {
70 |                   amount
71 |                   currencyCode
72 |                 }
73 |               }
74 |             }
75 |           }
76 |         }
77 |       }`,
78 |       skip () {
79 |         // Skip query if we have no token - i.e at build time
80 |         return !this.$store.getters.isAuthenticated
81 |       },
82 |       variables () {
83 |         const accessToken = this.$store.getters.accessToken
84 |         return { accessToken }
85 |       }
86 |     }
87 |   }
88 | }
89 | </script>
90 | 


--------------------------------------------------------------------------------
/src/templates/Collection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="container has-text-centered">
 4 |       <h1 class="title is-family-secondary">
 5 |         {{ collection.title }}
 6 |       </h1>
 7 |       <hr>
 8 |       <br>
 9 |       <div class="columns is-multiline">
10 |         <div
11 |           v-for="product in collection.products"
12 |           :key="product.id"
13 |           class="column is-4">
14 |           <div class="card">
15 |             <div class="card-image">
16 |               <figure class="image is-4by3">
17 |                 <v-lazy-image
18 |                   :src="product.images[0].src"
19 |                   :src-placeholder="product.images[0].placeholder"
20 |                   :alt="product.images[0].altText || product.title" />
21 |               </figure>
22 |             </div>
23 |             <div class="card-content has-text-left">
24 |               <div class="media">
25 |                 <div class="media-content">
26 |                   <p class="title is-4 is-family-secondary">
27 |                     {{ product.title }}
28 |                   </p>
29 |                   <p class="subtitle is-6">
30 |                     {{ product.priceRange.minVariantPrice.amount }}
31 |                   </p>
32 |                 </div>
33 |               </div>
34 | 
35 |               <div
36 |                 class="content"
37 |                 v-html="product.descriptionHtml" />
38 |               <div class="field is-grouped is-grouped-right">
39 |                 <div class="control">
40 |                   <g-link
41 |                     :to="product.path"
42 |                     class="button is-primary is-outlined">
43 |                     View Product
44 |                   </g-link>
45 |                 </div>
46 |               </div>
47 |             </div>
48 |           </div>
49 |         </div>
50 |       </div>
51 |     </div>
52 |   </Layout>
53 | </template>
54 | 
55 | <script>
56 | export default {
57 |   computed: {
58 |     collection () { return this.$page.shopifyCollection }
59 |   }
60 | }
61 | </script>
62 | 
63 | <page-query>
64 | query Collection ($id: ID!) {
65 |   shopifyCollection (id: $id) {
66 |     id
67 |     title
68 |     descriptionHtml
69 |     products {
70 |       id
71 |       title
72 |       path
73 |       descriptionHtml
74 |       priceRange {
75 |         minVariantPrice {
76 |           amount(format: true, currency: "GBP")
77 |         }
78 |       }
79 |       images (limit: 1) {
80 |         id
81 |         altText
82 |         src: transformedSrc (maxWidth: 400, maxHeight: 300, crop: CENTER)
83 |         placeholder: transformedSrc(maxWidth: 100, maxHeight: 75, crop: CENTER)
84 |       }
85 |     }
86 |   }
87 | }
88 | </page-query>
89 | 


--------------------------------------------------------------------------------
/src/pages/Cart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Layout>
 3 |     <div class="hero">
 4 |       <div class="hero-body">
 5 |         <div class="container has-text-centered">
 6 |           <h3 class="title is-family-secondary">
 7 |             Cart
 8 |           </h3>
 9 |         </div>
10 |       </div>
11 |     </div>
12 |     <div class="container cart">
13 |       <cart-items-table :cart="cart" />
14 |       <br>
15 |       <cart-checkout-form
16 |         v-if="cart.length"
17 |         :is-loading="isLoading"
18 |         @checkout="checkout" />
19 |       <div
20 |         v-else
21 |         class="container has-text-centered">
22 |         <p>To checkout, add some items to cart.</p>
23 |         <br>
24 |         <g-link
25 |           to="/"
26 |           class="button is-primary is-outlined">
27 |           Browse
28 |         </g-link>
29 |       </div>
30 |     </div>
31 |   </Layout>
32 | </template>
33 | 
34 | <script>
35 | // Packages
36 | import gql from 'graphql-tag'
37 | // Components
38 | import CartItemsTable from '@/components/Cart/CartItemsTable'
39 | import CartCheckoutForm from '@/components/Cart/CartCheckoutForm'
40 | 
41 | export default {
42 |   metaInfo: {
43 |     title: 'Your Cart'
44 |   },
45 |   components: { CartItemsTable, CartCheckoutForm },
46 |   data: () => ({ isLoading: false }),
47 |   computed: {
48 |     cart () { return this.$store.state.cart }
49 |   },
50 |   methods: {
51 |     async checkout (email) {
52 |       if (!this.cart.length) return alert('No items in cart')
53 |       const lineItems = this.cart.map(item => ({ quantity: item.qty, variantId: item.variantId }))
54 | 
55 |       const checkoutInput = { email, lineItems }
56 | 
57 |       try {
58 |         this.isLoading = true
59 |         const { data: { checkoutCreate } } = await this.$apollo.mutate({
60 |           mutation: gql`mutation checkoutCreate($input: CheckoutCreateInput!) {
61 |             checkoutCreate(input: $input) {
62 |               checkout {
63 |                 id
64 |                 webUrl
65 |               }
66 |               checkoutUserErrors {
67 |                 code
68 |                 field
69 |                 message
70 |               }
71 |             }
72 |           }`,
73 |           variables: { input: checkoutInput }
74 |         })
75 |         if (checkoutCreate.checkoutUserErrors.length) throw new Error(checkoutCreate.checkoutUserErrors[ 0 ].message)
76 | 
77 |         window.location = checkoutCreate.checkout.webUrl
78 |       } catch (error) {
79 |         this.isLoading = false
80 |         console.error(error)
81 |         this.$notify({
82 |           title: 'Whoops...',
83 |           type: 'danger',
84 |           message: 'Something went wrong - please try again.'
85 |         })
86 |       }
87 |     }
88 |   }
89 | }
90 | </script>
91 | 
92 | <style lang="scss" scoped>
93 | tr {
94 |   height: 150px;
95 |   // display: flex;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Extended Shopify starter for Gridsome
 2 | 
 3 | This is an extended starter, copied from the [boilerplate starter](https://github.com/travis-r6s/gridsome-starter-shopify), which includes customer login and account pages as well as a persisted shopping cart. [View Demo](https://gridsome-starter-shopify-account.vercel.app)
 4 | 
 5 | > Give it a go, create an account - take this as written confirmation of the fact that I will _not_ harvest any personal data. Or, of course, you can just use a dummy email and password 🤷🏻‍♂️.
 6 | 
 7 | This starter uses a source plugin ([`gridsome-source-shopify`](https://gridsome.org/plugins/gridsome-source-shopify)) to pull data from Shopify's Storefront API, and load it into Gridsome's data store - which you can then use to create pages (note that this only runs at build time). Pages created in this starter include product pages, category pages, and CMS pages such as `/about-us`.
 8 | 
 9 | It also uses the [Vue Apollo](https://apollo.vuejs.org) plugin client-side, to send queries/mutations (i.e. `createCheckout`, `customerCreate`) to the [Storefront API](https://help.shopify.com/en/api/storefront-api) when running in the browser. This API allows accessing customer account data, as shown in this starter.
10 | 
11 | ## Shopify Setup
12 | 
13 | You will need to create a private app in Shopify, and **only** give it access to the Storefront API - make sure to select **all** permissions, as this starter requires permissions to create and login customers.
14 | 
15 | Make sure to note the Storefront API key, and your store name.
16 | 
17 | ## Installation
18 | 
19 | Install the Gridsome CLI.
20 | 
21 | ```bash
22 | npm install -g @gridsome/cli # or
23 | yarn global add @gridsome/cli
24 | ```
25 | 
26 | ## Create Project
27 | 
28 | You can either directly download this repository, or use Gridsome's CLI to download and install dependencies for you.
29 | 
30 | ```bash
31 | # Clone repository
32 | git clone https://github.com/travis-r6s/gridsome-starter-shopify-account.git
33 | npm install # or
34 | yarn install
35 | 
36 | # Download with CLI
37 | gridsome create my-gridsome-site travis-r6s/gridsome-starter-shopify-account
38 | ```
39 | 
40 | ## Developing
41 | 
42 | You will need to add your Storefront API shop name (`https://<shop-name>.myshopify.com`) & token to an env file before running this starter.
43 | I also recommend you add some collections in Shopify to best show off this starter.
44 | 
45 | ```
46 | # Note env's are prefixed with GRIDSOME_ to make them available to apollo client side
47 | GRIDSOME_SHOPIFY_STOREFRONT=<shop name>
48 | GRIDSOME_SHOPIFY_STOREFRONT_TOKEN=<storefront token>
49 | ```
50 | 
51 | Or you can manually edit the [Shopify Source Plugin's](https://gridsome.org/plugins/gridsome-source-shopify) configurations in `gridsome.config.js`.
52 | 
53 | Enter the site folder, and run `gridsome develop` to start a local development server.
54 | 
55 | Happy coding!
56 | 


--------------------------------------------------------------------------------
/src/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | @import "bulma/sass/utilities/initial-variables";
 2 | @import "bulma/sass/utilities/functions";
 3 | 
 4 | $primary: #161616;
 5 | 
 6 | $info: $cyan;
 7 | $success: $green;
 8 | $warning: $yellow;
 9 | $danger: $red;
10 | 
11 | $light: $white-ter;
12 | $dark: $grey-darker;
13 | 
14 | // Invert colors
15 | 
16 | $orange-invert: findColorInvert($orange);
17 | $yellow-invert: findColorInvert($yellow);
18 | $green-invert: findColorInvert($green);
19 | $turquoise-invert: findColorInvert($turquoise);
20 | $cyan-invert: findColorInvert($cyan);
21 | $blue-invert: findColorInvert($blue);
22 | $purple-invert: findColorInvert($purple);
23 | $red-invert: findColorInvert($red);
24 | 
25 | $primary-invert: $turquoise-invert;
26 | $info-invert: $cyan-invert;
27 | $success-invert: $green-invert;
28 | $warning-invert: $yellow-invert;
29 | $danger-invert: $red-invert;
30 | $light-invert: $dark;
31 | $dark-invert: $light;
32 | 
33 | // General colors
34 | 
35 | $background: $white-ter;
36 | 
37 | $border: $grey-lighter;
38 | $border-hover: $grey-light;
39 | 
40 | // Text colors
41 | 
42 | $text: $black-bis;
43 | $text-invert: findColorInvert($text);
44 | $text-light: $grey-dark;
45 | $text-strong: $black;
46 | 
47 | // Code colors
48 | 
49 | $code: $red;
50 | $code-background: $background;
51 | 
52 | $pre: $text;
53 | $pre-background: $background;
54 | 
55 | // Link colors
56 | 
57 | $link: $text;
58 | $link-invert: $text-invert;
59 | $link-visited: $text;
60 | 
61 | $link-hover: $grey-light;
62 | $link-hover-border: $grey-light;
63 | 
64 | $link-focus: $grey-darker;
65 | $link-focus-border: $grey-darker;
66 | 
67 | $link-active: $grey-darker;
68 | $link-active-border: $grey-dark;
69 | 
70 | // Typography
71 | 
72 | $family-primary: "Karla", $family-sans-serif;
73 | $family-secondary: "Prata", $family-sans-serif;
74 | $family-code: $family-monospace;
75 | 
76 | $size-small: $size-7;
77 | $size-normal: $size-6;
78 | $size-medium: $size-5;
79 | $size-large: $size-4;
80 | 
81 | // Lists and maps
82 | $custom-colors: null;
83 | $custom-shades: null;
84 | 
85 | $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors);
86 | $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades);
87 | 
88 | $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7;
89 | 
90 | // Miscellaneous
91 | $radius: 0px;
92 | 
93 | // Button
94 | $button-padding-horizontal: 2.8rem;
95 | 
96 | // Table
97 | $table-cell-border: none;
98 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | // Plugins
 2 | import Cookies from 'js-cookie'
 3 | import currency from 'currency.js'
 4 | import Vuex from 'vuex'
 5 | import VuexPersistence from 'vuex-persist'
 6 | 
 7 | export default function createStore (Vue, { isClient }) {
 8 |   // Use Vuex plugin
 9 |   Vue.use(Vuex)
10 | 
11 |   // Create Vuex store
12 |   const store = new Vuex.Store({
13 |     state: {
14 |       cart: [],
15 |       token: {}
16 |     },
17 |     mutations: {
18 |       updateCart: (state, cart) => { state.cart = cart },
19 |       setToken: (state, token) => { state.token = token }
20 |     },
21 |     actions: {
22 |       addToCart: ({ state, commit }, newItem) => {
23 |         const cart = state.cart
24 |         const itemExists = cart.find(item => item.variantId === newItem.variantId)
25 | 
26 |         if (itemExists) itemExists.qty += newItem.qty
27 |         else cart.push(newItem)
28 | 
29 |         const updatedCart = cart.map(item => {
30 |           const total = currency(item.price, { formatWithSymbol: true, symbol: '£' }).multiply(item.qty).format()
31 |           return { ...item, total }
32 |         })
33 | 
34 |         commit('updateCart', updatedCart)
35 |       },
36 |       updateItemQty: ({ state, commit }, { itemId, qty }) => {
37 |         const cart = state.cart
38 |         const item = cart.find(item => item.variantId === itemId)
39 | 
40 |         item.qty = qty
41 |         item.total = currency(item.price, { formatWithSymbol: true, symbol: '£' }).multiply(qty).format()
42 | 
43 |         commit('updateCart', cart)
44 |       },
45 |       removeFromCart: ({ state, commit }, itemId) => {
46 |         const cart = state.cart
47 |         const updatedCart = cart.filter(item => item.variantId !== itemId)
48 | 
49 |         commit('updateCart', updatedCart)
50 |       },
51 |       login: ({ commit }, token) => {
52 |         commit('setToken', token)
53 |       },
54 |       logout: ({ commit }) => {
55 |         commit('setToken', {})
56 |         commit('updateCart', [])
57 |       }
58 |     },
59 |     getters: {
60 |       isAuthenticated: ({ token }) => !!token.accessToken,
61 |       accessToken: ({ token }) => token.accessToken,
62 |       cartTotal: ({ cart }) => cart.reduce((total, item) => total.add(currency(item.price).multiply(item.qty)), currency(0, { formatWithSymbol: true, symbol: '£' }))
63 |     }
64 |   })
65 | 
66 |   // Run vuex-persist if we are running on the client
67 |   if (isClient) {
68 |     // Tokens
69 |     new VuexPersistence({
70 |       restoreState: key => Cookies.getJSON(key),
71 |       saveState: (key, { token }) => {
72 |         if (token) {
73 |           const expires = new Date(token.expiresAt)
74 |           Cookies.set(key, { token }, { expires })
75 |         } else {
76 |           Cookies.set(key, { token })
77 |         }
78 |       },
79 |       modules: ['token'],
80 |       filter: mutation => mutation.type === 'setToken'
81 |     }).plugin(store)
82 | 
83 |     // Cart
84 |     new VuexPersistence({
85 |       storage: window.localStorage,
86 |       modules: ['cart'],
87 |       filter: mutation => mutation.type === 'updateCart'
88 |     }).plugin(store)
89 |   }
90 | 
91 |   return store
92 | }
93 | 


--------------------------------------------------------------------------------
/gridsome.config.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   siteName: 'Gridsome + Shopify 😍',
  3 |   siteDescription: 'A full-featured Shopify starter kit for Gridsome, including an account page.',
  4 |   siteUrl: 'https://gridsome-starter-shopify-account.vercel.app',
  5 |   templates: {
  6 |     ShopifyProduct: [
  7 |       {
  8 |         path: '/product/:handle',
  9 |         component: './src/templates/Product.vue'
 10 |       }
 11 |     ],
 12 |     ShopifyCollection: [
 13 |       {
 14 |         path: '/collection/:handle',
 15 |         component: './src/templates/Collection.vue'
 16 |       }
 17 |     ],
 18 |     ShopifyPage: [
 19 |       {
 20 |         path: '/:handle',
 21 |         component: './src/templates/Page.vue'
 22 |       }
 23 |     ]
 24 |   },
 25 |   plugins: [
 26 |     {
 27 |       use: 'gridsome-source-shopify',
 28 |       options: {
 29 |         storeName: process.env.GRIDSOME_SHOPIFY_STOREFRONT,
 30 |         storefrontToken: process.env.GRIDSOME_SHOPIFY_STOREFRONT_TOKEN
 31 |       }
 32 |     },
 33 |     {
 34 |       use: 'gridsome-plugin-flexsearch',
 35 |       options: {
 36 |         flexsearch: {
 37 |           profile: 'match'
 38 |         },
 39 |         collections: [
 40 |           {
 41 |             typeName: 'ShopifyProduct',
 42 |             indexName: 'Product',
 43 |             fields: ['title', 'handle', 'description']
 44 |           },
 45 |           {
 46 |             typeName: 'ShopifyCollection',
 47 |             indexName: 'Collection',
 48 |             fields: ['title', 'handle', 'description']
 49 |           }
 50 |         ],
 51 |         searchFields: ['title', 'handle', 'tags']
 52 |       }
 53 |     },
 54 |     'gridsome-plugin-purgecss',
 55 |     {
 56 |       use: '@gridsome/plugin-critical',
 57 |       options: {
 58 |         paths: ['/', '/collections', '/collection/*'],
 59 |         width: 1300,
 60 |         height: 900
 61 |       }
 62 |     },
 63 |     {
 64 |       use: '@gridsome/plugin-sitemap',
 65 |       options: {
 66 |         exclude: ['/account'],
 67 |         config: {
 68 |           '/product/*': {
 69 |             changefreq: 'daily',
 70 |             priority: 0.5
 71 |           },
 72 |           '/collection/*': {
 73 |             changefreq: 'weekly',
 74 |             priority: 0.5
 75 |           },
 76 |           '/collections': {
 77 |             changefreq: 'monthly',
 78 |             priority: 0.7
 79 |           }
 80 |         }
 81 |       }
 82 |     },
 83 |     {
 84 |       use: '@gridsome/plugin-google-analytics',
 85 |       options: {
 86 |         id: process.env.GRIDSOME_ANALYTICS_ID
 87 |       }
 88 |     },
 89 |     {
 90 |       use: 'gridsome-plugin-manifest',
 91 |       options: {
 92 |         background_color: '#000000',
 93 |         icon_path: './src/favicon.png',
 94 |         name: 'Gridsome + Shopify 😍',
 95 |         short_name: 'Shopify Starter + 🔐',
 96 |         theme_color: '#000000',
 97 |         lang: 'en'
 98 |       }
 99 |     },
100 |     {
101 |       use: 'gridsome-plugin-service-worker',
102 |       options: {
103 |         staleWhileRevalidate: {
104 |           cacheName: 'static-resources',
105 |           routes: [/\.(?:css)$/]
106 |         }
107 |       }
108 |     }
109 |   ]
110 | }
111 | 


--------------------------------------------------------------------------------
/src/components/Login/Reset.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container has-text-centered">
  3 |     <h3 class="title is-family-secondary">
  4 |       Reset Password
  5 |     </h3>
  6 |     <div class="columns is-centered">
  7 |       <div class="column is-4">
  8 |         <form
  9 |           class="form"
 10 |           @submit.prevent="reset">
 11 |           <div class="field">
 12 |             <div class="control">
 13 |               <label
 14 |                 class="label"
 15 |                 for="email">Email
 16 |                 <input
 17 |                   id="email"
 18 |                   v-model.trim="email"
 19 |                   class="input"
 20 |                   type="email"
 21 |                   placeholder="Your Email"
 22 |                   value="jane@does.com"
 23 |                   required>
 24 |               </label>
 25 |             </div>
 26 |           </div>
 27 |           <div class="field is-grouped">
 28 |             <div class="control">
 29 |               <button
 30 |                 class="button is-white"
 31 |                 type="submit"
 32 |                 @click.prevent="$emit('change', 'login')"
 33 |                 @keyup.prevent="$emit('change', 'login')">
 34 |                 Back to Login
 35 |               </button>
 36 |             </div>
 37 |             <div
 38 |               class="control"
 39 |               style="margin-left: auto;">
 40 |               <button
 41 |                 :class="{'is-loading': isLoading}"
 42 |                 class="button is-primary"
 43 |                 type="submit">
 44 |                 Reset Password
 45 |               </button>
 46 |             </div>
 47 |           </div>
 48 |         </form>
 49 |       </div>
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | // Packages
 56 | import gql from 'graphql-tag'
 57 | 
 58 | export default {
 59 |   name: 'Register',
 60 |   data: () => ({
 61 |     isLoading: false,
 62 |     email: ''
 63 |   }),
 64 |   methods: {
 65 |     async reset () {
 66 |       const email = this.email
 67 |       this.isLoading = true
 68 |       try {
 69 |         const { data: { customerRecover } } = await this.$apollo.mutate({
 70 |           mutation: gql`mutation customerRecover($email: String!) {
 71 |             customerRecover(email: $email) {
 72 |               customerUserErrors {
 73 |                 code
 74 |                 field
 75 |                 message
 76 |               }
 77 |             }
 78 |           }`,
 79 |           variables: { email }
 80 |         })
 81 |         const { customerUserErrors } = customerRecover
 82 |         if (customerUserErrors.length) {
 83 |           const [firstError] = customerUserErrors
 84 |           throw new Error(firstError.message)
 85 |         }
 86 | 
 87 |         this.$notify({
 88 |           group: 'auth',
 89 |           title: `On its way...`,
 90 |           text: 'Please check your inbox, and follow the instructions in the email to reset your password.',
 91 |           type: 'success'
 92 |         })
 93 |         this.$emit('change', 'login')
 94 |       } catch (error) {
 95 |         this.isLoading = false
 96 |         console.error(error)
 97 |         this.$notify({
 98 |           group: 'auth',
 99 |           title: error.message,
100 |           type: 'error'
101 |         })
102 |       }
103 |     }
104 |   }
105 | }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/src/components/Cart/CartItemsTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <table class="table is-fullwidth">
  3 |     <tbody>
  4 |       <tr
  5 |         v-for="item in cart"
  6 |         :key="item.variantId">
  7 |         <td width="150">
  8 |           <figure class="image is-square">
  9 |             <img
 10 |               :src="item.image.thumbnail"
 11 |               :alt="item.image.altText || item.title">
 12 |           </figure>
 13 |         </td>
 14 |         <td>
 15 |           <g-link
 16 |             :to="item.path"
 17 |             class="is-uppercase has-text-weight-medium">
 18 |             {{ item.productTitle }}
 19 |           </g-link>
 20 |           <p>
 21 |             <small>
 22 |               {{ item.variantTitle !== 'Default Title' ? item.variantTitle : '' }}
 23 |             </small>
 24 |           </p>
 25 |           <p>
 26 |             <small>
 27 |               {{ item.price }}
 28 |             </small>
 29 |           </p>
 30 |         </td>
 31 |         <td />
 32 |         <td width="300">
 33 |           <div class="field has-addons">
 34 |             <div class="control">
 35 |               <button
 36 |                 class="button is-white"
 37 |                 @click="removeItem(item.variantId)"
 38 |                 @keyup="removeItem(item.variantId)">
 39 |                 <small>Remove</small>
 40 |               </button>
 41 |             </div>
 42 |             <div class="control">
 43 |               <button
 44 |                 class="button is-light"
 45 |                 @click="decreaseItemQty(item)"
 46 |                 @keyup="decreaseItemQty(item)">
 47 |                 -
 48 |               </button>
 49 |             </div>
 50 |             <div class="control">
 51 |               <label for="qty">
 52 |                 <input
 53 |                   :value="item.qty"
 54 |                   class="input has-text-centered"
 55 |                   type="number"
 56 |                   placeholder="Enter a quantity"
 57 |                   min="1"
 58 |                   @change="e => updateItemQty(item, e.target.valueAsNumber)">
 59 |               </label>
 60 |             </div>
 61 |             <div class="control">
 62 |               <button
 63 |                 class="button is-light"
 64 |                 @click="increaseItemQty(item)"
 65 |                 @keyup="increaseItemQty(item)">
 66 |                 +
 67 |               </button>
 68 |             </div>
 69 |           </div>
 70 |         </td>
 71 |         <td width="150">
 72 |           <p class="has-text-right item-total">
 73 |             {{ item.total }}
 74 |           </p>
 75 |         </td>
 76 |       </tr>
 77 |     </tbody>
 78 |     <tfoot v-if="cart.length">
 79 |       <tr>
 80 |         <th />
 81 |         <th />
 82 |         <th />
 83 |         <th />
 84 |         <th class="has-text-right">
 85 |           <p>Cart Total: {{ cartTotal }}</p>
 86 |         </th>
 87 |       </tr>
 88 |     </tfoot>
 89 |   </table>
 90 | </template>
 91 | 
 92 | <script>
 93 | export default {
 94 |   props: {
 95 |     cart: {
 96 |       type: Array,
 97 |       default: () => []
 98 |     }
 99 |   },
100 |   computed: {
101 |     cartTotal () { return this.$store.getters.cartTotal.format() }
102 |   },
103 |   methods: {
104 |     async removeItem (itemId) {
105 |       await this.$store.dispatch('removeFromCart', itemId)
106 |       this.$notify({
107 |         title: 'Item removed from cart',
108 |         type: 'primary'
109 |       })
110 |     },
111 |     async decreaseItemQty (item) {
112 |       if (item.qty === 1) return
113 |       const qty = item.qty - 1
114 |       await this.$store.dispatch('updateItemQty', { itemId: item.variantId, qty })
115 |     },
116 |     async increaseItemQty (item) {
117 |       const qty = item.qty + 1
118 |       await this.$store.dispatch('updateItemQty', { itemId: item.variantId, qty })
119 |     },
120 |     async updateItemQty (item, qty) {
121 |       if (qty <= 0) return
122 |       await this.$store.dispatch('updateItemQty', { itemId: item.variantId, qty })
123 |     }
124 |   }
125 | }
126 | </script>
127 | 


--------------------------------------------------------------------------------
/src/components/Login/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container has-text-centered">
  3 |     <h3 class="title is-family-secondary">
  4 |       Login
  5 |     </h3>
  6 |     <div class="columns is-centered">
  7 |       <div class="column is-4">
  8 |         <form
  9 |           class="form"
 10 |           @submit.prevent="login">
 11 |           <div class="field">
 12 |             <div class="control">
 13 |               <label
 14 |                 class="label"
 15 |                 for="email">Email
 16 |                 <input
 17 |                   id="email"
 18 |                   v-model.trim="user.email"
 19 |                   class="input"
 20 |                   type="email"
 21 |                   placeholder="Your Email"
 22 |                   value="jane@does.com"
 23 |                   required>
 24 |               </label>
 25 |             </div>
 26 |           </div>
 27 |           <div class="field">
 28 |             <div class="control">
 29 |               <label
 30 |                 class="label"
 31 |                 for="password">Password
 32 |                 <input
 33 |                   id="password"
 34 |                   v-model.trim="user.password"
 35 |                   class="input"
 36 |                   type="password"
 37 |                   placeholder="***********"
 38 |                   required>
 39 |               </label>
 40 |             </div>
 41 |           </div>
 42 |           <div class="field is-grouped">
 43 |             <div class="control">
 44 |               <button
 45 |                 class="button is-white"
 46 |                 type="submit"
 47 |                 @click.prevent="$emit('change', 'register')"
 48 |                 @keyup.prevent="$emit('change', 'register')">
 49 |                 Register
 50 |               </button>
 51 |             </div>
 52 |             <div
 53 |               class="control"
 54 |               style="margin-left: auto;">
 55 |               <button
 56 |                 :class="{'is-loading': isLoading}"
 57 |                 class="button is-primary"
 58 |                 type="submit">
 59 |                 Login
 60 |               </button>
 61 |             </div>
 62 |           </div>
 63 |           <div class="buttons is-right">
 64 |             <button
 65 |               class="button is-text"
 66 |               type="submit"
 67 |               @click.prevent="$emit('change', 'reset')"
 68 |               @keyup.prevent="$emit('change', 'reset')">
 69 |               Forgotten Password?
 70 |             </button>
 71 |           </div>
 72 |         </form>
 73 |       </div>
 74 |     </div>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <script>
 79 | // Packages
 80 | import gql from 'graphql-tag'
 81 | 
 82 | export default {
 83 |   name: 'Login',
 84 |   data: () => ({
 85 |     isLoading: false,
 86 |     user: {
 87 |       email: '',
 88 |       password: ''
 89 |     }
 90 |   }),
 91 |   methods: {
 92 |     async login () {
 93 |       const user = this.user
 94 |       this.isLoading = true
 95 |       try {
 96 |         const { data: { customerAccessTokenCreate } } = await this.$apollo.mutate({
 97 |           mutation: gql`mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
 98 |             customerAccessTokenCreate(input: $input) {
 99 |               customerAccessToken {
100 |                 accessToken
101 |                 expiresAt
102 |               }
103 |               customerUserErrors {
104 |                 code
105 |                 field
106 |                 message
107 |               }
108 |             }
109 |           }`,
110 |           variables: { input: user }
111 |         })
112 |         const { customerAccessToken, customerUserErrors } = customerAccessTokenCreate
113 |         if (customerUserErrors.length) {
114 |           const [firstError] = customerUserErrors
115 |           throw new Error(firstError.message)
116 |         }
117 |         await this.$store.dispatch('login', customerAccessToken)
118 |         this.$router.push('/account')
119 |       } catch (error) {
120 |         this.isLoading = false
121 |         console.error(error)
122 |         this.$notify({
123 |           group: 'auth',
124 |           title: error.message,
125 |           type: 'error'
126 |         })
127 |       }
128 |     }
129 |   }
130 | }
131 | </script>
132 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <nav
  3 |     class="navbar container is-spaced"
  4 |     role="navigation"
  5 |     aria-label="main navigation">
  6 |     <div class="navbar-brand">
  7 |       <g-link
  8 |         to="/"
  9 |         class="navbar-item">
 10 |         <g-image
 11 |           src="../favicon.png"
 12 |           width="28"
 13 |           height="28"
 14 |           alt="Gridsome Logo" />
 15 |       </g-link>
 16 | 
 17 |       <button
 18 |         class="navbar-burger burger"
 19 |         :aria-label="isMenuActive ? 'Close nav menu' : 'Open nav menu'"
 20 |         :class="{'is-active': isMenuActive}"
 21 |         @click="isMenuActive = !isMenuActive"
 22 |         @keyup="isMenuActive = !isMenuActive">
 23 |         <span aria-hidden="true" />
 24 |         <span aria-hidden="true" />
 25 |         <span aria-hidden="true" />
 26 |       </button>
 27 |     </div>
 28 | 
 29 |     <div
 30 |       class="navbar-menu"
 31 |       :class="{'is-active': isMenuActive}">
 32 |       <div class="navbar-start">
 33 |         <g-link
 34 |           to="/"
 35 |           class="navbar-item">
 36 |           Home
 37 |         </g-link>
 38 |         <g-link
 39 |           to="/collections"
 40 |           class="navbar-item">
 41 |           Collections
 42 |         </g-link>
 43 |         <g-link
 44 |           to="/contact-us"
 45 |           class="navbar-item">
 46 |           Contact
 47 |         </g-link>
 48 |         <g-link
 49 |           to="/about-us"
 50 |           class="navbar-item">
 51 |           About
 52 |         </g-link>
 53 |       </div>
 54 | 
 55 |       <div class="navbar-end">
 56 |         <div
 57 |           class="navbar-item has-dropdown"
 58 |           :class="{'is-active': searchResults.length}">
 59 |           <div class="control navbar-item">
 60 |             <label for="search">
 61 |               <input
 62 |                 id="search"
 63 |                 v-model="searchTerm"
 64 |                 aria-label="Search"
 65 |                 class="input is-small"
 66 |                 type="text"
 67 |                 placeholder="Search">
 68 |             </label>
 69 |           </div>
 70 |           <div class="navbar-dropdown">
 71 |             <g-link
 72 |               v-for="({ node: result, path }) in searchResults"
 73 |               :key="result.id"
 74 |               :to="path"
 75 |               class="navbar-item">
 76 |               {{ result.title }}
 77 |             </g-link>
 78 |             <hr class="navbar-divider">
 79 |             <div class="navbar-item">
 80 |               View more results
 81 |             </div>
 82 |           </div>
 83 |         </div>
 84 |         <div
 85 |           v-if="isAuthenticated"
 86 |           class="navbar-item has-dropdown is-hoverable">
 87 |           <p class="navbar-item">
 88 |             Account
 89 |           </p>
 90 |           <div class="navbar-dropdown has-text-centered">
 91 |             <g-link
 92 |               to="/account"
 93 |               class="navbar-item">
 94 |               Your Orders
 95 |             </g-link>
 96 |             <hr class="navbar-divider">
 97 |             <button
 98 |               class="button is-white"
 99 |               @click="logout"
100 |               @keyup.enter="logout">
101 |               Logout
102 |             </button>
103 |           </div>
104 |         </div>
105 |         <g-link
106 |           v-if="!isAuthenticated"
107 |           to="/login"
108 |           class="navbar-item">
109 |           Login
110 |         </g-link>
111 |         <g-link
112 |           to="/cart"
113 |           class="navbar-item">
114 |           Cart - {{ cart.length }} Item{{ cart.length !== 1 ? 's' : '' }}
115 |         </g-link>
116 |       </div>
117 |     </div>
118 |   </nav>
119 | </template>
120 | 
121 | <script>
122 | export default {
123 |   data: () => ({
124 |     isMenuActive: false,
125 |     searchTerm: ''
126 |   }),
127 |   computed: {
128 |     isAuthenticated () { return this.$store.getters.isAuthenticated },
129 |     cart () { return this.$store.state.cart },
130 |     searchResults () {
131 |       const searchTerm = this.searchTerm
132 |       if (searchTerm.length < 3) return []
133 |       return this.$search.search({ query: searchTerm, limit: 5, suggest: true })
134 |     }
135 |   },
136 |   watch: {
137 |     $route (to, from) {
138 |       this.searchTerm = ''
139 |     }
140 |   },
141 |   methods: {
142 |     async logout () {
143 |       await this.$store.dispatch('logout')
144 |       this.$router.push('/')
145 |     }
146 |   }
147 | }
148 | </script>
149 | 
150 | <style lang="scss" scoped>
151 | .navbar-burger {
152 |   background-color: transparent;
153 |   border: none;
154 | }
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/pages/Index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <div
  4 |       v-if="collection"
  5 |       class="hero is-large">
  6 |       <div class="container">
  7 |         <div class="columns">
  8 |           <div class="column is-two-fifths header">
  9 |             <div class="header-content">
 10 |               <h1 class="title is-size-1 is-family-secondary">
 11 |                 Our Core Collection
 12 |               </h1>
 13 |               <div
 14 |                 class="content"
 15 |                 v-html="collection.descriptionHtml" />
 16 |               <g-link
 17 |                 :to="collection.path"
 18 |                 class="button">
 19 |                 Shop Now
 20 |               </g-link>
 21 |             </div>
 22 |           </div>
 23 |           <div class="column is-three-fifths">
 24 |             <figure class="image">
 25 |               <v-lazy-image
 26 |                 :src="collection.image.src"
 27 |                 :src-placeholder="collection.image.placeholder"
 28 |                 :alt="collection.image.altText || collection.title" />
 29 |             </figure>
 30 |           </div>
 31 |         </div>
 32 |       </div>
 33 |     </div>
 34 |     <br>
 35 |     <br>
 36 |     <div class="container has-text-centered">
 37 |       <hr>
 38 |       <h3 class="title is-size-4 is-family-secondary">
 39 |         Featured Products
 40 |       </h3>
 41 |       <hr>
 42 |       <br>
 43 |       <div class="columns is-multiline">
 44 |         <div
 45 |           v-for="({ node: product }) in featuredProducts"
 46 |           :key="product.id"
 47 |           class="column is-4">
 48 |           <div class="card">
 49 |             <div class="card-image">
 50 |               <figure class="image is-4by3">
 51 |                 <v-lazy-image
 52 |                   :src="product.images[0].src"
 53 |                   :src-placeholder="product.images[0].placeholder"
 54 |                   :alt="product.images[0].altText || product.title" />
 55 |               </figure>
 56 |             </div>
 57 |             <div class="card-content has-text-left">
 58 |               <div class="media">
 59 |                 <div class="media-content">
 60 |                   <p class="title is-4 is-family-secondary">
 61 |                     {{ product.title }}
 62 |                   </p>
 63 |                   <p class="subtitle is-6">
 64 |                     {{ product.priceRange.minVariantPrice.amount }}
 65 |                   </p>
 66 |                 </div>
 67 |               </div>
 68 | 
 69 |               <div
 70 |                 class="content"
 71 |                 v-html="product.descriptionHtml" />
 72 |               <div class="field is-grouped is-grouped-right">
 73 |                 <div class="control">
 74 |                   <g-link
 75 |                     :to="product.path"
 76 |                     class="button is-primary is-outlined">
 77 |                     View Product
 78 |                   </g-link>
 79 |                 </div>
 80 |               </div>
 81 |             </div>
 82 |           </div>
 83 |         </div>
 84 |       </div>
 85 |     </div>
 86 |   </Layout>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   metaInfo: {
 92 |     title: 'Come, shop!'
 93 |   },
 94 |   computed: {
 95 |     collection () { return this.$page.allShopifyCollection.edges.length && this.$page.allShopifyCollection.edges[ 0 ].node },
 96 |     featuredProducts () { return this.$page.allShopifyProduct.edges }
 97 |   }
 98 | }
 99 | </script>
100 | 
101 | <page-query>
102 | query ShopifyProducts {
103 |   allShopifyCollection (limit: 1) {
104 |     edges {
105 |       node {
106 |         id
107 |         path
108 |         title
109 |         descriptionHtml
110 |         image {
111 |           altText
112 |           src: transformedSrc(maxWidth: 800, maxHeight: 800, crop: CENTER)
113 |           placeholder: transformedSrc(maxWidth: 200, maxHeight: 200, crop: CENTER)
114 |         }
115 |       }
116 |     }
117 |   }
118 |   allShopifyProduct (limit: 6) {
119 |     edges {
120 |       node {
121 |         id
122 |         title
123 |         path
124 |         descriptionHtml
125 |         priceRange {
126 |           minVariantPrice {
127 |             amount(format: true)
128 |           }
129 |         }
130 |         images (limit: 1) {
131 |           id
132 |           altText
133 |           src: transformedSrc (maxWidth: 400, maxHeight: 300, crop: CENTER)
134 |           placeholder: transformedSrc(maxWidth: 100, maxHeight: 75, crop: CENTER)
135 |         }
136 |       }
137 |     }
138 |   }
139 | }
140 | </page-query>
141 | 
142 | <style lang="scss" scoped>
143 | .header {
144 |   align-items: center;
145 |   display: flex;
146 |   .header-content {
147 |     text-align: center;
148 |   }
149 | }
150 | </style>
151 | 


--------------------------------------------------------------------------------
/src/components/Login/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container has-text-centered">
  3 |     <h3 class="title is-family-secondary">
  4 |       Register
  5 |     </h3>
  6 |     <div class="columns is-centered">
  7 |       <div class="column is-4">
  8 |         <form
  9 |           class="form"
 10 |           @submit.prevent="register">
 11 |           <div class="field is-horizontal">
 12 |             <div class="field-body">
 13 |               <div class="field">
 14 |                 <div class="control">
 15 |                   <label
 16 |                     class="label"
 17 |                     for="first-name">First Name
 18 |                     <input
 19 |                       id="first-name"
 20 |                       v-model.trim="user.firstName"
 21 |                       class="input"
 22 |                       type="text"
 23 |                       placeholder="First Name"
 24 |                       value="Jane"
 25 |                       required>
 26 |                   </label>
 27 |                 </div>
 28 |               </div>
 29 |               <div class="field">
 30 |                 <div class="control">
 31 |                   <label
 32 |                     class="label"
 33 |                     for="last-name">Last Name
 34 |                     <input
 35 |                       id="last-name"
 36 |                       v-model.trim="user.lastName"
 37 |                       class="input"
 38 |                       type="text"
 39 |                       placeholder="Last Name"
 40 |                       value="Doe"
 41 |                       required>
 42 |                   </label>
 43 |                 </div>
 44 |               </div>
 45 |             </div>
 46 |           </div>
 47 |           <div class="field">
 48 |             <div class="control">
 49 |               <label
 50 |                 class="label"
 51 |                 for="email">Email
 52 |                 <input
 53 |                   id="email"
 54 |                   v-model.trim="user.email"
 55 |                   class="input"
 56 |                   type="email"
 57 |                   placeholder="Your Email"
 58 |                   value="jane@does.com"
 59 |                   required>
 60 |               </label>
 61 |             </div>
 62 |           </div>
 63 |           <div class="field">
 64 |             <div class="control">
 65 |               <label
 66 |                 class="label"
 67 |                 for="password">Password
 68 |                 <input
 69 |                   id="password"
 70 |                   v-model.trim="user.password"
 71 |                   class="input"
 72 |                   type="password"
 73 |                   placeholder="***********"
 74 |                   required>
 75 |               </label>
 76 |             </div>
 77 |           </div>
 78 |           <div class="field">
 79 |             <div class="control">
 80 |               <label class="checkbox">
 81 |                 <input
 82 |                   v-model="user.acceptsMarketing"
 83 |                   type="checkbox">
 84 |                 Please please please let us email you...?
 85 |               </label>
 86 |             </div>
 87 |           </div>
 88 |           <div class="field is-grouped">
 89 |             <div class="control">
 90 |               <button
 91 |                 class="button is-white"
 92 |                 type="submit"
 93 |                 @click.prevent="$emit('change', 'login')"
 94 |                 @keyup.prevent="$emit('change', 'login')">
 95 |                 Login
 96 |               </button>
 97 |             </div>
 98 |             <div
 99 |               class="control"
100 |               style="margin-left: auto;">
101 |               <button
102 |                 :class="{'is-loading': isLoading}"
103 |                 class="button is-primary"
104 |                 type="submit">
105 |                 Register
106 |               </button>
107 |             </div>
108 |           </div>
109 |           <div class="buttons is-right">
110 |             <button
111 |               class="button is-text"
112 |               type="submit"
113 |               @click.prevent="$emit('change', 'reset')"
114 |               @keyup.prevent="$emit('change', 'reset')">
115 |               Forgotten Password?
116 |             </button>
117 |           </div>
118 |         </form>
119 |       </div>
120 |     </div>
121 |   </div>
122 | </template>
123 | 
124 | <script>
125 | // Packages
126 | import gql from 'graphql-tag'
127 | 
128 | export default {
129 |   name: 'Register',
130 |   data: () => ({
131 |     isLoading: false,
132 |     user: {
133 |       email: '',
134 |       password: '',
135 |       firstName: '',
136 |       lastName: '',
137 |       acceptsMarketing: false
138 |     }
139 |   }),
140 |   methods: {
141 |     async register () {
142 |       const user = this.user
143 |       this.isLoading = true
144 |       try {
145 |         const { data: { customerCreate } } = await this.$apollo.mutate({
146 |           mutation: gql`mutation customerCreate($input: CustomerCreateInput!) {
147 |             customerCreate(input: $input) {
148 |               customer {
149 |                 firstName
150 |               }
151 |               customerUserErrors {
152 |                 code
153 |                 field
154 |                 message
155 |               }
156 |             }
157 |           }`,
158 |           variables: { input: user }
159 |         })
160 |         const { customer, customerUserErrors } = customerCreate
161 |         if (customerUserErrors.length) {
162 |           const [firstError] = customerUserErrors
163 |           throw new Error(firstError.message)
164 |         }
165 | 
166 |         this.$notify({
167 |           group: 'auth',
168 |           title: `Welcome, ${customer.firstName}!`,
169 |           text: 'Thank you for creating an account - please login.',
170 |           type: 'success'
171 |         })
172 |         this.$emit('change', 'login')
173 |       } catch (error) {
174 |         this.isLoading = false
175 |         console.error(error)
176 |         this.$notify({
177 |           group: 'auth',
178 |           title: error.message,
179 |           type: 'error'
180 |         })
181 |       }
182 |     }
183 |   }
184 | }
185 | </script>
186 | 


--------------------------------------------------------------------------------
/src/templates/Product.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <Layout>
  3 |     <div class="container">
  4 |       <div class="columns">
  5 |         <div class="column is-three-fifths">
  6 |           <figure class="image">
  7 |             <v-lazy-image
  8 |               :src="product.images[0].src"
  9 |               :src-placeholder="product.images[0].placeholder"
 10 |               :alt="product.images[0].altText || product.title" />
 11 |           </figure>
 12 |           <br>
 13 |           <div class="columns">
 14 |             <div
 15 |               v-for="({ node: image }) in product.images.edges"
 16 |               :key="image.id"
 17 |               class="column is-3">
 18 |               <figure class="image is-square">
 19 |                 <v-lazy-image
 20 |                   :src="image.thumbnail"
 21 |                   :alt="image.altText || product.title" />
 22 |               </figure>
 23 |             </div>
 24 |           </div>
 25 |         </div>
 26 |         <div class="column is-two-fifths">
 27 |           <h3 class="title is-family-secondary">
 28 |             {{ product.title }}
 29 |           </h3>
 30 |           <h5
 31 |             v-if="currentVariant"
 32 |             class="subtitle">
 33 |             {{ currentVariant.price.amount }}
 34 |           </h5>
 35 |           <div
 36 |             class="content"
 37 |             v-html="product.descriptionHtml" />
 38 |           <div
 39 |             v-for="option in productOptions"
 40 |             :key="option.id"
 41 |             class="field">
 42 |             <div class="control">
 43 |               <label
 44 |                 :for="option.name"
 45 |                 class="label">
 46 |                 {{ option.name }}
 47 |                 <div class="select is-fullwidth">
 48 |                   <select
 49 |                     :id="option.name"
 50 |                     v-model="selectedOptions[option.name]">
 51 |                     <option
 52 |                       v-for="value in option.values"
 53 |                       :key="value"
 54 |                       :value="value">
 55 |                       {{ value }}
 56 |                     </option>
 57 |                   </select>
 58 |                 </div>
 59 |               </label>
 60 |             </div>
 61 |           </div>
 62 |           <br>
 63 |           <div class="field is-grouped is-grouped-right">
 64 |             <div class="field has-addons is-fullwidth">
 65 |               <div class="control">
 66 |                 <label
 67 |                   class="label"
 68 |                   for="quantity">
 69 |                   Quantity
 70 |                 </label>
 71 |                 <input
 72 |                   id="quantity"
 73 |                   v-model.number="quantity"
 74 |                   class="input quantity"
 75 |                   type="number"
 76 |                   placeholder="Find a repository">
 77 |               </div>
 78 |               <div class="add-to-cart">
 79 |                 <button
 80 |                   class="button is-primary"
 81 |                   @click="addToCart"
 82 |                   @keyup.enter="addToCart">
 83 |                   Add To Cart
 84 |                 </button>
 85 |               </div>
 86 |             </div>
 87 |           </div>
 88 |         </div>
 89 |       </div>
 90 |     </div>
 91 |   </Layout>
 92 | </template>
 93 | 
 94 | <script>
 95 | export default {
 96 |   metaInfo () {
 97 |     return {
 98 |       title: this.$page.shopifyProduct.title
 99 |     }
100 |   },
101 |   data: () => ({
102 |     selectedOptions: {},
103 |     quantity: 1
104 |   }),
105 |   computed: {
106 |     product () { return this.$page.shopifyProduct },
107 |     productOptions () { return this.product.options.filter(({ name }) => name !== 'Title') },
108 |     currentVariant () {
109 |       const matchedVariant = this.product.variants.find(variant =>
110 |         variant.selectedOptions.every(({ name, value }) => value === this.selectedOptions[ name ])
111 |       )
112 |       return matchedVariant
113 |     }
114 |   },
115 |   watch: {
116 |     $route (to, from) {
117 |       const [firstVariant] = this.product.variants
118 |       this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) => ({ [ name ]: value, ...options }), {})
119 |     }
120 |   },
121 |   mounted () {
122 |     const [firstVariant] = this.product.variants
123 |     this.selectedOptions = firstVariant.selectedOptions.reduce((options, { name, value }) => ({ [ name ]: value, ...options }), {})
124 |   },
125 |   methods: {
126 |     async addToCart () {
127 |       const variant = this.currentVariant
128 |       const payload = {
129 |         path: this.product.path,
130 |         qty: this.quantity,
131 |         productTitle: this.product.title,
132 |         variantTitle: variant.title,
133 |         variantId: variant.id,
134 |         price: variant.price.amount,
135 |         image: variant.image
136 |       }
137 |       await this.$store.dispatch('addToCart', payload)
138 |       this.$notify({
139 |         title: `Added ${payload.productTitle} to Cart`,
140 |         type: 'primary'
141 |       })
142 |     }
143 |   }
144 | }
145 | </script>
146 | 
147 | <page-query>
148 | query Product ($id: ID!) {
149 |   shopifyProduct (id: $id) {
150 |     id
151 |     path
152 |     descriptionHtml
153 |     title
154 |     tags
155 |     images(limit: 4) {
156 |       id
157 |       altText
158 |       src: transformedSrc(maxWidth: 600, maxHeight: 400, crop: CENTER)
159 |       placeholder: transformedSrc(maxWidth: 150, maxHeight: 100, crop: CENTER)
160 |       thumbnail: transformedSrc(maxWidth: 150, maxHeight: 150, crop: CENTER)
161 |     }
162 |     options {
163 |       id
164 |       name
165 |       values
166 |     }
167 |     variants {
168 |       id
169 |       title
170 |       price {
171 |         amount(format: true)
172 |       }
173 |       selectedOptions {
174 |         name
175 |         value
176 |       }
177 |       image {
178 |         id
179 |         altText
180 |         thumbnail: transformedSrc(maxWidth: 150, maxHeight: 150, crop: CENTER)
181 |       }
182 |     }
183 |   }
184 | }
185 | </page-query>
186 | 
187 | <style lang="scss" scoped>
188 | .is-fullwidth {
189 |   width: 100%;
190 |   .control {
191 |     width: 100%;
192 |   }
193 | }
194 | .quantity {
195 |   width: 100%;
196 |   height: 50px;
197 | }
198 | .add-to-cart {
199 |   display: flex;
200 |   align-items: flex-end;
201 | }
202 | </style>
203 | 


--------------------------------------------------------------------------------