Skip to content

Commit f6ef17f

Browse files
zackhazackha
committed
fix: add product card and empty component
1 parent 164fd9f commit f6ef17f

File tree

3 files changed

+63
-46
lines changed

3 files changed

+63
-46
lines changed

‎app.vue‎

Lines changed: 3 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -97,59 +97,16 @@
9797
</div>
9898
</div>
9999
<div class="grid grid-cols-3 gap-4">
100-
<div
101-
v-for="node in products"
102-
:key="node.id"
103-
class="group cursor-pointer rounded-2xl dark:bg-secondary-bg-d hover:dark:bg-[#222222] px-4 pt-4 pb-3 transition ease-[ease] duration-300 dark:border-[#222222] hover:dark:border-[#303030] border">
104-
<div class="relative mb-4 pb-[133%] dark:shadow-[0_8px_24px_rgba(0,0,0,.5)] rounded-lg overflow-hidden">
105-
<NuxtImg
106-
loading="lazy"
107-
:title="node.name"
108-
:alt="node.image.altText || node.name"
109-
:src="node.galleryImages.nodes[0].sourceUrl"
110-
class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover" />
111-
<NuxtImg
112-
loading="lazy"
113-
:title="node.name"
114-
:alt="node.image.altText || node.name"
115-
:src="node.image.sourceUrl"
116-
class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover transition-opacity duration-300 group-hover:opacity-0" />
117-
</div>
118-
<div class="mb-1 grid grid-flow-col gap-6 px-2 text-sm font-semibold">
119-
<div class="flex min-w-0 flex-col justify-between gap-1">
120-
<div class="text-xs text-secondary-text dark:text-secondary-text-d transition-all hover:text-black hover:dark:text-neutral-100">
121-
{{ node.allPaUrunTipi.nodes[0].name }}
122-
</div>
123-
<div :title="node.name" class="overflow-hidden text-ellipsis whitespace-nowrap">
124-
{{ node.name }}
125-
</div>
126-
</div>
127-
<div class="flex flex-col gap-1 text-right">
128-
<div class="text-xs text-secondary-text dark:text-secondary-text-d line-through" v-html="node.regularPrice"></div>
129-
<div class="font-bold text-[#d9000c] dark:text-[#ff0000]" v-html="node.salePrice"></div>
130-
</div>
131-
</div>
132-
</div>
100+
<ProductCard v-for="product in products" :key="product.id" :product="product" />
133101
<ProductSkeleton v-if="loading" />
134102
</div>
135-
<div v-if="!empty && !loading" class="p-6 text-center text-lg">
136-
<Icon name="majesticons:search-line" size="99"></Icon>
137-
<div class="py-4">
138-
<span v-if="selectedCategory">
139-
In the <strong>{{ selectedCategory }}</strong> category,
140-
</span>
141-
<span v-if="searchTerm">
142-
there are no items matching for: <strong>{{ searchTerm }}</strong>
143-
</span>
144-
</div>
145-
<div class="text-sm">Try improving your results by double checking your spelling or trying a more general keyword.</div>
146-
</div>
103+
<ProductEmpty v-if="!empty && !loading" :cat="selectedCategory" :term="searchTerm" />
147104
<Footer />
148105
</div>
149106
</div>
150107
</template>
151108

152-
<script setup lang="ts">
109+
<script setup>
153110
const { products, empty, loading, categories, options, searchTerm, selectedCategory, selectedOption, isDropdownCategory, isDropdownSortBy } = useSearch();
154111
</script>
155112

‎components/ProductCard.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div
3+
class="group cursor-pointer rounded-2xl dark:bg-secondary-bg-d hover:dark:bg-[#222222] px-4 pt-4 pb-3 transition ease-[ease] duration-300 dark:border-[#222222] hover:dark:border-[#303030] border">
4+
<div class="relative mb-4 pb-[133%] dark:shadow-[0_8px_24px_rgba(0,0,0,.5)] rounded-lg overflow-hidden">
5+
<NuxtImg
6+
loading="lazy"
7+
:title="product.name"
8+
:alt="product.image.altText || product.name"
9+
:src="product.galleryImages.nodes[0].sourceUrl"
10+
class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover" />
11+
<NuxtImg
12+
loading="lazy"
13+
:title="product.name"
14+
:alt="product.image.altText || product.name"
15+
:src="product.image.sourceUrl"
16+
class="absolute h-full w-full dark:bg-neutral-800 bg-neutral-200 object-cover transition-opacity duration-300 group-hover:opacity-0" />
17+
</div>
18+
<div class="mb-1 grid grid-flow-col gap-6 px-2 text-sm font-semibold">
19+
<div class="flex min-w-0 flex-col justify-between gap-1">
20+
<div class="text-xs text-secondary-text dark:text-secondary-text-d transition-all hover:text-black hover:dark:text-neutral-100">
21+
{{ product.allPaUrunTipi.nodes[0].name }}
22+
</div>
23+
<div :title="product.name" class="overflow-hidden text-ellipsis whitespace-nowrap">
24+
{{ product.name }}
25+
</div>
26+
</div>
27+
<div class="flex flex-col gap-1 text-right">
28+
<div class="text-xs text-secondary-text dark:text-secondary-text-d line-through" v-html="product.regularPrice"></div>
29+
<div class="font-bold text-[#d9000c] dark:text-[#ff0000]" v-html="product.salePrice"></div>
30+
</div>
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script setup lang="ts">
36+
defineProps({
37+
product: { type: Object, default: null },
38+
});
39+
</script>

‎components/ProductEmpty.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div class="p-6 text-center text-lg">
3+
<Icon name="majesticons:search-line" size="99"></Icon>
4+
<div class="py-4">
5+
<span v-if="cat">
6+
In the <strong>{{ cat }}</strong> category,
7+
</span>
8+
<span v-if="term">
9+
there are no items matching for: <strong>{{ term }}</strong>
10+
</span>
11+
</div>
12+
<div class="text-sm">Try improving your results by double checking your spelling or trying a more general keyword.</div>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
defineProps({
18+
cat: { type: String, default: null },
19+
term: { type: String, default: null },
20+
});
21+
</script>

0 commit comments

Comments
 (0)