Update to use Storefront UI

.gitignore

@@ -7,3 +7,5 @@ dist
 .env*
 .env.*
 static/*
+
+.vercel

gridsome.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  siteName: 'Gridsome + Shopify 😍',
-  siteDescription: 'A full-featured Shopify starter kit for Gridsome, including an account page.',
-  siteUrl: 'https://gridsome-starter-shopify-account.vercel.app',
+  siteName: 'Gridsome, Storefront UI, + Shopify',
+  siteDescription: 'A full-featured Gridsome ecommerce site, built with Storefront UI and Shopify.',
+  siteUrl: 'https://gridsome-starter-shopify-advanced.vercel.app',
   templates: {
     ShopifyProduct: [
       {
@@ -27,7 +27,8 @@ module.exports = {
       use: 'gridsome-source-shopify',
       options: {
         storeName: process.env.GRIDSOME_SHOPIFY_STOREFRONT,
-        storefrontToken: process.env.GRIDSOME_SHOPIFY_STOREFRONT_TOKEN
+        storefrontToken: process.env.GRIDSOME_SHOPIFY_STOREFRONT_TOKEN,
+        perPage: 100
       }
     },
     {
@@ -51,7 +52,6 @@ module.exports = {
         searchFields: ['title', 'handle', 'tags']
       }
     },
-    'gridsome-plugin-purgecss',
     {
       use: '@gridsome/plugin-critical',
       options: {

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "~/*": ["src/*"]
+    }
+  }
+}

package.json

@@ -1,39 +1,31 @@
 {
-  "name": "gridsome-starter-shopify-account",
+  "name": "gridsome-starter-shopify-advanced",
   "private": true,
   "scripts": {
     "build": "gridsome build",
     "develop": "gridsome develop",
     "explore": "gridsome explore"
   },
   "dependencies": {
-    "@gridsome/plugin-critical": "^0.1.6",
+    "@gridsome/plugin-critical": "^0.2.0",
     "@gridsome/plugin-google-analytics": "^0.1.1",
     "@gridsome/plugin-sitemap": "^0.4.0",
-    "apollo-boost": "^0.4.9",
-    "bulma": "^0.9.0",
-    "currency.js": "^1.2.2",
-    "graphql-tag": "^2.10.3",
-    "gridsome": "^0.7.18",
-    "gridsome-plugin-flexsearch": "^1.0.1",
-    "gridsome-plugin-guess-js": "^0.1.1",
+    "@storefront-ui/vue": "^0.8.1",
+    "cookie": "^0.4.1",
+    "currency.js": "^2.0.3",
+    "graphql-request": "^3.1.0",
+    "gridsome": "^0.7.20",
+    "gridsome-plugin-flexsearch": "^1.0.4",
     "gridsome-plugin-manifest": "^0.3.5",
-    "gridsome-plugin-purgecss": "^1.0.12",
-    "gridsome-plugin-service-worker": "^0.1.5",
-    "gridsome-source-shopify": "^0.1.13",
-    "isomorphic-fetch": "^2.2.1",
-    "js-cookie": "^2.2.1",
-    "typeface-karla": "^0.0.72",
-    "typeface-prata": "^0.0.72",
-    "v-lazy-image": "^1.4.0",
-    "vue-apollo": "^3.0.3",
+    "gridsome-plugin-service-worker": "^0.2.6",
+    "gridsome-source-shopify": "0.2.3",
+    "vue-apollo": "^3.0.4",
     "vue-notification": "^1.3.20",
-    "vuex": "^3.5.1",
-    "vuex-persist": "^2.2.0"
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "eslint-config-travisreynolds-vue": "1.1.8",
+    "eslint-config-travisreynolds-vue": "1.2.0",
     "node-sass": "^4.14.1",
-    "sass-loader": "^9.0.2"
+    "sass-loader": "^10.0.2"
   }
 }

src/components/Account/AccountDetails.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="column is-half">
-    <h4 class="subtitle is-family-secondary">
-      {{ displayName }}
-    </h4>
+  <div>
+    <SfHeading
+      :level="4"
+      class="sf-heading--left"
+      :title="displayName" />
     <p>{{ customer.email }}</p>
     <br>
     <div v-if="customer.defaultAddress">
@@ -16,7 +17,11 @@
 </template>
 
 <script>
+// Components
+import { SfHeading } from '@storefront-ui/vue'
+
 export default {
+  components: { SfHeading },
   props: {
     customer: {
       type: Object,

src/components/Account/AccountOrders.vue

@@ -1,54 +1,69 @@
 <template>
-  <div class="column is-half">
-    <h4 class="subtitle is-family-secondary">
-      Order history
-    </h4>
-    <div>
-      <p v-if="!orders.length">
-        You have no orders.
-      </p>
-      <table
-        v-else
-        class="table is-fullwidth">
-        <thead>
-          <tr>
-            <th>Order #</th>
-            <th>Total Items</th>
-            <th>Total Price</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="order in orders"
-            :key="order.id">
-            <th>{{ order.name }}</th>
-            <th>{{ order.lineItems.edges.length }}</th>
-            <th>{{ formatCurrency(order.totalPrice) }}</th>
-            <th>
-              <a
-                :href="order.statusUrl"
-                target="_blank"
-                rel="noreferrer">
-                View Order
-              </a>
-            </th>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+  <div>
+    <SfHeading
+      :level="3"
+      title="Order history" />
+    <br>
+    <p v-if="!orders.length">
+      You have no orders.
+    </p>
+    <SfTable>
+      <SfTableHeading>
+        <SfTableHeader
+          v-for="header in tableHeaders"
+          :key="header">
+          {{ header }}
+        </SfTableHeader>
+      </SfTableHeading>
+      <SfTableRow
+        v-for="order in orders"
+        :key="order.id">
+        <SfTableData>
+          {{ order.name }}
+        </SfTableData>
+        <SfTableData>
+          {{ formatDate(order.processedAt) }}
+        </SfTableData>
+        <SfTableData>
+          {{ order.lineItems.edges.length }}
+        </SfTableData>
+        <SfTableData>
+          {{ formatCurrency(order.totalPrice) }}
+        </SfTableData>
+        <SfTableData>
+          <span>{{ order.fulfillmentStatus }}</span>
+          <br>
+          <a
+            :href="order.statusUrl"
+            target="_blank"
+            rel="noreferrer">
+            View Order
+          </a>
+        </SfTableData>
+      </SfTableRow>
+    </SfTable>
   </div>
 </template>
 
 <script>
+// Components
+import { SfHeading, SfTable } from '@storefront-ui/vue'
+
 export default {
+  components: { SfHeading, SfTable },
   props: {
     orders: {
       type: Array,
       default: () => []
     }
   },
+  data: () => ({
+    tableHeaders: ['Order #', 'Order Date', 'Total Items', 'Amount', 'Status']
+  }),
   methods: {
+    formatDate (date) {
+      return new Intl.DateTimeFormat().format(new Date(date))
+    },
     formatCurrency ({ currencyCode, amount }) {
       return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currencyCode }).format(amount)
     }