Toast

Author: w3bdesign

components/Products/ProductsSingleProduct.vue

@@ -57,11 +57,11 @@
                 ADD TO CART
               </CommonButton>
             </div>
-            <p v-if="successMessage" class="mt-4 text-green-600">{{ successMessage }}</p>
           </div>
         </div>
       </div>
     </section>
+    <Toast ref="toast" />
   </template>
 </template>
 
@@ -82,6 +82,7 @@ import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.
 
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
+import Toast from "@/components/common/Toast.vue";
 
 import { stripHTML, filteredVariantName } from "@/utils/functions";
 
@@ -92,7 +93,7 @@ const cart = useCart();
 const isLoading = computed(() => cart.loading);
 
 const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
-const successMessage = ref('');
+const toast = ref(null);
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -122,10 +123,7 @@ watch(
 const addProductToCart = async (product) => {
   try {
     await cart.addToCart(product);
-    successMessage.value = 'Product added to cart successfully!';
-    setTimeout(() => {
-      successMessage.value = '';
-    }, 3000);
+    toast.value.show();
   } catch (error) {
     console.error('Error adding product to cart:', error);
     // You might want to show an error message to the user here

components/common/Toast.vue

@@ -0,0 +1,71 @@
+<template>
+  <Teleport to="body">
+    <transition name="toast">
+      <div v-if="isVisible" class="toast-container">
+        <div class="toast-content">
+          {{ message }}
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: 'Product added to cart'
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  }
+});
+
+const isVisible = ref(false);
+
+const show = () => {
+  isVisible.value = true;
+  setTimeout(() => {
+    isVisible.value = false;
+  }, props.duration);
+};
+
+defineExpose({ show });
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+}
+
+.toast-content {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.5s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.toast-enter-to,
+.toast-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>