Skip to content

Commit

Permalink
Wishlist added (#739)
Browse files Browse the repository at this point in the history 
Wishlist added
## Description
I have added Wishlist button in the menu so that people can add them to
their Wishlist without adding them to the cart. I am using local storage
for storing the items. Please have a look at it and let me know if there
is something I can add / improve to make the feature more interesting
and usefull.


## Related Issues

None
- Closes #700 

## Type of PR

- [feature Request ] ()

## Screenshots / videos (if applicable)

![wishlist](https://github.com/user-attachments/assets/3fbf5d54-0529-4b24-92f9-dea52829e17f)




## Checklist

- [x] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [x] I have updated my branch and synced it with project `main` branch
before making this PR
- [x] I have performed a self-review of my code
- [x] I have tested the changes thoroughly before submitting this pull
request.
- [x] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [x] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Jan 8, 2025
2 parents b7c2db8 + 2a46f76 commit e21cec7
Show file tree
Hide file tree
Showing 3 changed files with 815 additions and 17 deletions.
96 changes: 80 additions & 16 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,27 @@
.fa-brands.fa-x-twitter:hover {
color: #181e20 !important;
}
.wishBtn{
font-family: var(--ff-poppins);padding: 10px 20px;
background-color: rgb(196, 74, 74);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 5px;
}
.menu_items .items {
background-color: #f2f2f2;
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
border: 1px solid rgb(186, 186, 201);
margin: 50px 10px;
height: 416px;
width: 230px;
border-radius: 10px;
text-align: center;
font-family: "Bree Serif", serif;
/* transition: 0.5s ease-in-out; */
}
</style>
</head>

Expand Down Expand Up @@ -427,7 +448,7 @@ <h3 style="font-family: var(--ff-philosopher);">Phonograph</h3>
<button class="butt add-to-cart-button" data-product-id="1.01" data-product-name="Phonograph"
data-product-price="10.20" style="font-family:var(--ff-philosopher);">Order Now</button>

<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -446,7 +467,7 @@ <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.02" data-product-name="Radio"
data-product-price="10.20" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -466,7 +487,7 @@ <h3 style="font-family: var(--ff-philosopher);">Television</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.03" data-product-name="Television"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn" >Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -485,6 +506,7 @@ <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.04" data-product-name="Movie Screen Carpet"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<button class="wishBtn">Add to Wishlist</button>
<div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
Expand All @@ -507,7 +529,7 @@ <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.05" data-product-name="Toys"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -526,7 +548,7 @@ <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.06" data-product-name="Puppet Show"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -545,7 +567,7 @@ <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.07" data-product-name="Marbles"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -564,7 +586,7 @@ <h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.08" data-product-name="Drinks"
data-product-price="10.20" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand Down Expand Up @@ -595,7 +617,7 @@ <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.01" data-product-name="Telephone"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -614,7 +636,7 @@ <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.02" data-product-name="Pager"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button> <div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -633,7 +655,7 @@ <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="Snacks" data-product-name="Camera"
data-product-price="5.10" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -653,7 +675,7 @@ <h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
<button class="butt add-to-cart-button" data-product-id="2.04" data-product-name="Type Writer"
style="font-family: Garamond;" data-product-price="5.10"
style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -677,7 +699,7 @@ <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.01" data-product-name="Cross Bow"
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -696,7 +718,7 @@ <h3 style="font-family: var(--ff-philosopher); font-size: 25px">Catapult</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.02" data-product-name="Catapult"
style="font-family: var(--ff-philosopher);" data-product-price="15.80">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -715,7 +737,7 @@ <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.03" data-product-name="Sedan Chair"
data-product-price="15.80" style="font-family: var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand All @@ -733,7 +755,7 @@ <h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.04" data-product-name="Palsnkin"
data-product-price="15.80" style="font-family:var(--ff-philosopher);">Order Now</button>
<div class="star-rating">
<button class="wishBtn">Add to Wishlist</button><div class="star-rating">
<button class="star-button" onclick="rateItem(this, 1)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 2)"><i class="fas fa-star"></i></button>
<button class="star-button" onclick="rateItem(this, 3)"><i class="fas fa-star"></i></button>
Expand Down Expand Up @@ -990,7 +1012,49 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(304, 14%, 46%);">Follow
<script src="cart.js"></script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer>
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
let WishlistButtons = document.querySelectorAll('.wishBtn');

WishlistButtons.forEach(function (Wish) {
Wish.addEventListener('click', function (event) {
if (event.target.classList.contains('wishBtn')) {
var item = event.target.closest('.items');
var itemName = item.querySelector('h3').textContent;
var itemPrice = item.querySelector('p').textContent;

// Retrieve existing wishlist items from localStorage
var Wishlists = JSON.parse(localStorage.getItem('Wishlists')) || [];

// Check if the item already exists in the wishlist
var itemExists = Wishlists.some(function (wishlistItem) {
return wishlistItem.name === itemName;
});

if (itemExists) {
// If the item exists, show a prompt that it already exists
alert("This item is already in your wishlist.");
} else {
// If the item doesn't exist, add it to the wishlist
var newWish = { name: itemName, price: itemPrice };
Wishlists.push(newWish);

// Save updated wishlist back to localStorage
localStorage.setItem('Wishlists', JSON.stringify(Wishlists));

alert("Item added to Wishlist successfully");

// Redirect to the wishlist page
window.location.href = "wishlist.html";
}
}
});
});
});

</script>
</body>

</html>
Loading

0 comments on commit e21cec7

Please sign in to comment.