Merge pull request #49 from zackha/dev

from dev
zackha · May 9, 2023 · 85911d6 · 85911d6
2 parents 14e4b1b + c0a0c21
commit 85911d6
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 27 deletions.
diff --git a/app.vue b/app.vue
@@ -90,37 +90,41 @@
           </div>
         </div>
       </div>
-      <div class="grid gap-1 grid-cols-3">
-        <div v-for="node in products" :key="node.id" class="bg-neutral-200 dark:bg-neutral-800 group relative">
-          <div class="relative pb-[133%] overflow-hidden">
-            <NuxtImg loading="lazy" :title="node.name" :alt="node.image.altText || node.name" :src="node.image.sourceUrl" class="object-cover w-full h-full absolute" />
+      <div class="grid gap-4 grid-cols-3">
+        <div
+          v-for="node in products"
+          :key="node.id"
+          class="p-2 border border-neutral-800 rounded-2xl group cursor-pointer transition-all hover:bg-neutral-800/40 hover:border-neutral-600">
+          <div class="relative pb-[133%] mb-3">
+            <NuxtImg
+              loading="lazy"
+              :title="node.name"
+              :alt="node.image.altText || node.name"
+              :src="node.galleryImages.nodes[0].sourceUrl"
+              class="object-cover w-full h-full absolute rounded-lg bg-neutral-800" />
+            <NuxtImg
+              loading="lazy"
+              :title="node.name"
+              :alt="node.image.altText || node.name"
+              :src="node.image.sourceUrl"
+              class="object-cover w-full h-full absolute rounded-lg bg-neutral-800 transition-opacity duration-300 group-hover:opacity-0" />
           </div>
-          <div
-            class="bottom-0 left-0 right-0 top-0 flex flex-col justify-center items-center absolute text-white text-sm backdrop-blur-sm bg-black/80 invisible group-hover:visible">
-            <div class="absolute p-4 flex flex-col gap-1 items-center">
-              <div class="font-bold text-center">
-                {{ node.name }}
-              </div>
-              <div class="flex gap-1">
-                <div class="font-semibold text-[#ff0000]" v-html="node.salePrice"></div>
-                <div class="line-through text-neutral-400" v-html="node.regularPrice"></div>
+          <div class="px-2 mb-1 text-sm font-semibold gap-6 grid-flow-col grid">
+            <div class="flex flex-col min-w-0 justify-between gap-1">
+              <div class="text-neutral-400 text-xs">
+                {{ node.allPaUrunTipi.nodes[0].name }}
               </div>
-              <div class="flex gap-2 mt-3 flex-wrap justify-center">
-                <span
-                  :class="[variation.stockStatus === 'OUT_OF_STOCK' ? 'disabled' : '']"
-                  class="py-1.5 px-2 border rounded leading-[10px] h-6"
-                  v-for="variation in node.variations.nodes"
-                  :key="variation.id"
-                  :disabled="variation.stockStatus === 'OUT_OF_STOCK'">
-                  {{ variation.attributes.nodes.map((attr) => attr.value).toString() }}
-                </span>
+              <div :title="node.name" class="text-ellipsis whitespace-nowrap overflow-hidden">
+                {{ node.name }}
               </div>
             </div>
+            <div class="text-right gap-1 flex flex-col">
+              <div class="line-through text-neutral-400 text-xs" v-html="node.regularPrice"></div>
+              <div class="text-[#ff0000] font-bold" v-html="node.salePrice"></div>
+            </div>
           </div>
         </div>
-        <div v-if="loading" v-for="node in 9" :key="node" class="animate-pulse bg-neutral-200 dark:bg-neutral-800">
-          <div class="relative pb-[133%] overflow-hidden"></div>
-        </div>
+        <ProductSkeleton v-if="loading" />
       </div>
       <div v-if="!empty && !loading" class="text-lg text-center p-6">
         <Icon name="heroicons-outline:magnifying-glass" size="99"></Icon>

diff --git a/components/ProductSkeleton.vue b/components/ProductSkeleton.vue
@@ -0,0 +1,17 @@
+<template>
+  <div v-for="i in 9" :key="i" class="p-2 border border-neutral-800 rounded-2xl animate-pulse">
+    <div class="relative pb-[133%] mb-3">
+      <div class="w-full h-full absolute rounded-lg bg-neutral-800"></div>
+    </div>
+    <div class="px-2 mb-1 grid grid-flow-row-dense grid-cols-3">
+      <div class="flex flex-col min-w-0 justify-between gap-2 col-span-2">
+        <div class="bg-neutral-800 w-2/4 h-8 rounded"></div>
+        <div class="bg-neutral-800 w-full h-full rounded"></div>
+      </div>
+      <div class="gap-2 flex flex-col items-end">
+        <div class="bg-neutral-800 w-2/3 h-8 rounded"></div>
+        <div class="bg-neutral-800 w-3/4 h-full rounded"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/gql/queries/getProducts.gql b/gql/queries/getProducts.gql
@@ -6,11 +6,21 @@ query getProducts($after: String, $search: String, $category: String, $order: Or
         name
         regularPrice
         salePrice
+        allPaUrunTipi {
+          nodes {
+            name
+          }
+        }
         image {
           id
           sourceUrl(size: WOOCOMMERCE_SINGLE)
           altText
         }
+        galleryImages {
+          nodes {
+            sourceUrl(size: WOOCOMMERCE_SINGLE)
+          }
+        }
         variations(where: { orderby: { field: NAME, order: DESC } }) {
           nodes {
             id

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxtcommerce",
-  "version": "1.0.4",
+  "version": "1.0.5-beta.0",
   "private": true,
   "scripts": {
     "dev": "nuxi dev",