728x90
쇼핑몰 상품 정렬 코드 샘플
HTML5 , Vanilla Javascript, Css3
1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다
2. 사용언어 : Javascript, Html, Css [플러그인 사용 x]
3. 구동 로직
- 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체
(1) fetch API 를 통해 서버측의 json 데이터 Get
(2) json파일(상품 객체 리스트) 저장
(3) 해당 리스트 출력
(4) 이후 선택 옵션에 따른 filter 처리 후 출력
[샘플 코드 :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>짱구는 못말려</title>
<link rel="stylesheet" href="./style.css">
<script src="main.js" defer></script>
</head>
<body>
<section class="main">
<img src="https://i.ytimg.com/vi/ohtkpDDezLo/maxresdefault.jpg" alt="logo" class="logo btn" data-value="logo">
<div class="btns">
<button class="select-btn zzang-gu btn" data-value="zzangGu">짱구</button>
<button class="select-btn chul-su btn" data-value="chulSu">철수</button>
<button class="select-btn you-ri btn" data-value="youRi">유리</button>
<button class="select-btn hoon-e btn" data-value="hoonE">훈이</button>
</div>
<ul class="items"></ul>
</section>
</body>
</html>[샘플코드 :Css]
:root{
/* color */
--color-white : #f4f9f9;
--color-black : #0d335d;
--color-red : #d02947;
--color-blue : #74e3df;
--color-green : #8af38b;
--color-yellow : #f0f496;
--color-whiteBlue : #f4f9f9;
/* size */
--size-padding : 8px 15px;
--size-margin : 8px 0;
--size-img : 50px;
}
*{
box-sizing:border-box;
margin : 0;
padding : 0;
}
body {
display : flex;
align-items: center;
height : 100vh;
background : var(--color-black);
}
body > .main {
display : flex;
flex-direction: column;
justify-content: center;
align-items: center;
width : 100%;
height: 100vh;
user-select: none;
}
.logo {
width : 130px;
height: auto;
border-radius: 10%;
}
.btns > .select-btn {
background-color: transparent;
border : none;
outline: none;
}
.btns {
margin : var(--size-margin);
}
.btns > .select-btn {
border-radius: 6%;
padding : var(--size-padding);
}
.btns > .select-btn:nth-child(1) {
background: var(--color-red);
}
.btns > .select-btn:nth-child(2) {
background: var(--color-blue);
}
.btns > .select-btn:nth-child(3) {
background: var(--color-yellow);
}
.btns > .select-btn:nth-child(4) {
background: var(--color-green);
}
.items {
height: 60%;
width : 50%;
list-style: none;
overflow-y: scroll;
}
.items > .item{
display : flex;
align-items: center;
background: var(--color-whiteBlue);
border-radius: 5%;
margin : 5px 0;
}
.items > .item > img {
width : var(--size-img);
margin : 0 15px;
}
.btn {
transition : transform 300ms ease;
user-select: none;
cursor: pointer;
}
.btn:hover {
transform: scale(1.1);
}
[샘플코드 :javascript]
let itemList = [];
//데이터 받아오기 : fetch()
async function getItems(){
return fetch('./data/data.json')
.then(res=>res.json());
}
//HTML Display
function displayItems(items, type){
const ul = document.querySelector('ul.items');
if(type)
ul.innerHTML = items.filter(val=>val.type === type).map(parseToHTML).join('');
else
ul.innerHTML = items.map(parseToHTML).join('');
}
//데이터 -> HTML 변환
function parseToHTML(item){
return `
<li class="item">
<img src="${item.image}"/>
<span>${item.name}</span>
</li>
`;
}
//버튼 클릭시 이벤트
document.querySelector('.main').addEventListener('click',e=>{
const dataset = e.target.dataset;
if(!dataset.value) return;
if(dataset.value === 'logo') displayItems(itemList);
else displayItems(itemList,dataset.value);
});
//자동시작 (Deafult 데이터 => HTML)
window.onload = ()=>{
getItems()
.then(items => {
items.items.forEach(item => itemList.push(item));
displayItems(itemList);
});
};
[샘플코드 : data.json(경로 : ./data/data.json)]
{
"items" : [
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://upload.wikimedia.org/wikipedia/ko/thumb/4/4a/%EC%8B%A0%EC%A7%B1%EA%B5%AC.png/230px-%EC%8B%A0%EC%A7%B1%EA%B5%AC.png"
},
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://item.kakaocdn.net/do/fd0050f12764b403e7863c2c03cd4d2d7154249a3890514a43687a85e6b6cc82"
},
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://stickershop.line-scdn.net/stickershop/v1/product/718/LINEStorePC/main.png;compress=true"
},
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://image.musinsa.com/festival/2018spao/item0_2.png"
},
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://stickershop.line-scdn.net/stickershop/v1/product/1718/LINEStorePC/main.png;compress=true"
},
{
"type" : "zzangGu",
"name" : "짱구",
"image" : "https://stickershop.line-scdn.net/stickershop/v1/product/3312/LINEStorePC/main.png;compress=true"
},
{
"type" : "chulSu",
"name" : "철수",
"image" : "https://ww.namu.la/s/a7832e1be0f0a5620f53b6761010ab29642df6cf2e8f57cb3c082337e9ba4234bcbed24dae9f6f41113b83882b23caaa067f984a0c47c03a9ec16ec2c6d1e4401032aa0efdfcca6c1bb28019e7e67de0b7d25b02c3eca1cfa5d6e804ab60bbf4"
},
{
"type" : "chulSu",
"name" : "철수",
"image" : "https://image.fmkorea.com/files/attach/new/20180207/864191284/907858091/934642049/74f150c20ec8f3715c36c7b1f9dd54ae.png"
},
{
"type": "hoonE",
"name" : "훈이",
"image" : "https://upload3.inven.co.kr/upload/2020/11/06/bbs/i13782520128.png"
},
{
"type": "hoonE",
"name" : "훈이",
"image" :"https://ac.namu.la/72/7292ff2fe98597b6b2acbc415b966c33a30686f9431658a33d46da407161bbb5.png"
},
{
"type": "hoonE",
"name" : "훈이",
"image" : "https://articleimage.nicoblomaga.jp/image/258/2017/e/c/ec5c38a9ad0a9f62c28004c68d575b4858467dd71491889459.png"
},
{
"type" : "youRi",
"name" : "유리",
"image" : "https://static.miraheze.org/bigforestwiki/d/de/%EC%A2%86%EB%A6%AC.png"
},
{
"type" : "youRi",
"name" : "유리",
"image" : "http://data6.onnada.com/character/201806/2105852195_bd965428_14.png"
}
]
}
[출력 화면]
728x90
'샘플코드' 카테고리의 다른 글
| [Javascript] 페이스북 아이디로 로그인 하기 코드 샘플 (소스코드) (0) | 2021.05.15 |
|---|---|
| [NodeJs] 네이버 지식인 오토 프로그램 샘플 코드 [feat javascript, selenium-webdriver] 댓글 / 답글 자동 (6) | 2021.05.12 |
| [프론트엔드] 애플 메인 페이지 샘플 코드(변경가능) (0) | 2021.02.20 |
| [프론트엔드] 유튜브 페이지 코드 샘플 (0) | 2021.02.17 |
| [프론트엔드] 메뉴 바 코드 샘플 (반응형) (1) | 2021.02.16 |
댓글