add cart for logged in user

components/Cart.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-show="cartIsOpen"
+    class="fixed h-full border-gray border-r w-full bg-white z-10 max-w-sm overflow-y-auto right-0"
+  >
+    <div
+      class="bg-gray-light border-b border-gray flex items-center justify-between h-12"
+    >
+      <div class="pl-5 ml-0 mr-auto uppercase">Cart</div>
+      <button class="w-12 h-12 p-3 mr-0" @click="toggleCart">
+        <BaseIcon svg="multiply.svg" />
+      </button>
+    </div>
+    <client-only>
+      <div v-if="CartId">
+        <apollo-query
+          :query="require('~/queries/getCartDetails.graphql')"
+          :variables="{ cartId: CartId }"
+        >
+          <template
+            slot-scope="{ result: { loading, error, data }, isLoading }"
+          >
+            <!-- Loading -->
+            <BaseLoader v-if="isLoading" />
+            <!-- Error -->
+            <div v-else-if="error" class="error apollo">An error occurred</div>
+            <!-- Result -->
+            <div v-else-if="data">
+              <div v-for="item in data.cart.items" :key="item.product.id">
+                <img
+                  :src="item.product.small_image.url"
+                  :alt="item.product.small_image.label"
+                  width="100"
+                />
+                {{ item.product.name }}
+              </div>
+            </div>
+          </template>
+        </apollo-query>
+      </div>
+    </client-only>
+  </div>
+</template>
+
+<script>
+export default {
+  apollo: {
+    CartId: require('~/queries/getCartId.graphql')
+  },
+  computed: {
+    cartIsOpen() {
+      return this.$store.state.cartIsOpen
+    }
+  },
+  methods: {
+    toggleCart() {
+      this.$store.commit('toggleCart')
+    }
+  }
+}
+</script>

components/Header.vue

@@ -8,6 +8,9 @@
     <nuxt-link to="/" alt="Hoopoe" class="mx-auto">
       <BaseIcon svg="logo.svg" class="w-12 h-12 p-2" />
     </nuxt-link>
+    <button @click="toggleCart">
+      <BaseIcon svg="cart.svg" class="w-12 h-12 p-3" />
+    </button>
   </header>
 </template>
 
@@ -16,6 +19,9 @@ export default {
   methods: {
     toggleNavigation() {
       this.$store.commit('toggleNavigation')
+    },
+    toggleCart() {
+      this.$store.commit('toggleCart')
     }
   }
 }

layouts/default.vue

@@ -2,6 +2,7 @@
   <div class="min-h-screen flex flex-col justify-between">
     <Header />
     <Navigation />
+    <Cart />
     <div class="pl-1 pr-1 pt-16">
       <nuxt />
     </div>

pages/customer/account/login.vue

@@ -61,10 +61,25 @@ export default {
   },
   methods: {
     async onDone({ data }) {
+      // Get source cart id (guest cart id).
+      // Sign in and set the token.
       await this.$apolloHelpers.onLogin(data.generateCustomerToken.token)
       await this.$apollo.query({
         query: require('~/queries/getCustomer.graphql')
       })
+      // Clear all cart/customer data from cache.
+      // Create and get the customer's cart id.
+      const cartData = await this.$apollo.mutate({
+        mutation: require('~/queries/createCart.graphql')
+      })
+      this.$apollo.mutate({
+        mutation: require('~/queries/setCartId.graphql'),
+        variables: {
+          value: cartData.data.cartId
+        }
+      })
+      // Merge the guest cart into the customer cart.
+      // Ensure old stores are updated with any new data.
       this.$router.push('/customer/account')
     }
   }

plugins/apollo-config.js

@@ -4,6 +4,7 @@ import {
   IntrospectionFragmentMatcher
 } from 'apollo-cache-inmemory'
 import { persistCache } from 'apollo-cache-persist'
+import gql from 'graphql-tag'
 import introspectionQueryResultData from '../fragmentTypes.json'
 
 export default () => {
@@ -16,6 +17,32 @@ export default () => {
     useGETForQueries: true
   })
   const cache = new InMemoryCache({ fragmentMatcher })
+
+  const resolvers = {
+    Mutation: {
+      setCartId: (root, { value }, { cache }) => {
+        const data = {
+          CartId: value
+        }
+        cache.writeData({ data })
+        return null
+      }
+    }
+  }
+
+  const typeDefs = gql`
+    type Query {
+      CartId: String!
+    }
+  `
+
+  const onCacheInit = cache => {
+    const data = {
+      CartId: null
+    }
+    cache.writeData({ data })
+  }
+
   if (process.client) {
     persistCache({
       cache,
@@ -26,6 +53,9 @@ export default () => {
     httpEndpoint: uri,
     link,
     cache,
+    resolvers,
+    typeDefs,
+    onCacheInit,
     defaultHttpLink: false
   }
 }

queries/getCartDetails.graphql

@@ -3,6 +3,11 @@ query getCartDetails($cartId: String!) {
         id
         items {
             id
+            prices {
+                price {
+                    value
+                }
+            }
             product {
                 id
                 name

queries/getCartId.graphql

@@ -0,0 +1,3 @@
+query CartId {
+  CartId @client
+}

queries/setCartId.graphql

@@ -0,0 +1,3 @@
+mutation setCartId($value: String!) {
+  setCartId(value: $value) @client
+}

store/index.js

@@ -1,9 +1,13 @@
 export const state = () => ({
-  navigationIsOpen: false
+  navigationIsOpen: false,
+  cartIsOpen: false
 })
 
 export const mutations = {
   toggleNavigation(state) {
     state.navigationIsOpen = !state.navigationIsOpen
+  },
+  toggleCart(state) {
+    state.cartIsOpen = !state.cartIsOpen
   }
 }