์ฌ์ดํธ๋ช
: ์๋ชจ๋ ๋ชฐ
์์
๊ธฐ๊ฐ: 7์ผ ์์
๋ผ์ด๋ธ๋ฌ๋ฆฌ: swiper, jquery
์ ํ: ๋ชจ๋ฐ์ผ ์ ์ํ, ํด๋ก ์ฝ๋ฉ
ํน์ง: fetch ํจ์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ํตํด ํธ์ถํ ๋ฐ์ดํฐ ์ฌ์ฉ ์ฌ์ดํธ
fetch()
ํจ์๋ก ๋ฐ์ดํฐ ํธ์ถ(feat.JSON)SWIPER
์ฌ์ฉํ ์ฌ๋ผ์ด๋๐ ์๋ชจ๋ ๋ชฐ์ ์ํ ์์ญ์ ๊ฑฐ์ ๋น์ทํ ๋ ์ด์์์ ๊ฐ์ง๊ณ ์์ด ๋งค๋ฒ ์๋ก์ด json ๋ฐ์ดํฐ๋ฅผ ๋ง๋๋ ๊ฒ์ด ์๋๋ผ ํ๋์ prdData.json ํ์ผ์ ํ์ฉํ์์ต๋๋ค. ํ์ํ ๋ถ๋ถ๋ง ์ถ์ถํด ๊ฐ ์์ญ์ fetch๋ฌธ์ ์ฌ์ฌ์ฉํ์ฌ ํ์ผ๊ณผ ์ฝ๋๋ฅผ ์ข ๋ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ์์ต๋๋ค.
{
"items":[
{
"id":0,
"thumb": "./assets/images/recom01.png",
"saleThumb":"./assets/images/sale_first_01.png",
"brand":"ํ์จ",
"name":"๋ฐฑํ๊ณ ์ฐํ ์์ผ์ค 40ml",
"price":{
"ori":85000,
"curr":76500
},
"rate": "4.8",
"review":"(6)",
"hashtag": "#์ ์๋ถ ๋ฐธ๋ฐ์ค",
"benefit":[
"์ฌ์ํ"
],
"cate1":0,
"cate2":2,
"cate3":2,
"sale1":0
},
....
]
}
fetch("./assets/data/prdData.json")
.then((response) => response.json())
.then((json) => {
data = json.items;
let html = '';
result.forEach(element => {
saleEl = (element.price.ori === element.price.curr) ? 'hide':'';
html+=`
<div class="swiper-slide">
<div class="product_inner">
<a href="#none">
<div class="pro_thumb_area">
<img src="${element.thumb}" alt="${element.name}">
</div>
<div class="pro_text_area">
<div class="pro_title">
<strong class="brand">${element.brand}</strong>
<span class="name">${element.name}</span>
</div>
<div class="pro_price">
<span class="delPrice ${saleEl}">${price(element.price.ori)}</span>
<em class="discountRate ${saleEl}">${salepercent(element.price.ori,element.price.curr)}%</em>
<span class="price"><strong class="size_16">${price(element.price.curr)}</strong>์</span>
</div>
<div class="pro_hashtag">
<span class="hashtag_inner">${element.hashtag}</span>
</div>
</div>
</a>
<button class="pro_like"><span class="blind">์ข์์</span></button>
</div>
</div>`;
});
$('#sortData').html(html);
});
fetch("./assets/data/prdData.json")
๋ถ๋ฌ์ฌ json ๋ฐ์ดํฐ ํ์ผ.then((response) => response.json())
์ฝ์ด์จ ๋ฐ์ดํฐ๋ฅผ json์ผ๋ก ๋ณํdata = json.items;
json์ ์๋ items๋ง ๋ฐ์์ค๊ธฐdata.forEach(element => {})
๋ฐฐ์ด์ ๊ฐ์๋งํผ ๋ฐ๋ณต๋ฌธ์ ๋๋ฆฌ๊ธฐ ์ํด ์ฌ์ฉ${element.name}
ํ์์ผ๋ก ๊ฒฝ๋ก๋ฅผ ์์ฑํ์ฌ ๊ฐ ๋ถ๋ถ์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ต๋๋ค.saleEl = (element.price.ori === element.price.curr) ? 'hide':'';
ํ ์ธ๊ฐ๊ฐ ์์ด์ ํ๋งค๊ฐ๋ง ์กด์ฌํ๋ ๊ฒฝ์ฐ๋ฅผ ์ํ ์กฐ๊ฑด๋ฌธ -> 'ori'๊ธ์ก๊ณผ 'curr'์ ๊ธ์ก์ด ๊ฐ์๋'hide'ํด๋์ค๋ฅผ ์ถ๊ฐํด ํ ์ธ๊ฐ์ ํ ์ธ์จ์ display:none ์์ผ์ฃผ์์ต๋๋ค.
// ์ฒ๋จ์ ์ฝค๋ง
function price(p) {
return p.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
//ํ ์ธ์จ ํจ์
function salepercent(ori,curr){
return (ori-curr)/ori*100;
}
- ํ ์ธ์จ ์์ญ์ ๋ฐ์ดํฐ ํ์ผ์ ๋ด๊ฒจ์ง 'ori', 'curr'์ ๊ฐ์ ์ด์ฉํ์ฌ
return ๊ฐ
์ ๋ฐ๋๋ก ํ์์ต๋๋ค.- ๋ฐฐ์ด์ ์์๋ฅผ ๋ํ๋ด๋ ๋ฌธ์์ด์ ๋ฐํํ๋
toLocaleString()
๋ฉ์๋๋ฅผ ์ฌ์ฉํด ๊ฐ๊ฒฉ์ ์ฒ๋จ์ ์ฝค๋ง ์ ๊ท์ ํจํด์ ์ฌ์ฉํ์๋ค.
//ํด๋ฆญ์ ํ
์คํธ activeํจ๊ณผ ๋ฐ ํด๋น ํ
์คํธ๋ก ๋ณ๊ฒฝ
$('#pop_skin li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('#skinType').text($(this).text());// #skinType์ ํ
์คํธ๋ฅผ ๋ด๊ฐ ์ ํํ this์ ํ
์คํธ๋ก ๋ฐ๊พธ์ด๋ผ
$('.popup_bg').hide();
$('.popup_inner').removeClass('on');
cate1 = $('#pop_skin .active').data('cate1');//cate1์ ๋ฐ์ดํฐ cate:1๋ง ๋์ค๋๋ก
cate2 = $('#pop_skin .active').data('cate2');//cate2๋ ๋ฐ์ดํฐ cate:2๋ง ๋์ค๋๋ก
sortData(cate1,cate2);
});
//์ฒซ ํ์ด์ง์ ๋ณด์ฌ์ค ๋ฐ์ดํฐ
function sortFirst(a,b){
sortData(a,b)//a,b์๋ง active๋ฅผ ์ฃผ๊ณ ๋๋จธ์ง ํ์ ๋ค์ removeClass ์ ์ฉ
$('#pop_skin li').eq(a).addClass('active').siblings().removeClass('active')
$('#pop_trouble li').eq(b).addClass('active').siblings().removeClass('active')
}
sortFirst(0,2);//cate:0, cate:2๊ฐ ์ฒซ ํ์ด์ง์ ๋์ค๊ฒ ๋จ
//๋ฐ์ดํฐ ํํฐ๋ง ํด์ค ํจ์
function sortData(cate1,cate2){
fetch("./assets/data/prdData.json")
.then((response) => response.json())
.then((json) => {
data = json.items;
const result = data.filter(function (parm) {return parm.cate1 == cate1 || parm.cate2 == cate2});
let html = '';
result.forEach(element => {
saleEl = (element.price.ori === element.price.curr) ? 'hide':'';
html+=`
... `;//์ค๋ณต์ผ๋ก ์๋ต
});
$('#sortData').html(html);
});
}
๋ฒํผ ํด๋ฆญ์ ๊ฐ ํ์ ์ ๋ง๋ ์ํ์ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด fetch๋ฌธ์ ํจ์์ ๋ฃ์ด์ฃผ๊ณ filter() ๋ฉ์๋๋ก ๋ฐ์ดํฐ ํํฐ๋ง์ ํ์์ต๋๋ค.
filter ๋โ
์๋ฐ์คํฌ๋ฆฝํธ์์ filter ๋ ๋ฐฐ์ด์ ์ฌ์ฉํ๋ฉฐ, ์ฃผ์ด์ง ํจ์๋ฅผ ๋ง์กฑํ๋ ๋ชจ๋ ์์๋ฅผ ๋ชจ์ ์ ๋ฐฐ์ด๋ก ๋ฐํํฉ๋๋ค.const result = data.filter(function (parm) {return parm.cate1 == cate1 || parm.cate2 == cate2});
: cate1, cate2์ ๋ง๋ ๋ฐ์ดํฐ๋ง ๋์ค๋๋ก ์ธํ (๋๊ฐ์ง ํ์ ๋ชจ๋ ์ถฉ์กฑํ๊ฒ ํ๊ณ ์ถ๋ค๋ฉด'&&'
์ฌ์ฉ
ใ ค๐ก ||(or์ฐ์ฐ์), &&(and์ฐ์ฐ์)
'๋ฉ์ธ ๋ฐฐ๋ ์์ญ'๊ณผ '์ด๋ฒคํธ ์ ์ฒด๋ณด๊ธฐ ํ์ ์์ญ'์ ๋ฐ์ดํฐ๊ฐ ๊ฐ์ ์๋ก์ด ํ์ผ์ ๋ง๋ค์ง ์๊ณ ํ๋์ JSON ๋ฐ์ดํฐ ํ์ผ์ ํ์ฉํ์ฌ ๊ตฌํํ์์ต๋๋ค.
<section id="banner_swiper">
<h2 class="blind">๋ฉ์ธ ๋ฐฐ๋ ์์ญ</h2>
<div class="swiper-wrapper">
<!--jsonํ์ผ ์ฌ์ฉ์ผ๋ก swiper-slide" ์๋ต-->
</div>
<div class="swiper_page">
<div class="page_area"></div>
<button class="btn_area" id="allBanner"><span class="blind">์ ์ฒด๋ณด๊ธฐ</span></button>
</div>
</section>
const swiper2 = new Swiper("#banner_swiper", {
slidesPerView: 'auto',
spaceBetween: 5,
loop: true,
autoplay: {//์คํ ํ๋ ์ด ์ต์
delay: 2500, //์ฌ์ ๊ฐ๊ฒฉ
disableOnInteraction: false,
},
centeredSlides: true,
// pagination
pagination: {
el: ".page_area",
type: "custom",
renderCustom:function(swiper, current, total){
currentNum = (current < 10) ? '0'+current : current;
totalNum = (total < 10) ? '0'+total : total;
return `<span class="page_current">${currentNum}</span>
<span class="page_total">${totalNum}</span>`;
}
},
});
- swiper ์ฌ์ฉ์ ์๋ ๊ตฌ์กฐ์ ๊ฐ์ ํด๋์ค ๋ช ์ ์ง์ ํด์ค์ผ ํฉ๋๋ค.
swiper > swiper-wrapper > swiper-slide
spaceBetween: 5,
css์์ ๋ง์ง๊ฐ์ ์ฃผ์ง ์๊ณ swiper์ ์์ฑ์ธ spaceBetween์ ์ฌ์ฉํ์ฌ ์ฌ๋ผ์ด๋์ ์ฌ๋ฐฑ์ ์ค์ ํ์์ต๋๋ค.disableOnInteraction: false
๋ง์ฐ์ค ํด๋ฆญ์ ์ฌ๋ผ์ด๋ ๋ฉ์ถค ์ ์ด(true: ์ผ์์ ์ง, false: ์ฌ์)
- pagination์ ์ปค์คํ ํ๊ธฐ ์ํด
type: "custom"
์ผ๋ก ๋ฐ๊พธ์ด ์ฃผ๊ณrenderCustom
์์ฑ์ ์ด์ฉํด ํ์ฌ ํ์ด์ง/์ ์ฒด ํ์ด์ง์๋ฅผ ํํํ์์ต๋๋ค.- return ๊ฐ์ผ๋ก ๋ฏธ๋ฆฌ ๋งํฌ์ ํ๋ ์ฝ๋๋ฅผ ์ฌ์ฉํด ์ปค์คํ ํ์๋๋ฐ ์ด๋
10 ๋ฏธ๋ง์ ์์๋ ์์ '0'์ด ๋ถ๋ ์กฐ๊ฑด๋ฌธ
์ ์ฌ์ฉํ์ฌ 01/09 ํ์์ pagination์ ๊ตฌํํ์์ต๋๋ค.