마스크 판매 위치 위젯 스킨 수정내역

1.api  공개를 주도하는 측에서 권고하는 재고수량 그룹에 따른 색상과 그룹의 기준

2개 ~ 29개

빨강

30개 ~ 99개

노랑

100개 이상

녹색

품절 (1개 이하)

회색

색상코드는 네이버에서 웹색상표로 검색해서 코드를 바꾸면 됩니다.

https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EC%9B%B9%EC%83%89%EC%83%81%ED%91%9C

2. 각 요일별 구입 가능 출생년도 끝자리 안내.

스킨에  아래 추가

{@ $day=date("N");}

<!--@if($day==1)-->
월요일은 출생년도 끝자리 1,6이신 분들이 구매 가능합니다.
<!--@elseif($day==2)-->
화요일은 출생년도 끝자리 2,7이신 분들이 구매 가능합니다.
<!--@elseif($day==3)-->
수요일은 출생년도 끝자리 3,8이신 분들이 구매 가능합니다.
<!--@elseif($day==4)-->
목요일은 출생년도 끝자리 4,9이신 분들이 구매 가능합니다.
<!--@elseif($day==5)-->
금요일은 출생년도 끝자리 5,0이신 분들이 구매 가능합니다.
<!--@else-->
오늘은 이번 주간에 구입하지 못한 분들이 구입 가능합니다.
<!--@end-->

3.현위치 기준으로 목록 조회중일때 다르게 디자인 하기.

<!--@if(Context::get('status') == 'now')-->#fff<!--@end-->

등으로 색상의 조건을 주거나 하여 지금 현재 무엇으로 조회중인지 표시해줌.

4.가로폭이 좁은 디바이스에 검색창 길이 조금 줄여주기

css 파일에 아래 추가해서 가로 375 부터 줄여주기

@media only screen and (max-width:375px){
.search_mask input[type=text] {
    width:180px;

}

}

5.입고시간은 비교적 중요해서 가로 320에서만 줄여지도록 변경 기존 960 사이즈인가? 기준으로 가려지게 되어있음.

기존 내용 삭제하고 320 사이즈 기준이 되는 곳에 추가해줌.

    .mobile {
        display:none;
    }

@media screen and (max-width:320px){
    .hide_w320{display:none !important}
    .to_sns.big a{margin:0 -2px}
    .mobile {
        display:none;
    }
}

6.입고시간,갱신시간 필요없는 부분 줄여줘서 가로폭 더 확보하기

<td class="mobile">{substr(preg_replace('/2020\//', '', $val->stock_at), 0, -3)}</td>
<td class="mobile2">{substr(preg_replace('/2020\//', '', $val->created_at), 0, -3)}</td>

갱신시간의 class를 mobile2로 따로 준 이유는 중요정보가 아닐수 있어(낮시간 갱신시간은 거의 10분 이내) 조금 더 넓은 가로폭 부터 가려주기 위함.

7.데이터갱신시간 가려주는 가로폭 변경

<th scope="col" class="mobile2"><span>데이터갱신시간</span></th>
<td class="mobile2">{substr(preg_replace('/2020\//', '', $val->created_at), 0, -3)}</td>

클래스를 mobile2 로 변경

css에서 

@media screen and (max-width:533px){

}

의 안에 

    .mobile2 {
        display:none;
    }

를 넣어줌.

@media screen and (max-width:533px){

    .mobile2 {
        display:none;
    }

}

7.지도로 링크 걸어주는거 상호명에도 똑같이 걸어주기

이정도만 해주면 중요정보는 왠만한 가로폭에서 제공할 수 있을 것 같습니다.

추가사항

8. 현위치로 목록을 조회할때 현위치에서 거리계산 해서 보여주기

https://blog.asamaru.net/2015/09/14/calculate-distance-between-two-wgs84-points/

목록 출력하는 foreach 반복문 보다 위쪽에

현재 조회된 위,경도 값 가져오기

<!--@if(Context::get('status') == 'now')-->
{@
$lat1=Context::get('lat');
$lng1=Context::get('lng');
}
<!--@end-->

항상 현재 위치로 요청인지의 조건을 걸어주세요.

그리고  foreach 반복문 안쪽에 아래를 넣어주고

<!--@if(Context::get('status') == 'now')-->
{@
$lat2=$val->lat;
$lng2=$val->lng;
$earth_radius = 6371;
$dLat = deg2rad($lat2 - $lat1);
$dLon = deg2rad($lng2 - $lng1);
$a = sin($dLat/2) * sin($dLat/2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dLon/2) * sin($dLon/2);
$c = 2 * asin(sqrt($a));
$d = $earth_radius * $c;
}
<!--@end--> 

거리를 표시해 줄 목록 아이템에 아래 코드를 넣어주세요.(저는 상점명 아래로 넣어봤습니다.)

<!--@if(Context::get('status') == 'now')--><br>({round($d,1)}km)<!--@end-->

대략 어느 정도 거리에 있는지 알 수 있습니다. (단, 와이파이 등으로 위치를 파악하는 경우 다소 현위치가 다를 수 있는 부분은 기술적 한계이니 이부분까지 문제 삼을 수 없습니다.)