|
우선 쇼핑몰에서 서치바를 통해 아이템을 search 및 sort 하는 기능인데요 ㅠㅠ
아래와 같습니다.
let products ={data:[]} 가 아니라
letproducts= {
data: [
{
productName:"Regular White T-shirt",
category:"Topwear",
price:"30",
image:"white-tshirt.jpeg",
},
{
productName:"Beige Short skirt",
category:"Bottomwear",
price:"49",
image:"short-skirt.jpeg",
},
{
productName:"Sporty SmartWatch",
category:"Watch",
price:"99",
image:"sporty-smartwatch.jpeg",
},
{
productName:"Basic knitted Top",
category:"Topwear",
price:"29",
image:"knitted-top.jpeg",
},
{
productName:"Black Leather Jacket",
category:"Jacket",
price:"129",
image:"black-leather-jacket.jpeg",
},
{
productName:"Stylish Pink Trousers",
category:"Bottomwear",
price:"89",
image:"pink-trousers.jpeg",
},
{
productName:"Brown Men's Jacket",
category:"Jacket",
price:"189",
image:"brown-jacket.jpeg",
},
{
productName:"Comfy Gray pants",
category:"Bottomwear",
price:"49",
image:"comfy-gray-pants.jpeg",
},
],
};
for (letiofproducts.data) {
//Create Card
letcard=document.createElement("div");
//Card should have category and should stay hidden initially
card.classList.add("card", i.category, "hide");
//image div
letimgContainer=document.createElement("div");
imgContainer.classList.add("image-container");
//img tag
letimage=document.createElement("img");
image.setAttribute("src", i.image);
imgContainer.appendChild(image);
card.appendChild(imgContainer);
//container
letcontainer=document.createElement("div");
container.classList.add("container");
//product name
letname=document.createElement("h5");
name.classList.add("product-name");
name.innerText=i.productName.toUpperCase();
container.appendChild(name);
//price
letprice=document.createElement("h6");
price.innerText="$"+i.price;
container.appendChild(price);
card.appendChild(container);
document.getElementById("products").appendChild(card);
}
//parameter passed from button (Parameter same as category)
functionfilterProduct(value) {
//Button class code
letbuttons=document.querySelectorAll(".button-value");
buttons.forEach((button) => {
//check if value equals innerText
if (value.toUpperCase() ==button.innerText.toUpperCase()) {
button.classList.add("active");
} else {
button.classList.remove("active");
}
});
//select all cards
letelements=document.querySelectorAll(".card");
//loop through all cards
elements.forEach((element) => {
//display all cards on 'all' button click
if (value=="all") {
element.classList.remove("hide");
} else {
//Check if element contains category class
if (element.classList.contains(value)) {
//display element based on category
element.classList.remove("hide");
} else {
//hide other elements
element.classList.add("hide");
}
}
});
}
//Search button click
document.getElementById("search").addEventListener("click", () => {
//initializations
letsearchInput=document.getElementById("search-input").value;
letelements=document.querySelectorAll(".product-name");
letcards=document.querySelectorAll(".card");
//loop through all elements
elements.forEach((element, index) => {
//check if text includes the search value
if (element.innerText.includes(searchInput.toUpperCase())) {
//display matching card
cards[index].classList.remove("hide");
} else {
//hide others
cards[index].classList.add("hide");
}
});
});
//Initially display all products
window.onload= () => {
filterProduct("all");
};
이렇게 data.js 라는 파일명을 가진 아래의 파일로 교환해서 읽고 search 및 sorting이 가능하게 해보고 싶습니다
letshopItemsData= [
{
id:"jfhgbv234nscs",
name:"cleaning kits",
price:45,
desc:"123",
img:"marketImages/bathbomb.webp",
},
{
id:"ioytrh234ndcv",
name:"cutlery",
price:20,
desc:"123",
img:"marketImages/cutlery.avif",
},
{
id:"wuefbnc234xbsn",
name:"plate",
price:25,
desc:"123",
img:"marketImages/plate.avif",
},
{
id:"thyfh234cbcv",
name:"puff",
price:30,
desc:"123",
img:"marketImages/puff.avif",
},
{
id:"thiecbaw234dj234ksadjk",
name:"bamboo straw",
price:15,
desc:"123",
img:"marketImages/straw.jpeg",
},
{
id:"iuert234ryw234ebncdjksadjk",
name:"shampoo bar",
price:19,
desc:"123",
img:"marketImages/soap.avif",
},
{
id:"thiery234234234tbvcbvzdhadjk",
name:"bath bomb",
price:42,
desc:"123",
img:"marketImages/shampoo.webp",
},
{
id:"trfoiwfcs234dfsdfnbcawdjksadjk",
name:"coconut bowl",
price:42,
desc:"123",
img:"marketImages/coconu.jpeg",
},
{
id:"cbvxbcsdfsd234fvsceldk",
name:"banana leaf plate",
price:85,
desc:"123",
img:"marketImages/leafplate.jpeg",
},
{
id:"oiopijsdfsvm234jkhuihb",
name:"paper togo box",
price:11,
desc:"123",
img:"marketImages/leaftogobox.jpeg",
},
{
id:"asdassdfsdfd234sfdasd",
name:"paper bag",
price:35,
desc:"123",
img:"marketImages/zzzzz.jpg",
},
{
id:"rtytytsdfsfuyu234ytyytbvncv",
name:"nachos",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytsdfsdfuyuy234tyytbvncv",
name:"fish tacos",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytsfd234sdfuyuytyytbvncv",
name:"quesadia",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytu234sdfsdfyuytyytbvncv",
name:"kimchi",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtyty234tuysfsfuytyytbvncv",
name:"bulgogi",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytuyuy234tysdfsfytbvncv",
name:"sundaegguk",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytuyu234ytyytsdfsdfbvncv",
name:"ribeye",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytuyu234ytyysdfsdftbvncv",
name:"burrito",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytsfs234dfytuyuytyytbvncv",
name:"hotdog",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytysfsftu234yuytyytbvncv",
name:"hodduk",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytuysf234sfdfuytyytbvncv",
name:"tangsuyuk",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytsdfd234sfuyuytyytbvncv",
name:"chicken",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytsdfsd234fuyuytyytbvncv",
name:"katsu",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytysdfsftu234yuytyytbvncv",
name:"coke",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytys234dfsfdtuyuytyytbvncv",
name:"pepsi",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtyt123ytusdfsdfyuytyytbvncv",
name:"dr.pepper",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
{
id:"rtytytuyuysfsdftyytbvncv",
name:"sparkling water",
price:12,
desc:"123",
img:"marketImages/taco.jpeg",
},
];
|
등록안내
0
0
즈타워즈
