feature related products

apollo/queries/product/product_detail.gql

@@ -3,7 +3,7 @@ query getSingleProduct($id: ID!) {
     id
     databaseId
     averageRating
-    description
+    description(format: RAW)
     name
     slug
     onSale
@@ -21,6 +21,39 @@ query getSingleProduct($id: ID!) {
       sourceUrl
       link
     }
+    related(first: 3) {
+      nodes {
+        name
+        link
+        onSale
+        image {
+          altText
+          uri
+          title
+          srcSet
+          sourceUrl
+          link
+        }
+        ... on VariableProduct {
+          price
+        }
+        ... on ExternalProduct {
+          price
+        }
+        ... on SimpleProduct {
+          price
+        }
+        ... on GroupProduct {
+          products {
+            nodes {
+              ... on SimpleProduct {
+                price
+              }
+            }
+          }
+        }
+      }
+    }
     productCategories {
       nodes {
         name
@@ -38,31 +71,21 @@ query getSingleProduct($id: ID!) {
     link
     ... on SimpleProduct {
       price
-      id
     }
     ... on VariableProduct {
       price
-      id
     }
     ... on ExternalProduct {
       price
-      id
-      contentType {
-        node {
-          id
-        }
-      }
     }
     ... on GroupProduct {
       products {
         nodes {
           ... on SimpleProduct {
-            id
             price
           }
         }
       }
-      id
     }
   }
 }

apollo/queries/product/products.gql

@@ -4,10 +4,10 @@ query MyQuery {
       id
       databaseId
       averageRating
-      description
       name
       slug
       onSale
+      date
       image {
         altText
         uri

assets/css/main.css

@@ -1574,27 +1574,6 @@ header .lateral.is-mobile .language-search.item-delay_on .close-menu_holder,
   position: relative;
 }
 
-
-
-.related-upsell_products h6 {
-  font-size: 1.4rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 5px;
-  margin-bottom: 5rem;
-}
-
-.related-upsell_products .up-sells,
-.related-upsell_products .related-products {
-  padding: 8rem 0 3rem;
-  margin-bottom: 4px;
-  background-color: #f4f4f4;
-}
-
-.related-upsell_products .related-products {
-  margin-bottom: 0;
-}
-
 .woocommerce .emoji-svg {
   color: #222326;
 }

assets/scss/components/related-upsells.scss

@@ -0,0 +1,19 @@
+.related-upsell_products {
+	h6 {
+		font-size: 1.4rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 5px;
+		margin-bottom: 5rem;
+	}
+	.up-sells {
+		padding: 8rem 0 3rem;
+		margin-bottom: 4px;
+		background-color: #f4f4f4;
+	}
+	.related-products {
+		padding: 8rem 0 3rem;
+		background-color: #f4f4f4;
+		margin-bottom: 0;
+	}
+}

components/BottomFooter.vue

@@ -1,7 +1,13 @@
 <template>
   <footer>
     <div class="max-w-screen-xl flex-grow mx-auto">
-      <DarkModeToggle />
+      <!-- <DarkModeToggle /> -->
+      <p>
+        © Copyright 2021 by
+        <a href="https://github.com/Mowa-zee" target="_blank" rel="nofollow"
+          >Mowa-zee</a
+        >
+      </p>
     </div>
   </footer>
 </template>

components/RelatedProduct.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="related-upsell_products">
+    <section class="related-products">
+      <div class="max-w-screen-xl flex-grow mx-auto">
+        <h6 class="text-center fadeInNeuron">Related products</h6>
+
+        <div class="flex flex-wrap relative overflow-hidden xxl:-mx-8 -mx-4">
+          <div
+            v-for="product in relatedProducts"
+            :key="product.name"
+            class="w-full sm:w-1/2 xl:w-1/3 product xxl:px-8 xxl:pb-16 px-4 pb-8"
+          >
+            <ProductLayout :product="product" />
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    relatedProducts: {
+      required: true,
+      type: Array
+    }
+  }
+}
+</script>
+
+<style></style>

components/SortToggle.vue

@@ -62,8 +62,8 @@ export default {
       isOpen: false,
       sortOptions: [
         'All',
-        'Popularity',
-        'Newness',
+        // 'Popularity',
+        // 'Newness',
         'Low to high',
         'Hight to low'
       ]

components/TopHeader.vue

@@ -6,7 +6,7 @@
           <Cart />
         </div>
         <div class="w-1/3">
-          <Logo />
+          <!-- <Logo /> -->
         </div>
         <div class="w-1/3">
           <Menu />

nuxt.config.js

@@ -143,6 +143,7 @@ export default {
     '~/assets/scss/components/woocommerce-status.scss',
     '~/assets/scss/components/review.scss',
     '~/assets/scss/components/navigation.scss',
+    '~/assets/scss/components/related-upsells.scss',
     '~/assets/scss/components/shopping-bag.scss',
     '~/assets/scss/components/breadcrumb.scss',
     '~/assets/scss/components/comments.scss',

pages/index.vue

@@ -9,7 +9,7 @@
     <div class="shop">
       <div class="flex flex-wrap relative overflow-hidden xxl:-mx-8 -mx-4">
         <div
-          v-for="product in listProduct"
+          v-for="product in listProductComputed"
           :key="product.id"
           class="w-full sm:w-1/2 xl:w-1/3 product xxl:px-8 xxl:pb-16 px-4 pb-8"
         >
@@ -76,17 +76,17 @@ export default {
     listProductComputed() {
       if (this.sort !== 'All') {
         switch (this.sort) {
-          case 'Popularity':
-            return this.resultsSort()
-            break
-          case 'Newness':
-            return this.resultsSort()
-            break
+          // case 'Popularity':
+          //   return this.resultsSort(this.listProduct)
+          //   break
+          // case 'Newness':
+          //   return this.resultsSort(this.listProduct)
+          //   break
           case 'Low to high':
-            return this.resultsSort()
+            return this.sortByPrice(this.listProduct, 'lowtohigh')
             break
           case 'Hight to low':
-            return this.resultsSort()
+            return this.sortByPrice(this.listProduct, 'hightolow')
             break
           default:
             return this.listProduct
@@ -101,8 +101,18 @@ export default {
     onSort(sort) {
       this.sort = sort
     },
-    resultsSort() {
-      return this.listProduct
+    sortByPrice(listProduct, condition) {
+      return listProduct.slice().sort((a, b) => {
+        let na =
+          a['price'] !== undefined ? a['price'].match(/(\d+\.\d{1,2})/g) : false
+        let nb =
+          b['price'] !== undefined ? b['price'].match(/(\d+\.\d{1,2})/g) : false
+        if (condition == 'lowtohigh') {
+          return na - nb
+        } else {
+          return nb - na
+        }
+      })
     }
   }
 }

pages/product/_slug.vue

@@ -77,7 +77,7 @@
                 </h4>
 
                 <a
-                  class="button shadow small light-blue soma-link mt-3 mb-3"
+                  class="button shadow small light-blue mb-5 cursor-pointer"
                   @click="addProductToCart(product)"
                 >
                   <span>Add to cart</span>
@@ -127,8 +127,9 @@
                     role="tabpanel"
                     aria-labelledby="tab-title-description"
                     style="display: block"
-                    v-html="product.description"
-                  />
+                  >
+                    <p>{{ product.description }}</p>
+                  </div>
                   <div
                     id="tab-additional_information"
                     class="woocommerce-Tabs-panel woocommerce-Tabs-panel--additional_information panel entry-content wc-tab"
@@ -159,7 +160,7 @@
           </div>
         </div>
       </div>
-      <div class="max-w-screen-xl mx-auto">
+      <!-- <div class="max-w-screen-xl mx-auto">
         <div class="navigation">
           <div class="flex">
             <div class="w-1/2 prev">
@@ -176,15 +177,18 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
+      <RelatedProduct :related-products="product.related.nodes" class="mt-20" />
     </client-only>
   </div>
 </template>
 
 <script>
 import PRODUCT_DETAIL from '~/apollo/queries/product/product_detail.gql'
+import RelatedProduct from '../../components/RelatedProduct.vue'
 
 export default {
+  components: { RelatedProduct },
   async asyncData({ app, route }) {
     const SLUG = route.params.slug
     const { data } = await app.apolloProvider.defaultClient.query({