✏️ Check Point
• swiper 페이지네이션 커스텀
• fetch()와 json 학습
• 디데이 설정 diffday() 학습
• swiper 연동
1. swiper pagination
swiper-pagination의 현재 페이지, 전체페이지 클래스명을 가지고 css로 스타일을 적용시켰다.
.sc-visual{
position: relative;
.swiper-pagination{
position: absolute;
bottom: 20px;
right: 20px;
margin-left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 24px;
background: rgba(0,0,0,0.5);
border-radius: 12px;
font-size: 14px;
color: #fff;
a{
display: block;
}
}
//페이지네이션 현재페이지 꾸밈
.swiper-pagination-current{
font-weight: 700;
}
//페이지네이션 전체페이지 옆 아이콘
.swiper-pagination-total::after{
content: '';
display: inline-block;
background-image: url('../images/ic-check.svg');
background-repeat: no-repeat;
background-size: 12px;
background-position: 85% center;
width: 12px; height: 12px;
margin-left: 6px;
}
}2. fetch()함수와 json처리
상품정보 입력하기
상품 정보는 일일히 마크업으로 내용을 작성하는게 아닌,
js에서 fetch()함수로 조건을 입력해주고
json으로 데이터를 처리할 수 있다.
아래와 같이 더미를 만들어서
아이템안에 제목, 가격, 이미지를 세팅하여
각 상품에 맞는 내용으로만 바꾸어주면 적용된다.
//dummy_product.json review
{
"items":[
{
"prdId":0,
"thumnails":{
"url":"./assets/images/group-pro1-01.jpg"
},
"title":"야쿠르트 ver.1971",
"price":{
"ori":50000,
"curr":23000,
"discount":33
},
"member":true
},
{
"prdId":0,
"thumnails":{
"url":"./assets/images/group-pro1-02.jpg"
},
"title":"하루만낫또 2입",
"price":{
"ori":2900,
"curr":2900
},
"member":true
},
]
}인스타 link 연결
하단에 있는 프레딧 인스타그램 게시물 보기 영역에서
이미지박스를 클릭하면 해당 이미지와 관련된 인스타 게시물 링크로 넘어가도록 해준다.
이러한 작업을 아래와 같이 json을 활용하여
id에 인스타그램 링크를 걸어주고,
img,alt로 추가로 기입해주었다.
//script review
fetch('../assets/data/dummy_insta.json')
.then((response) => response.json())
.then((json) => {
data=json.items;
let html='';
data.forEach(element => {
html+= `<li class="insta-item">
<a href="https://www.instagram.com/p/${element.id}/">
<img src="${element.img}" alt="${element.alt}">
</a>
</li>`
});
$('#instaList').html(html);
})
//dummy_insta.json
{
"items":[
{
"id":"CYoDqnxDiJY/?utm_source=ig_web_copy_link",
"img":"./assets/images/sc-insta-01.jpg",
"alt":"그린키트 샐러드 게시물 보기"
},
{
"id":"CYqocqjPob8/?utm_source=ig_web_copy_link",
"img":"./assets/images/sc-insta-02.jpg",
"alt":"펫 영양제 2종 게시물 보기"
},
]
}3. 타임특가 diffday()
특가가 몇시간 남았는지 보여주기 위해 diffday() 시간기능 함수를 사용하였다.
정수값만 남도록 Math.floor()함수를 사용하였다.
1초 간격으로 지속적으로 함수를 호출하기 위해 setInterval()함수로 마무리!
function diffDay() {
const endTime = new Date("2022-12-25");
const todayTime = new Date();
const diff = endTime - todayTime;
const diffDay = Math.floor(diff / (1000*60*60*24));
const diffHour = Math.floor((diff / (1000*60*60)) % 24);
const diffMin = Math.floor((diff / (1000*60)) % 60);
const diffSec = Math.floor(diff / 1000 % 60);
html = `<span class="time-hour">${diffHour}</span>
:
<span class="time-min">${diffMin}</span>
:
<span class="time-sec">${diffSec}</span>`
$('#date1').html(html);
}
//어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용.
setInterval(() =>{
diffDay(); //시간 기능 만드는 함수
},1000);
4. swiper slide 2개 연동
위와 같이 아래 3개의 조건을 충족시키도록 swiper 2가지를 연동하는게 필요했다.
1)카테고리탭이 이동할 때, 해당 상품영역도 연동되서 이동
2)카테고리탭을 클릭할 때, 해당 상품영역으로 이동
3)상품영역으로 스크롤할 때, 카테고리탭도 연동되서 이동
아래와 같이 각각 swiper로 슬라이드를 만들어 준 다음,
컨트롤러 설정하고,
slideTo를 활용하여 특정영역에 슬라이드로 이동하도록 구현해주었다.
//카테고리탭 swiper
let catemenu = new Swiper(".catemenu", {
slidesPerView: "auto",
});
//상품영역 swiper
let categoods = new Swiper(".categoods", {
slidesPerView: 1,
spaceBetween: 20,
autoHeight: true,
});
//카테고리탭과 상품영역으로 컨트롤
catemenu.controller.control = categoods;
categoods.controller.control = catemenu;
//카테고리탭을 클릭하면 해당 상품영역으로 이동
$('.sc-cate .catemenu li').click(function (e) {
e.preventDefault();
idx = $(this).index();
catemenu.slideTo(idx); //slideTo:특정영역 슬라이드로 이동
categoods.slideTo(idx);
});