@crm-market/template-shared 1.0.0

package/components/BestSellers/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/Cart/ProductQuantity.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="product-quantity">
+    <div class="add-to-cart-counter">
+      <div @click="decrement">
+        <input type="button" class="minusBtn" value="-" />
+      </div>
+      <input type="text" size="25" v-model="internalValue" class="count" />
+      <div @click="increment">
+        <input type="button" class="plusBtn" value="+" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const internalValue = ref(0);
+
+const increment = () => {
+  internalValue.value++;
+};
+
+const decrement = () => {
+  if (internalValue.value > 0) {
+    internalValue.value--;
+  }
+};
+</script>

package/components/Cart/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="ptb-60">
+    <div class="container">
+      <div class="table-responsive cart-table">
+        <table class="table align-middle">
+          <thead>
+            <tr>
+              <th scope="col">Product</th>
+              <th scope="col">Name</th>
+              <th scope="col">Unit Price</th>
+              <th scope="col">Quantity</th>
+              <th scope="col">Subtotal</th>
+              <th scope="col">Remove</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-6.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  Multiplatform Wireless Noise-Cancelling Gaming Headset
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$79</span>
+              </td>
+              <td>
+                <CartProductQuantity />
+              </td>
+              <td>
+                <span class="price">$79</span>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-7.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  GPS Smartwatch with Bright Touchscreen Display
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$119</span>
+              </td>
+              <td>
+                <div class="product-quantity">
+                  <CartProductQuantity />
+                </div>
+              </td>
+              <td>
+                <span class="price">$119</span>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <NuxtLink to="/product-details">
+                  <img
+                    src="~/assets/images/product-8.png"
+                    class="cart-product"
+                    alt="product"
+                  />
+                </NuxtLink>
+              </td>
+              <td>
+                <NuxtLink to="/product-details" class="title">
+                  SAMSUNG 32-Inch Class QLED 4K Q60C Series Quantum HDR
+                </NuxtLink>
+              </td>
+              <td>
+                <span class="price">$397</span>
+              </td>
+              <td>
+                <div class="product-quantity">
+                  <CartProductQuantity />
+                </div>
+              </td>
+              <td>
+                <span class="price">$397</span>
+              </td>
+              <td>
+                <button class="border-0 p-0 bg-transparent remove">
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="row justify-content-between mt-4">
+        <div class="col-xxl-4 col-lg-6">
+          <div class="d-md-flex coupon-wrap">
+            <input
+              type="text"
+              class="form-control w-100"
+              placeholder="Coupon"
+            />
+            <button
+              type="submit"
+              class="btn btn-warning text-white mt-3 mt-md-0 w-100"
+            >
+              Apply Coupon
+              <i class="flaticon-up-right-arrow"></i>
+            </button>
+          </div>
+        </div>
+        <div class="col-xxl-4 col-lg-6 text-end">
+          <button
+            type="submit"
+            class="btn btn-warning text-white w-100 mt-3 mt-lg-0"
+          >
+            Update Price
+            <i class="flaticon-up-right-arrow"></i>
+          </button>
+        </div>
+      </div>
+
+      <div class="total-cart">
+        <h3>Cart Totals</h3>
+        <ul>
+          <li class="d-flex justify-content-between">
+            <span class="title">Subtotal</span>
+            <span class="price">$595</span>
+          </li>
+          <li class="d-flex justify-content-between">
+            <span class="title">Total</span>
+            <span class="price">$595</span>
+          </li>
+        </ul>
+        <NuxtLink to="/checkout" class="btn btn-warning text-white">
+          Proceed To Checkout
+          <i class="flaticon-up-right-arrow"></i>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Cart",
+};
+</script>