@crm-market/template-shared 1.0.0

package/components/ProductDetails/RecentlyViewed.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="recently-viewed-area 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>
+          <NuxtLink to="/products" class="read-more">
+            <span>See All Deals</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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RecentlyViewed",
+};
+</script>

package/components/ProductDetails/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="product-details-area products-page pt-30 pb-60">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6">
+          <v-card-text>
+            <v-tabs-window v-model="tab">
+              <v-tabs-window-item value="img1">
+                <div class="product-details-img">
+                  <img src="~/assets/images/product-66.png" alt="product" />
+                </div>
+              </v-tabs-window-item>
+              <v-tabs-window-item value="img2">
+                <div class="product-details-img">
+                  <img src="~/assets/images/product-67.png" alt="product" />
+                </div>
+              </v-tabs-window-item>
+              <v-tabs-window-item value="img3">
+                <div class="product-details-img">
+                  <img src="~/assets/images/product-68.png" alt="product" />
+                </div>
+              </v-tabs-window-item>
+              <span class="discounts">-10%</span>
+            </v-tabs-window>
+          </v-card-text>
+
+          <v-tabs
+            v-model="tab"
+            bg-color="white"
+            class="products-tabs justify-content-center"
+          >
+            <v-tab value="img1">
+              <img src="~/assets/images/product-66.png" alt="product" />
+            </v-tab>
+            <v-tab value="img2">
+              <img src="~/assets/images/product-67.png" alt="product" />
+            </v-tab>
+            <v-tab value="img3">
+              <img src="~/assets/images/product-68.png" alt="product" />
+            </v-tab>
+          </v-tabs>
+        </div>
+        <div class="col-lg-6">
+          <div class="product-details-content">
+            <span class="stock">
+              <i class="ri-check-line"></i>
+              In Stock
+            </span>
+            <h3>
+              Apple MacBook Pro 16.2" with Liquid Retina XDR Display, M2 Max
+              Chip with 12-Core CPU
+            </h3>
+            <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>
+            <h2 class="price">$399 <del>$450</del></h2>
+            <div class="d-flex style-select">
+              <span>Style:</span>
+              <h5>{{ typeText }}</h5>
+            </div>
+            <div class="select-style mb-4">
+              <input type="radio" class="btn-check" />
+              <label
+                class="btn mb-2 mb-sm-0 mr-1"
+                @click="setTypeTextToFirst"
+                :class="{ active: typeActiveButton === 'first' }"
+              >
+                Apple M1 Max Chip
+              </label>
+              <input type="radio" class="btn-check" />
+              <label
+                class="btn mb-2 mb-sm-0"
+                @click="setTypeTextToSecond"
+                :class="{ active: typeActiveButton === 'second' }"
+              >
+                Apple M1 Pro Chip
+              </label>
+            </div>
+            <div class="d-flex style-select">
+              <span>Capacity:</span>
+              <h5>{{ capacityText }}</h5>
+            </div>
+            <div class="select-style mb-4">
+              <input type="radio" class="btn-check" />
+              <label
+                class="btn mb-2 mb-sm-0 mr-1"
+                @click="setCapacityTextToFirst"
+                :class="{ active: capacityActiveButton === 'first' }"
+              >
+                512 GB
+              </label>
+
+              <input type="radio" class="btn-check" />
+              <label
+                class="btn mb-2 mb-sm-0"
+                @click="setCapacityTextToSecond"
+                :class="{ active: capacityActiveButton === 'second' }"
+              >
+                1 TB
+              </label>
+            </div>
+            <div class="d-flex style-select">
+              <span>Color:</span>
+              <h5>{{ colorText }}</h5>
+            </div>
+            <ul class="d-flex ps-0 mb-0 list-unstyled select-color gap-2 mb-4">
+              <li
+                class="color1"
+                @click="setColorTextToFirst"
+                :class="{ active: colorActiveButton === 'first' }"
+              ></li>
+              <li
+                class="color2"
+                @click="setColorTextToSecond"
+                :class="{ active: colorActiveButton === 'second' }"
+              ></li>
+            </ul>
+            <div class="d-flex align-items-center mb-4 gap-3">
+              <ProductDetailsProductQuantity />
+              <button class="btn btn-success text-white rounded-pill">
+                <i class="ri-shopping-cart-line"></i>
+                <span>Add To Cart</span>
+              </button>
+            </div>
+            <button class="d-flex align-items-center gap-3 wishlist mb-3">
+              <i class="ri-heart-line"></i>
+              <span>Add to wishlist</span>
+            </button>
+            <button class="d-flex align-items-center gap-3 wishlist">
+              <i class="ri-eye-line"></i>
+              <span><span>565 people</span> are viewing the products</span>
+            </button>
+            <ul class="services-list ps-0 mb-0 list-unstyled">
+              <li class="d-flex align-items-center">
+                <i class="ri-check-line"></i>
+                <span>Free delivery today</span>
+              </li>
+              <li class="d-flex align-items-center">
+                <i class="ri-check-line"></i>
+                <span>100% money back Guarantee</span>
+              </li>
+              <li class="d-flex align-items-center">
+                <i class="ri-check-line"></i>
+                <span>7 days product return policy</span>
+              </li>
+            </ul>
+            <ul class="sku-list ps-0 mb-0 list-unstyled">
+              <li class="d-flex align-items-center">
+                <span class="title">SKU:</span>
+                <span class="title2">SMTGS6T45</span>
+              </li>
+              <li class="d-flex align-items-center">
+                <span class="title">Category:</span>
+                <span class="title2">Computer</span>
+              </li>
+              <li class="d-flex align-items-center">
+                <span class="title">Tags:</span>
+                <span class="title2">laptop, macbook, PC</span>
+              </li>
+            </ul>
+            <ul
+              class="social-link ps-0 mb-0 list-unstyled d-flex gap-2 flex-wrap"
+            >
+              <li class="d-flex align-items-center me-2">
+                <span>Share:</span>
+              </li>
+              <li class="d-flex align-items-center gap-2">
+                <a href="https://facebook.com/" target="_blank">
+                  <i class="ri-facebook-fill"></i>
+                </a>
+              </li>
+              <li class="d-flex align-items-center gap-2">
+                <a href="https://twitter.com/" target="_blank">
+                  <i class="ri-twitter-x-line"></i>
+                </a>
+              </li>
+              <li class="d-flex align-items-center gap-2">
+                <a href="https://linkedin.com/" target="_blank">
+                  <i class="ri-linkedin-fill"></i>
+                </a>
+              </li>
+              <li class="d-flex align-items-center gap-2">
+                <a href="https://whatsapp.com/" target="_blank">
+                  <i class="ri-whatsapp-line"></i>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="pt-60"></div>
+
+      <ProductDetailsTab />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  name: "ProductDetails",
+  data: () => ({
+    tab: null,
+  }),
+  setup() {
+    const typeText = ref("Apple M1 Max Chip");
+    const typeActiveButton = ref("first");
+
+    const setTypeTextToFirst = () => {
+      typeText.value = "Apple M1 Max Chip";
+      typeActiveButton.value = "first";
+    };
+
+    const setTypeTextToSecond = () => {
+      typeText.value = "Apple M1 Pro Chip";
+      typeActiveButton.value = "second";
+    };
+
+    const capacityText = ref("512 GB");
+    const capacityActiveButton = ref("first");
+
+    const setCapacityTextToFirst = () => {
+      capacityText.value = "512 GB";
+      capacityActiveButton.value = "first";
+    };
+
+    const setCapacityTextToSecond = () => {
+      capacityText.value = "1 TB";
+      capacityActiveButton.value = "second";
+    };
+
+    const colorText = ref("Silver");
+    const colorActiveButton = ref("first");
+
+    const setColorTextToFirst = () => {
+      colorText.value = "Silver";
+      colorActiveButton.value = "first";
+    };
+
+    const setColorTextToSecond = () => {
+      colorText.value = "Gray";
+      colorActiveButton.value = "second";
+    };
+
+    return {
+      typeText,
+      typeActiveButton,
+      setTypeTextToFirst,
+      setTypeTextToSecond,
+      capacityText,
+      capacityActiveButton,
+      setCapacityTextToFirst,
+      setCapacityTextToSecond,
+      colorText,
+      colorActiveButton,
+      setColorTextToFirst,
+      setColorTextToSecond,
+    };
+  },
+});
+</script>