@crm-market/template-shared 1.0.6 → 1.0.8

package/components/ProductDetails/RecentlyViewed.vue

@@ -1,304 +1,68 @@
 <template>
-  <div class="recently-viewed-area pb-60 products-page">
+  <div v-if="items.length" class="recently-viewed-area recently-viewed--compact pb-60 products-page">
     <div class="container position-relative">
-      <div
-        class="d-lg-flex align-items-center justify-content-between text-center mb-27 mt-minus-6 border-top pt-4"
-      >
-        <h3 class="fs-3 mb-0 mb-1 mb-sm-0">Recently Viewed</h3>
+      <div class="d-lg-flex align-items-center justify-content-between text-center mb-27 mt-minus-6 border-top pt-4">
+        <h3 class="fs-3 mb-0 mb-1 mb-sm-0">{{ t('product.recentlyViewed') }}</h3>
         <div>
           <NuxtLink to="/products" class="read-more">
-            <span>See All Deals</span>
+            <span>{{ t('product.toCatalog') }}</span>
             <i class="ri-arrow-right-up-line ms-1"></i>
           </NuxtLink>
         </div>
       </div>
-      <div class="row justify-content-center g-0">
-        <div class="col-c-20">
-          <div class="single-product-telemobile-item">
-            <div class="product-img position-relative">
-              <NuxtLink to="/product-details" class="d-block">
-                <img src="~/assets/images/product-1.png" alt="product" />
-              </NuxtLink>
-              <div
-                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
-              >
-                <span class="minus-count">-11%</span>
-                <button class="border-0 wish-btn">
-                  <i class="ri-heart-line"></i>
-                  <i class="ri-heart-fill d-none"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Favorite
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-            <div class="product-content">
-              <NuxtLink to="/product-details" class="title">
-                Microwave Oven With LED Lighting - 700 Watts, 0.7 cu ft
-              </NuxtLink>
-              <div class="d-flex gap-1 review">
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <span>(5 Reviews)</span>
-              </div>
-              <h3>$399 <del>$450</del></h3>
-              <div class="d-flex sold-stock gap-4 align-items-center">
-                <span class="sold">620 Sold</span>
-                <span class="stock">
-                  <i class="ri-check-line"></i> 150 In Stock
-                </span>
-              </div>
-              <div
-                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
-              >
-                <span class="delivery">
-                  <i class="ri-truck-line"></i>
-                  Free Delivery
-                </span>
-                <button class="cart-btn">
-                  <i class="ri-shopping-cart-line"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Add To Cart
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-c-20">
-          <div class="single-product-telemobile-item">
-            <div class="product-img position-relative">
-              <NuxtLink to="/product-details" class="d-block">
-                <img src="~/assets/images/product-6.png" alt="product" />
-              </NuxtLink>
-              <div
-                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
-              >
-                <span class="minus-count">-15%</span>
-                <button class="border-0 wish-btn">
-                  <i class="ri-heart-line"></i>
-                  <i class="ri-heart-fill d-none"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Favorite
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-            <div class="product-content">
-              <NuxtLink to="/product-details" class="title">
-                Multiplatform Wireless Noise-Cancelling Gaming Headset
-              </NuxtLink>
-              <div class="d-flex gap-1 review">
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <span>(18 Reviews)</span>
-              </div>
-              <h3>$279 <del>$329</del></h3>
-              <div class="d-flex sold-stock gap-4 align-items-center">
-                <span class="sold">20 Sold</span>
-                <span class="stock">
-                  <i class="ri-check-line"></i>
-                  78 In Stock
-                </span>
-              </div>
-              <div
-                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
-              >
-                <span class="delivery">
-                  <i class="ri-truck-line"></i>
-                  Free Delivery
-                </span>
-                <button class="cart-btn">
-                  <i class="ri-shopping-cart-line"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Add To Cart
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-c-20">
-          <div class="single-product-telemobile-item">
-            <div class="product-img position-relative">
-              <NuxtLink to="/product-details" class="d-block">
-                <img src="~/assets/images/product-7.png" alt="product" />
-              </NuxtLink>
-              <div
-                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
-              >
-                <span class="minus-count">-40%</span>
-                <button class="border-0 wish-btn">
-                  <i class="ri-heart-line"></i>
-                  <i class="ri-heart-fill d-none"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Favorite
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-            <div class="product-content">
-              <NuxtLink to="/product-details" class="title">
-                GPS Smartwatch with Bright Touchscreen Display
-              </NuxtLink>
-              <div class="d-flex gap-1 review">
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <span>(24 Reviews)</span>
-              </div>
-              <h3>$119 <del>$199</del></h3>
-              <div class="d-flex sold-stock gap-4 align-items-center">
-                <span class="sold">435 Sold</span>
-                <span class="stock">
-                  <i class="ri-check-line"></i>
-                  180 In Stock
-                </span>
-              </div>
-              <div
-                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
-              >
-                <span class="delivery">
-                  <i class="ri-truck-line"></i>
-                  Free Delivery
-                </span>
-                <button class="cart-btn">
-                  <i class="ri-shopping-cart-line"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Add To Cart
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-c-20">
-          <div class="single-product-telemobile-item">
-            <div class="product-img position-relative">
-              <NuxtLink to="/product-details" class="d-block">
-                <img src="~/assets/images/product-8.png" alt="product" />
-              </NuxtLink>
-              <div
-                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
-              >
-                <span class="minus-count">-20%</span>
-                <button class="border-0 wish-btn">
-                  <i class="ri-heart-line"></i>
-                  <i class="ri-heart-fill d-none"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Favorite
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-            <div class="product-content">
-              <NuxtLink to="/product-details" class="title">
-                SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
-              </NuxtLink>
-              <div class="d-flex gap-1 review">
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <span>(19 Reviews)</span>
-              </div>
-              <h3>$397 <del>$497</del></h3>
-              <div class="d-flex sold-stock gap-4 align-items-center">
-                <span class="sold">35 Sold</span>
-                <span class="stock">
-                  <i class="ri-check-line"></i>
-                  125 In Stock
-                </span>
-              </div>
-              <div
-                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
-              >
-                <span class="delivery">
-                  <i class="ri-truck-line"></i>
-                  Free Delivery
-                </span>
-                <button class="cart-btn">
-                  <i class="ri-shopping-cart-line"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Add To Cart
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-c-20">
-          <div class="single-product-telemobile-item">
-            <div class="product-img position-relative">
-              <NuxtLink to="/product-details" class="d-block">
-                <img src="~/assets/images/product-9.png" alt="product" />
-              </NuxtLink>
-              <div
-                class="d-flex justify-content-between align-items-center position-absolute top-0 start-0 end-0"
-              >
-                <span class="minus-count">-10%</span>
-                <button class="border-0 wish-btn">
-                  <i class="ri-heart-line"></i>
-                  <i class="ri-heart-fill d-none"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Favorite
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-            <div class="product-content">
-              <NuxtLink to="/product-details" class="title">
-                Apple MacBook Pro 16.2" with Liquid Retina XDR Display
-              </NuxtLink>
-              <div class="d-flex gap-1 review">
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <i class="flaticon-star"></i>
-                <span>(76 Reviews)</span>
-              </div>
-              <h3>$3,499 <del>$3,799</del></h3>
-              <div class="d-flex sold-stock gap-4 align-items-center">
-                <span class="sold">348 Sold</span>
-                <span class="stock">
-                  <i class="ri-check-line"></i>
-                  245 In Stock
-                </span>
-              </div>
-              <div
-                class="d-flex align-items-center justify-content-between delivery-cart gap-4"
-              >
-                <span class="delivery">
-                  <i class="ri-truck-line"></i>
-                  Free Delivery
-                </span>
-                <button class="cart-btn">
-                  <i class="ri-shopping-cart-line"></i>
-                  <v-tooltip activator="parent" location="top">
-                    Add To Cart
-                  </v-tooltip>
-                </button>
-              </div>
-            </div>
-          </div>
+      <!-- Компактні картки: 6 у ряд на десктопі, менші відступи й шрифти -->
+      <div class="row g-3">
+        <div v-for="item in items" :key="item.id" class="col-6 col-md-4 col-lg-2">
+          <CommonProductCard :product="item" />
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: "RecentlyViewed",
-};
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import type { Product } from '../../composables/useProducts';
+
+// Поточний товар не показуємо серед нещодавніх
+const props = defineProps<{ currentId?: string }>();
+
+const { t } = useI18n();
+const { ids, load } = useRecent();
+const { fetchProductsByIds } = useProducts();
+
+const items = ref<Product[]>([]);
+
+onMounted(async () => {
+  load();
+  const list = ids.value.filter((id) => id !== props.currentId);
+  if (list.length) items.value = await fetchProductsByIds(list);
+});
 </script>
