first commit

pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

pages/basket/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-row>
+    <el-col>
+      <h1>Panier</h1>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Index'
+}
+</script>
+
+<style scoped>
+
+</style>

pages/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="full-width">
+    <h1>Welcome to my socket shop</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData ({ $shopify }) {
+    const products = await $shopify.product.fetchAll()
+    return { products }
+  }
+}
+</script>
+
+<style>
+  .full-width {
+    width: 100%;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  &:last-child {
+     margin-bottom: 0;
+   }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+  .image {
+    width: 100%;
+    height: 15rem;
+  }
+  .description {
+    margin-bottom: 1rem;
+  }
+</style>

pages/products/_handle/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>{{ product.title }}</h1>
+    <p>{{ product.description }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  async asyncData ({ params, $shopify }) {
+    const product = await $shopify.product.fetchByHandle(params.handle)
+    return { product }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/products/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="full-width">
+    <h1>Here are the products</h1>
+    <el-row :gutter="20">
+      <el-col v-for="product in products" :key="product.id" :span="6">
+        <el-card :body-style="{ padding: '0px' }" :header="product.title">
+          <img :src="product.images[0].src" class="image">
+          <div style="padding: 14px;">
+            <div class="description">{{ product.description.substr(0, 150) }}...</div>
+            <div class="bottom">
+              <el-row>
+                <nuxt-link :to="'/products/' + product.handle">
+                  <el-button class="button" round type="primary">
+                    Voir
+                  </el-button>
+                </nuxt-link>
+              </el-row>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  async asyncData ({ $shopify }) {
+    const products = await $shopify.product.fetchAll()
+    return { products }
+  }
+}
+</script>
+
+<style scoped>
+  .full-width {
+    width: 100%;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  &:last-child {
+     margin-bottom: 0;
+   }
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+  .bg-purple-dark {
+    background: #99a9bf;
+  }
+  .bg-purple {
+    background: #d3dce6;
+  }
+  .bg-purple-light {
+    background: #e5e9f2;
+  }
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
+  .row-bg {
+    padding: 10px 0;
+    background-color: #f9fafc;
+  }
+  .image {
+    width: 100%;
+    height: 15rem;
+  }
+  .description {
+    margin-bottom: 1rem;
+  }
+</style>