refactor: ProductCard component

beljp · Aug 19, 2024 · 8b16a48 · 8b16a48
1 parent 89b4cb4
commit 8b16a48
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/woonuxt_base/app/components/productElements/ProductCard.vue b/woonuxt_base/app/components/productElements/ProductCard.vue
@@ -6,7 +6,7 @@ const props = defineProps({
   index: { type: Number, default: 1 },
 });
 
-const imgWidth = 500;
+const imgWidth = 250;
 const imgHeight = Math.round(imgWidth * 1.125);
 
 // example: ?filter=pa_color[green,blue],pa_size[large]
@@ -17,7 +17,7 @@ const paColor = ref(filterQuery.value?.split('pa_color[')[1]?.split(']')[0]?.spl
 watch(
   () => route.query,
   () => {
-    filterQuery.value = route.query.filter;
+    filterQuery.value = route.query.filter as string;
     paColor.value = filterQuery.value?.split('pa_color[')[1]?.split(']')[0]?.split(',') || [];
   },
 );
@@ -26,19 +26,19 @@ const mainImage = computed<string>(() => props.node?.image?.producCardSourceUrl
 const imagetoDisplay = computed<string>(() => {
   if (paColor.value.length) {
     const activeColorImage = props.node?.variations?.nodes.filter((variation) => {
-      const hasMatchingAttributes = variation.attributes?.nodes.some((attribute) => paColor.value.some((color) => attribute.value.includes(color)));
+      const hasMatchingAttributes = variation.attributes?.nodes.some((attribute) => paColor.value.some((color) => attribute?.value?.includes(color)));
       const hasMatchingSlug = paColor.value.some((color) => variation.slug?.includes(color));
       return hasMatchingAttributes || hasMatchingSlug;
     });
-    if (activeColorImage?.length) return activeColorImage[0].image?.producCardSourceUrl || activeColorImage[0].image?.sourceUrl || mainImage.value;
+    if (activeColorImage?.length) return activeColorImage[0]?.image?.producCardSourceUrl || activeColorImage[0]?.image?.sourceUrl || mainImage.value;
   }
   return mainImage.value;
 });
 </script>
 
 <template>
   <div class="relative product-card">
-    <NuxtLink :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
+    <NuxtLink v-if="node.slug" :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
       <SaleBadge :node="node" class="absolute top-2 right-2" />
       <NuxtImg
         v-if="imagetoDisplay"
@@ -54,7 +54,7 @@ const imagetoDisplay = computed<string>(() => {
     </NuxtLink>
     <div class="p-2">
       <StarRating v-if="storeSettings.showReviews" :rating="node.averageRating" :count="node.reviewCount" />
-      <NuxtLink :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
+      <NuxtLink v-if="node.slug" :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
         <h2 class="mb-2 font-light leading-tight">{{ node.name }}</h2>
       </NuxtLink>
       <ProductPrice class="text-sm" :sale-price="node.salePrice" :regular-price="node.regularPrice" />