Merge pull request #824 from anagha-chaudhari/wishlist

Improvised Wishlist
Anushkabh · Jul 28, 2024 · a1b2cd2 · a1b2cd2
2 parents da93170 + 45e3211
commit a1b2cd2
Show file tree

Hide file tree

Showing 5 changed files with 876 additions and 602 deletions.
diff --git a/assets/js/shop.js b/assets/js/shop.js
@@ -1,6 +1,6 @@
 // Add to Wishlist
 
-function addToWishlist(name, price) {
+function addToWishlist(name, imageUrl, price) {
   var wishlistItems = JSON.parse(localStorage.getItem('wishlistItems')) || [];
 
   var existingItem = wishlistItems.find(function (item) {
@@ -13,6 +13,7 @@ function addToWishlist(name, price) {
 
   var newItem = {
     name: name,
+    imageUrl: imageUrl,
     price: price,
   };
 

diff --git a/assets/js/wishlist.js b/assets/js/wishlist.js
@@ -1,31 +1,114 @@
-var wishlistItems = JSON.parse(localStorage.getItem('wishlistItems')) || [];
-var wishlistItemsContainer = document.getElementById('wishlist-items');
+document.addEventListener('DOMContentLoaded', function() {
+    var wishlistItems = JSON.parse(localStorage.getItem('wishlistItems')) || [];
+    var wishlistTableBody = document.getElementById('wishlistBody');
+    var emptyWishlistBtn = document.getElementById('emptyWishlistBtn');
+    var goToCartBtn = document.getElementById('goToCartBtn');
 
-function renderWishlist() {
-  wishlistItemsContainer.innerHTML = '';
+    function renderWishlist() {
+        wishlistTableBody.innerHTML = '';
 
-  wishlistItems.forEach(function (item) {
-    var itemElement = document.createElement('div');
-    itemElement.classList.add('wishlist-item');
+        wishlistItems.forEach(function(item) {
+            var row = document.createElement('tr');
 
-    var itemName = document.createElement('span');
-    itemName.textContent = item.name;
-    itemName.classList.add('item-name');
-    itemElement.appendChild(itemName);
+            var imageCell = document.createElement('td');
+            var image = document.createElement('img');
+            image.src = item.imageUrl; 
+            image.alt = item.name;
+            image.classList.add('data-img');
+            image.style.width = '50px';
+            image.style.height = 'auto';
+            image.style.borderRadius = '5px';
+            imageCell.appendChild(image);
+            row.appendChild(imageCell);
 
-    var itemPrice = document.createElement('span');
-    itemPrice.textContent = '₹' + item.price;
-    itemPrice.classList.add('item-price');
-    itemElement.appendChild(itemPrice);
+            var nameCell = document.createElement('td');
+            nameCell.textContent = item.name;
+            row.appendChild(nameCell);
 
-    wishlistItemsContainer.appendChild(itemElement);
-  });
-}
+            var stockCell = document.createElement('td');
+            stockCell.textContent = item.inStock ? 'In Stock' : 'In Stock'; // **Temperory**
+            row.appendChild(stockCell);
 
-renderWishlist();
+            var addToCartCell = document.createElement('td');
+            var addToCartButton = document.createElement('button');
+            addToCartButton.innerHTML = '<i class="fa-solid fa-cart-plus"></i> Add to Cart';
+            addToCartButton.classList.add('add-to-cart-btn');
+            addToCartButton.addEventListener('click', function() {
+                addToCart(item.name, item.imageUrl, item.price);
+            });
+            addToCartCell.appendChild(addToCartButton);
+            row.appendChild(addToCartCell);
+
+            var removeCell = document.createElement('td');
+            var removeButton = document.createElement('button');
+            removeButton.innerHTML = '<i class="fa-solid fa-trash"></i>';
+            removeButton.classList.add('remove-btn');
+            removeButton.addEventListener('click', function() {
+                removeFromWishlist(item);
+            });
+            removeCell.appendChild(removeButton);
+            row.appendChild(removeCell);
+
+            wishlistTableBody.appendChild(row);
+        });
+    }
+
+    function addToCart(name, imageUrl, price) {
+        var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
+
+        var existingItem = cartItems.find(function(item) {
+            return item.name === name;
+        });
+
+        if (existingItem) {
+            existingItem.quantity++;
+        } else {
+            cartItems.push({
+                name: name,
+                imageUrl: imageUrl,
+                price: price,
+                quantity: 1
+            });
+        }
+        window.alert = function() {};
+        localStorage.setItem('cartItems', JSON.stringify(cartItems));
+
+        // Show success toast
+        Toastify({
+            text: "Product added to cart!",
+            duration: 5000,
+            gravity: "top",
+            innerHeight: 50,
+            position: "right",
+            backgroundColor: "rgba(0,128,0,0.8)",
+        }).showToast();
+    }
+
+    function removeFromWishlist(item) {
+        var index = wishlistItems.findIndex(function(wishlistItem) {
+            return wishlistItem.name === item.name; 
+        });
+        if (index !== -1) {
+            wishlistItems.splice(index, 1);
+            localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+            renderWishlist();
+        }
+    }
+
+    function emptyWishlist() {
+        localStorage.removeItem('wishlistItems');
+        wishlistItems = [];
+        renderWishlist();
+    }
+
+    emptyWishlistBtn.addEventListener('click', function() {
+        emptyWishlist();
+    });
+
+    goToCartBtn.addEventListener('click', function() {
+        window.location.href = 'cart.html';
+    });
+
+    renderWishlist();
+});
 
-function emptyWishlist() {
-  localStorage.removeItem('wishlistItems');
-  wishlistItems = [];
-  renderWishlist();
-}
diff --git a/index.html b/index.html
@@ -698,7 +698,6 @@ <h3>FRESH !</h3>
                   ><i class="ri-seedling-fill"></i> Wishlist
                   <span id="wishlistCount" class="wishlist-count">0</span>
                 </a>
-
                 <div
                   class="dropdown-menu"
                   aria-labelledby="wishlistDropdown"
@@ -733,13 +732,6 @@ <h3>FRESH !</h3>
               </li>
             </ul>
             <input type="checkbox" id="toggle" />
-            <div
-              class="dropdown-menu"
-              aria-labelledby="wishlistDropdown"
-              id="wishlistDropdownContent"
-            >
-              <!-- Wishlist items will be dynamically added here -->
-            </div>
             <input type="checkbox" id="toggle" />
 
             <label class="toggle" for="toggle" style="margin-left: 20px">
@@ -1632,7 +1624,6 @@ <h3>Contact US</h3>
     ></script>
     <!-- <script type="module" src="./assets/js/blog.js"></script> -->
     <script type="text/javascript" src="assets/js/theme.js"></script>
-    <script src="assets/js/shop.js"></script>
     <script src="assets/js/scripts.js"></script>
     <script src="assets/js/darkmode.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
@@ -1688,6 +1679,139 @@ <h3>Contact US</h3>
       crossorigin="anonymous"
     ></script>
 
+    <!-- shop.js -->
+
+    <script>
+      // Add to Wishlist
+
+      function addToWishlist(name, imageUrl, price) {
+        var wishlistItems = JSON.parse(localStorage.getItem('wishlistItems')) || [];
+
+        var existingItem = wishlistItems.find(function (item) {
+          return item.name === name;
+        });
+
+        if (existingItem) {
+          return;
+        }
+
+        var newItem = {
+          name: name,
+          imageUrl: imageUrl,
+          price: price,
+        };
+
+        wishlistItems.push(newItem);
+
+        localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+
+        updateDropdownWishlist(wishlistItems);
+
+        alert('Item added to wishlist successfully!');
+        Toastify({
+          text: 'Product added to wishlist!',
+          duration: 5000,
+          gravity: 'top',
+          innerHeight: 50,
+          position: 'right',
+          backgroundColor: 'rgba(0,128,0,0.8)',
+        }).showToast();
+      }
+
+      function updateDropdownWishlist(items) {
+        var dropdownContent = document.getElementById('wishlistDropdownContent');
+        dropdownContent.innerHTML = '';
+
+        items.forEach(function (item) {
+          var listItem = document.createElement('div');
+          listItem.classList.add('wishlist-item');
+
+          var itemName = document.createElement('span');
+          itemName.textContent = item.name + ' - ₹' + item.price;
+          itemName.classList.add('item-name');
+          listItem.appendChild(itemName);
+
+          var addToCartButton = document.createElement('button');
+          addToCartButton.textContent = 'Add to Cart';
+          addToCartButton.classList.add('add-to-cart-button');
+          addToCartButton.addEventListener('click', function () {
+            addToCart(item.name, item.imageUrl, item.price);
+          });
+          listItem.appendChild(addToCartButton);
+
+          var removeButton = document.createElement('button');
+          removeButton.textContent = 'Remove';
+          removeButton.classList.add('remove-button');
+          removeButton.addEventListener('click', function () {
+            removeFromWishlist(item.name);
+          });
+          listItem.appendChild(removeButton);
+
+          dropdownContent.appendChild(listItem);
+        });
+
+        var viewWishlistLink = document.createElement('a');
+        viewWishlistLink.textContent = 'View Wishlist';
+        viewWishlistLink.href = 'src/wishlist.html'; 
+        viewWishlistLink.classList.add('view-wishlist-link');
+
+        dropdownContent.appendChild(viewWishlistLink);
+
+        var wishlistCount = items.length;
+        var wishlistCountElement = document.getElementById('wishlistCount');
+        wishlistCountElement.textContent = wishlistCount;
+      }
+
+      function removeFromWishlist(name) {
+        var wishlistItems = JSON.parse(localStorage.getItem('wishlistItems')) || [];
+
+        wishlistItems = wishlistItems.filter(function (item) {
+          return item.name !== name;
+        });
+
+        localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems));
+
+        updateDropdownWishlist(wishlistItems);
+      }
+
+      // Add to Cart
+
+      function addToCart(name, imageUrl, price) {
+        var cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
+
+        var existingItem = cartItems.find(function (item) {
+          return item.name === name;
+        });
+
+        if (existingItem) {
+          existingItem.quantity++;
+        } else {
+          cartItems.push({
+            name: name,
+            imageUrl: imageUrl,
+            price: price,
+            quantity: 1,
+          });
+        }
+
+        localStorage.setItem('cartItems', JSON.stringify(cartItems));
+        // Show success toast
+        Toastify({
+          text: 'Product added to cart!',
+          duration: 5000,
+          gravity: 'top',
+          innerHeight: 50,
+          position: 'right',
+          backgroundColor: 'rgba(0,128,0,0.8)',
+        }).showToast();
+      }
+
+      // Initial update of wishlist on page load
+      var initialWishlistItems =
+      JSON.parse(localStorage.getItem('wishlistItems')) || [];
+      updateDropdownWishlist(initialWishlistItems);
+    </script>
+
     <!-- Swiper JS -->
     <script src="assets/js/swiper-bundle.min.js"></script>
     <!-- Custom JavaScript -->