+
+<style scoped>
+/* Зменшені картки «Нещодавно переглянуті» (стилі картки — у дочірньому компоненті, тому :deep) */
+.recently-viewed--compact :deep(.single-product-telemobile-item) {
+  padding: 10px;
+}
+.recently-viewed--compact :deep(.single-product-telemobile-item img) {
+  max-height: 140px;
+  object-fit: cover;
+}
+.recently-viewed--compact :deep(.single-product-telemobile-item h3),
+.recently-viewed--compact :deep(.single-product-telemobile-item .title) {
+  font-size: 13px;
+  line-height: 1.3;
+}
+.recently-viewed--compact :deep(.single-product-telemobile-item .price),
+.recently-viewed--compact :deep(.single-product-telemobile-item .fs-5) {
+  font-size: 14px !important;
+}
+.recently-viewed--compact :deep(.single-product-telemobile-item .btn) {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.recently-viewed--compact :deep(.wish-btn) {
+  transform: scale(0.85);
+}
+</style>

package/components/ProductDetails/RelatedProducts.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Product } from '../../composables/useProducts';
+
+/**
+ * «Схожі товари»: товари з тієї ж категорії, без поточного.
+ * Якщо в категорії нічого немає — рекомендовані (featured) товари магазину.
+ */
+const props = defineProps<{ product: Product }>();
+const { t } = useI18n();
+const { fetchByCategory, fetchFeatured } = useProducts();
+
+const LIMIT = 6;
+const categoryId = computed(() => props.product.categories?.[0]?.id || '');
+
+const { data: items } = await useAsyncData(
+  `related-${props.product.id}`,
+  async () => {
+    let list: Product[] = [];
+    if (categoryId.value) {
+      list = await fetchByCategory(categoryId.value, LIMIT + 1).catch(() => []);
+    }
+    list = list.filter((p) => p.id !== props.product.id);
+    if (list.length < 3) {
+      const featured = await fetchFeatured(LIMIT + 1).catch(() => []);
+      const ids = new Set(list.map((p) => p.id));
+      list = [...list, ...featured.filter((p) => p.id !== props.product.id && !ids.has(p.id))];
+    }
+    return list.slice(0, LIMIT);
+  },
+  { default: () => [] as Product[], watch: [() => props.product.id] },
+);
+</script>
+
+<template>
+  <div v-if="items.length" class="related-products-area related-products--compact pb-60 products-page">
+    <div class="container">
+      <div class="d-lg-flex align-items-center justify-content-between text-center mb-27 border-top pt-4">
+        <h3 class="fs-3 mb-0 mb-1 mb-sm-0">{{ t('product.related') }}</h3>
+        <NuxtLink v-if="categoryId && product.categories?.length" :to="categoryPath(product.categories[0])" class="read-more">
+          <span>{{ t('product.moreInCategory') }}</span>
+          <i class="ri-arrow-right-up-line ms-1"></i>
+        </NuxtLink>
+      </div>
+      <div class="row g-3">
+        <div v-for="item in items" :key="item.id" class="col-6 col-md-4 col-lg-2">
+          <CommonProductCard :product="item" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Компактні картки, як у «Нещодавно переглянуті» */
+.related-products--compact :deep(.single-product-telemobile-item) { padding: 10px; }
+.related-products--compact :deep(.single-product-telemobile-item img) { max-height: 140px; object-fit: cover; }
+.related-products--compact :deep(.single-product-telemobile-item h3),
+.related-products--compact :deep(.single-product-telemobile-item .title) { font-size: 13px; line-height: 1.3; }
+.related-products--compact :deep(.single-product-telemobile-item .price),
+.related-products--compact :deep(.single-product-telemobile-item .fs-5) { font-size: 14px !important; }
+.related-products--compact :deep(.single-product-telemobile-item .btn) { padding: 4px 10px; font-size: 12px; }
+.related-products--compact :deep(.wish-btn) { transform: scale(0.85); }
+</style>