按下“添加到购物车”按钮后如何保持输入值相同？
[英]How to keep the input values the same after pressing the '“add to cart” button?
问题描述
Whenever you hit the "add to cart" button, the item adds to the shopping cart.
每当您点击“添加到购物车”按钮时，该商品就会添加到购物车中。 Then the price will adjust to whatever input values you put in and will also adjust to any other item you decide to add to the cart.然后价格将根据您输入的任何输入值进行调整，并且还将根据您决定添加到购物车的任何其他项目进行调整。 Well whenever an item is added, the input values will all reset to a value of '1'.那么每当添加一个项目时，输入值都将重置为值“1”。 Any feedback is appreciated and I am here to learn.感谢任何反馈，我在这里学习。
CODE:代码：
HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<a href="#p1"><li class="topnavlink">Home</li></a>
<a href="#p2"><li class="topnavlink">Shop</li></a>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal"id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js"async></script>
</body>
</html>
CSS: CSS：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a{
text-decoration: none;
color: black;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn{
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover{
background-color: rgb(11, 70, 75);
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 120vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
@media only screen and (max-width: 600px){
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer{
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 1.5rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
}
JAVASCRIPT:爪哇脚本：
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function () {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function () {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function () {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", ""));
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText ="Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
updateAmounts()
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
function updateAmounts() {
//MAKE SURE INPUT NUMBERS DONT GO BELOW 1
if (qinput[i].value < 1) {
qinput[i].value = 1;
console.log('works')
price.innerText = document.querySelector('.actualprice'.innertext);
}
//ADDING/UPDATING THE QUANTITIES TO THE TOTAL PRICE
let total = 0;
document.querySelectorAll(".qinput").forEach(function (input) {
let qty = +input.value;
let price = +input.closest(".cartitem").querySelector(".itemprice").innerText.replace("$", "");
total += qty * price;
});
console.log(document.querySelector('.actualprice'))
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`;
}
document.querySelectorAll(".qinput").forEach(function (input){
input.addEventListener("change", () => updateAmounts())
});
// let carttitle = document.querySelector('.itemtitle')
// if(shoptitle.innertext = carttitle.innertext){
// console.log('they are the same')
// }
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function () {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});
1 个解决方案
解决方案1
0 2021-07-16 16:01:58
I just changed the script a bit.我只是稍微改变了脚本。 It works now.它现在有效。 Only when an item has already been added will the total number of items no longer be added, but the number of items will increase by one.只有当已经添加了一个项目时，才不再添加项目总数，而是增加一个项目。
let TotalNumber = document.querySelector(".totalnumber"); const Atc = document.getElementsByClassName("atcbtn"); const cartbody = document.querySelector(".cartbody"); let price = document.querySelector(".actualprice"); cartbtn.addEventListener("click", function() { cartbody.classList.toggle("cartbodyactive"); }); closeicon.addEventListener("click", function() { cartbody.classList.remove("cartbodyactive"); }); function AddItemtoCart() { //INCREASING THE TOTAL NUMBER for (i = 0; i < Atc.length; i++) { let button = Atc[i]; button.addEventListener("click", function() { let shopitem = button.parentElement; let shoptitle = shopitem.getElementsByClassName("item-title")[0].innerText; let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText; let itemtitles = document.getElementsByClassName("itemtitle"); var isNew = false; let totalPriceRounded = 0; if (itemtitles.length > 0) { //update basket for (j = 0; j < itemtitles.length; j++) { if (itemtitles[j].innerText == shoptitle) { var quantity = parseInt(itemtitles[j].nextSibling.nextSibling.value) + 1; itemtitles[j].nextSibling.nextSibling.value = quantity; totalPriceRounded = parseFloat(price.innerText.replace("Total: $", "")); totalPriceRounded = totalPriceRounded + parseFloat(shopprice.replace("$", "")); price.innerText = "Total: $" + (totalPriceRounded).toFixed(2); isNew = true; } } } //add to basket if (!isNew) { shoppriceall = shopitem.getElementsByClassName("itemprice").innerText; let cartrow = document.createElement("li"); let cartitems = document.getElementsByClassName("cartitems")[0]; cartrow.classList.add("cartitem"); let cartrowcontent = `<span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput" value='${1}'><button class="removebtn" bid="${shoptitle.replace(" ", "")}">Remove</button>`; cartrow.innerHTML = cartrowcontent; cartitems.append(cartrow); let TotalNumbervalue = TotalNumber.innerHTML; if (TotalNumbervalue > -1) { TotalNumber.innerHTML++; } totalPriceRounded = parseFloat(price.innerText.replace("Total: $", "")); totalPriceRounded = totalPriceRounded + parseFloat(shopprice.replace("$", "")); price.innerText = "Total: $" + (totalPriceRounded).toFixed(2); let btnRemoves = document.getElementsByClassName("removebtn"); var m = shoptitle.replace(" ", ""); for (j = 0; j < btnRemoves.length; j++) { var t = btnRemoves[j].getAttribute('bid'); if (t.localeCompare(m) == 0) { let removebutton = btnRemoves[j]; removebutton.addEventListener("click", function() { let parent = this.parentElement; var quantity = parseInt(this.previousSibling.value); var removedPrice = this.previousSibling.previousSibling.innerText; totalPriceRounded = parseFloat(price.innerText.replace("Total: $", "")); totalPriceRounded = totalPriceRounded - parseFloat((quantity * parseFloat(removedPrice.replace("$", "")))); price.innerText = "Total: $" + (totalPriceRounded).toFixed(2); let TotalNumbervalue = TotalNumber.innerHTML; if (TotalNumbervalue > 0) { TotalNumber.innerHTML--; } //remove row parent.remove(); }); } } } }); } } //ALERTING USER THAT ITEMS HAVE BEEN PURCHASED AddItemtoCart(); let purchasebtn = document.getElementById("purchasebtn"); purchasebtn.addEventListener("click", function() { location.reload(); alert("Your items have been purchased!"); }); //SMOOTH SCROLL const scroll = new SmoothScroll('a[href*="#"]', { speed: 1000, speedAsDuration: true, easing: "easeinquad", }); //SWIPER const swiper = new Swiper(".swiper-container", { // Optional parameters direction: "horizontal", loop: true, speed: 300, // If we need pagination pagination: { el: ".swiper-pagination", dynamicBullets: true, }, // Navigation arrows navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // And if we need scrollbar scrollbar: { el: ".swiper-scrollbar", }, });
* { padding: 0; margin: 0; box-sizing: border-box; } ::-webkit-scrollbar { display: none; } .wrapper { overflow-x: hidden; } .topnavcont { padding: 1em 0em; align-items: center; height: 10vh; width: 100vw; display: flex; justify-content: space-around; background-color: white; box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px; position: fixed; z-index: 5; } a { text-decoration: none; color: black; } .topleftnav { display: flex; justify-content: space-between; width: 10%; margin-left: -3%; font-weight: bold; } .topleftnav li { cursor: pointer; list-style: none; font-size: 1.05rem; transition: 0.3s ease; border-bottom: transparent solid 2px; } .topleftnav li:hover { border-bottom: black solid 2px; transform: scale(1.1); } .topnavtitle { margin-right: 2.5%; } .navcartcontainer { display: flex; margin-right: -1%; } .topnavcont .totalnumber { color: black; padding: 0.2em 0.4em; border-radius: 50%; font-size: 1.25rem; height: fit-content; /* cursor: pointer; */ font-weight: bold; } .topnavcont i { font-size: 2rem; margin-left: 0.3em; cursor: pointer; transition: 0.4s ease; } .topnavcont i:hover { transform: scale(1.15); } .p1 { height: 100vh; position: relative; } .p1 img { object-fit: cover; height: 100vh; width: 100%; } .p1 .overlay::after { content: ""; position: absolute; top: 10vh; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.4; height: 90vh; width: 100%; } .cartbody { background-color: white; position: fixed; height: 100vh; width: 25vw; top: 10%; left: 75%; z-index: 2100; overflow-y: auto; transform: translateX(100%); transition: 0.6s ease; box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px; } .carttotal { font-size: 2rem; color: rgb(22, 113, 119); font-weight: bold; margin-top: 1.5em; text-align: center; margin-bottom: 3em; } .purchasebtn { background-color: rgb(22, 113, 119); margin-bottom: 5em; padding: 1em 2.5em; border-radius: 0.3em; color: white; margin-left: 35%; font-weight: bold; font-size: 1rem; outline: none; border: none; cursor: pointer; transition: 0.3s ease; } .purchasebtn:hover { background-color: rgb(11, 70, 75); } .cartbody i { font-size: 2.2rem; margin-left: 0.4em; margin-top: 0.2em; color: black; font-weight: 200; cursor: pointer; transition: 0.3s ease; } .cartbody i:hover { transform: scale(1.15); } .cartbody input { width: 2.2rem; height: auto; } .cartbodyactive { transform: translateX(0%); transform: scale(1); background-color: white; } .carttitle { text-align: center; margin-top: 1em; margin-bottom: 2em; } .cartitem { display: flex; justify-content: space-evenly; } .cartitem .itemtitle { font-size: 1.2rem; } .cartitems { display: flex; flex-direction: column; row-gap: 3em; overflow-y: auto; list-style: none; padding-left: 0.5em; } .removebtn { background-color: red; color: black; font-weight: bold; outline: none; border: none; padding: 0.5em 1em; cursor: pointer; } .p2 { height: 120vh; position: relative; } .p2title { color: black; padding-top: 2.5em; margin-left: 7%; } .p2 img { height: 200px; width: 300px; object-fit: cover; } .itemcontainer { margin-top: 6em; display: flex; justify-content: space-around; } .itemcontainer2 { margin-top: 6em; display: flex; justify-content: space-around; } .item { display: flex; flex-direction: column; align-items: center; min-height: 355px; justify-content: space-around; } .atcbtn { background-color: white; cursor: pointer; text-decoration: none; color: black; width: 40%; text-align: center; font-weight: bold; border: black solid 2px; padding: 0.8em 0.5em; transition: 0.4s ease; } .atcbtn:hover { background-color: black; color: white; font-weight: bold; } .arrow { color: white; } @media only screen and (max-width: 600px) { .topnavcont { padding: 1em 0em; align-items: center; height: 10vh; width: 100vw; display: flex; justify-content: space-around; background-color: white; box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px; position: fixed; z-index: 5; } .topleftnav { display: flex; justify-content: space-evenly; width: 55%; margin-left: 1%; padding-right: 5%; font-weight: bold; } .topleftnav li { cursor: pointer; list-style: none; font-size: 1rem; transition: 0.3s ease; border-bottom: transparent solid 2px; } .topleftnav li:hover { border-bottom: black solid 2px; transform: scale(1.1); } .topnavtitle { font-size: 1.8rem; width: 80%; } .navcartcontainer { display: flex; padding-right: 5%; margin-left: 0%; } .topnavcont .totalnumber { color: black; padding: 0.2em 0.4em; border-radius: 50%; font-size: 1.25rem; height: fit-content; /* cursor: pointer; */ font-weight: bold; } .topnavcont i { font-size: 2rem; margin-left: 0.3em; cursor: pointer; transition: 0.4s ease; } .cartbody { background-color: white; position: fixed; height: 100vh; width: 80vw; top: 10%; left: 20%; z-index: 2100; overflow-y: auto; transform: translateX(100%); transition: 0.6s ease; box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px; } .carttotal { font-size: 2rem; color: rgb(22, 113, 119); font-weight: bold; margin-top: 1.5em; text-align: center; margin-bottom: 3em; } .cartbody i { font-size: 2.2rem; margin-left: 0.4em; margin-top: 0.2em; color: black; font-weight: 200; cursor: pointer; transition: 0.3s ease; } .cartbody i:hover { transform: scale(1.15); } .cartbody input { width: 1.5rem; height: auto; } .cartbodyactive { transform: translateX(0%); transform: scale(1); background-color: white; } .carttitle { text-align: center; margin-top: 1em; margin-bottom: 2em; } .cartitem { display: flex; justify-content: space-evenly; padding-bottom: 2em; } .cartitem .itemtitle { font-size: 1.2rem; } .cartitems { display: flex; flex-direction: column; row-gap: 3em; overflow-y: auto; list-style: none; padding-left: 0.5em; } .removebtn { background-color: red; color: black; font-weight: bold; outline: none; border: none; padding: 0.5em 1em; cursor: pointer; } .p2 { height: fit-content; padding-bottom: 20%; position: relative; } .p2title { color: black; padding-top: 2.5em; margin-left: 7%; } .p2 img { height: 200px; width: 300px; object-fit: cover; } .itemcontainer { margin-top: 6em; display: flex; flex-direction: column; justify-content: space-around; } .itemcontainer2 { margin-top: 6em; display: flex; flex-direction: column; justify-content: space-around; } .item { display: flex; flex-direction: column; align-items: center; min-height: 355px; justify-content: space-around; padding-bottom: 2em; } .atcbtn { background-color: white; cursor: pointer; text-decoration: none; color: black; width: 40%; text-align: center; font-weight: bold; border: black solid 2px; padding: 0.8em 0.5em; transition: 0.4s ease; } .atcbtn:hover { background-color: black; color: white; font-weight: bold; } .arrow { color: white; } }
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" /> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css"> <div class="wrapper"> <div class="p1" id="p1"> <div class="topnavcont"> <ul class="topleftnav"> <a href="#p1"> <li class="topnavlink">Home</li> </a> <a href="#p2"> <li class="topnavlink">Shop</li> </a> </ul> <h1 class="topnavtitle">The Store</h1> <div class="navcartcontainer"> <h3 class="totalnumber">0</h3> <i class="fas fa-shopping-cart" id="cartbtn"></i> </div> </div> <!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"> <div class="overlay"></div> </div> <div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"> <div class="overlay"></div> </div> <!-- <div class="swiper-slide">Slide 3</div> ... --> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev arrow"></div> <div class="swiper-button-next arrow"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> <div class="cartbody"> <i class="fal fa-times" id="closeicon"></i> <h2 class="carttitle">Shopping Cart</h2> <ul class="cartitems"> <!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> <div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> <div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> --> </ul> <h3 class="actualprice carttotal" id="actualprice">Total: $0</h3> <button class="purchasebtn" id="purchasebtn">Purchase</button> </div> </div> <div class="p2" id="p2"> <h1 class="p2title">My Shop</h1> <div class="itemcontainer"> <div class="item"> <img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">White Shirt</h1> <h3 class="itemprice">$8.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> <div class="item"> <img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">Red Shoes</h1> <h3 class="itemprice">$4.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> <div class="item"> <img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">Sunglasses</h1> <h3 class="itemprice">$6.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> </div> <div class="itemcontainer2"> <div class="item"> <img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">Jeans</h1> <h3 class="itemprice">$1.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> <div class="item"> <img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">Necklace</h1> <h3 class="itemprice">$6.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> <div class="item"> <img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img"> <h1 class="item-title">Beanie</h1> <h3 class="itemprice">$2.99</h3> <!-- <a href="#" class="atcbtn">Add To Cart</a> --> <button class="atcbtn">Add To Cart</button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="app.js" async></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
按下按钮后如何将输入值添加到 html 表列（javascript） - How to add input value to html table column after pressing a button (javascript)
添加到购物车后如何留在同一产品上？ - How to stay on Same Product after Add to Cart?
如何通过按按钮将上标文本添加到HTML输入框？ - How to add superscript text to an HTML input box by pressing a button?
按下按钮后添加动态表单字段 - Add a dynamic form field after pressing a button
在Javascript中按下按钮后添加文本 - Add text after pressing button in Javascript
如果在jqgrid中按下保存操作按钮时返回错误，如何保持内联添加 - How to keep inline add if error is returned on pressing save action button in jqgrid
使用php将产品添加到购物车后如何更改添加到购物车按钮 - how to change add to cart button after adding product to the cart using php
如何将相同的商品添加到购物车 - How to Add same item to cart
Function 添加到购物车后冻结按钮 - Function freez button after add to cart
React Native：按下“下一个”键盘按钮后如何移动到下一个输入字段？ - React Native: How to move to the next input filed after pressing the “next” keyboard button?
相关标签