스크린샷(56).png

 

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");}

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

 

 

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

<[email protected](Context::get('status') == 'now')-->#fff<[email protected]>

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

 

 

 

스크린샷(57).png

 

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 반복문 보다 위쪽에

 

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

<[email protected](Context::get('status') == 'now')-->
{@
$lat1=Context::get('lat');
$lng1=Context::get('lng');
}
<[email protected]>

 

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

 

 

 

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

 

<[email protected](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;
}
<[email protected]

 

 

 

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

 

<[email protected](Context::get('status') == 'now')--><br>({round($d,1)}km)<[email protected]>

 

 

스크린샷(61).png

 

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

글쓴이 웹지기

profile
10년을 다루다 보니 이제 간단한 것도 만들고 커뮤니티 운영에 관한 다양한 노하우가 있습니다. 어려운 점이나 가지신 생각을 함께 소통해 보아요.
https://rxtip.kr/ 라이믹스 꿀팁
  • ?

    뭐라 좋으말을 해 드리고 싶은데

    말주변이 없어서 ^^&

     

    파이팅입니다.

  • profile
    오우~ 좋습니다.
  • ?
    감사합니다.
    본문 내 요일부분이 모두 월요일로 되어 있는데요. 월화수목금으로 바꾸는게 맞는것 같아서 바꿨습니다. ^^
    혹시 입고시간과 측정시간의 년도는 어디서 제거를 하셨는지 도움 좀 받을 수 있을까요?
  • ? profile
    아.. 제것이 스타일링이 되어 있어 그거 제거 하느라 복붙 하다보니 ㅎㅎ 수정하겠습니다.
  • ? profile
    시간 년도와 끝 00초 부분 제거는 본문 설명이 있어요
  • profile ?
    감사합니다.
  • ? profile
    방문해 봤는데 컬러는 안맞추셨네요. 그게 가장 중요합니다. 맞춰주길 권고하는 컬러를 사용해 주셔야 사용자들이 다른 곳에서 익숙해진 컬러로 식별하기 쉬워요.
  • profile
    우왕 역시 디테일이 다르십니다.^^
  • profile
    감사합니다. ^^
  • profile

    훌륭하십니다. 소스파일 공개 해주시면 더 훌륭하실것 같습니다. ^^

  • profile
    최고입니다~!