Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wishlist added #739

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Wishlist added #739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 80 additions & 16 deletions Html-files/menu.html
View file
Open in desktop
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 @@ -989,7 +1011,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