영카트5 + 부트스트랩3 시간좀 걸릴듯 합니다.
안녕하세요. 플록입니다.
대략 5~6년만에 글을 쓰는것 같습니다.
이번에 영카트5에 부트스트랩3을 적용해보는 작업을 하고있습니다.
"제 능력으로 결혼? 까지는 안되고 동거수준 까지는 해보려고 시작한게 한달정도 되었습니다.
본업이 아니기 때문에 틈틈이 하다보니 한달 이라는 것도 별 의미는 없긴 합니다."
시간 되시면 보시고 조언 부탁 드립니다. (조언 주실때 사용자 환경도 같이 부탁 드립니다.)
jquery 1.11.1+bootstrap 3.0.1 로 올려서 진행하고 있습니다.
이것 때문에 일부이긴 하지만 영카트 기존파일을 수정해야 하는 부분도 있더군요.
작업 내용을 대강 설명 드리면..
-레이아웃은 공개 템플릿을 기반으로 필요한 최소한의 부분만 부트스트랩 압축CSS 파일에서 직접수정하고 추가로 필요한 부분은 별도 CSS에서 처리하게 하였습니다. 차차 LESS로 패턴을 잡아가는 수준이 되길 바래봅니다.
-스킨은 반응형을 목표로 상품문의, 상품후기, 메인메뉴, 1:1문의등 최신글과 슬라이드, 서브메뉴 몇 개 그리고 상품문의,후기 리스트도 수정했군요.
-인덱스 상품 목록은 ajax로 타입별로 가져오게 해서 초기 로딩 시간을 단축, localStorage로 최종선택했던 탭을 기억하도록 하였습니다.
-제품정보 페이지에서 상단 제품정보 부분은 반응형으로 약간만 수정하였고 하단 상품정보 및 사용후기등 부분은 탭으로만 바꿨습니다. 이부분도 자료가 늘어나 부담이 된다면 ajax처리해주면 될것 같습니다.
-상품스킨은 편리님의 ajax스킨을 바탕으로 코어버전에 따른 부분만 일부 수정해서 돌아가는 정도입니다.
-구매관련 부분은 아직 손대지 못한 상태 입니다.
시작 할 때 부터 define('G5_USE_MOBILE', false);를 목표로 하고 있기 때문에 모바일쪽은 아예 손대지 않았으므로 모바일에서 보실때에도 http://jemg.co.kr/?device=pc 로 부탁 드립니다.
읽어주셔서 감사합니다.
.
댓글 6개
디자인 이랄게 없습니다. 로고 붙이것 이외에 ..
상품목록, 상품설명 이미지 업로드 할 때 자동으로 워터마크 생성하는걸 해보는데 이미지 퀄리티가 너무 떨어져 걱정입니다.
부트스트랩은 define('G5_USE_MOBILE', false); 이걸로 가야 묘미죠 ㅎ 스킨을 2번 만들필요가 없지요 ㅎㅎ
이미지가 화면 줄였을때 반응하지 않네요 ㅎ
view.skin.php 파일에 내용표시 부분 부트스트랩 이미지 반응형으로 클래스를 주세요 ㅎㅎ~
<img src="경로" class="img-responsive" /> 이렇게 클래스를 주시면 됩니다.
그러면 브라우저 크기에 따라 에디터로 올린 이미지라도 리사이즈가 아닌 반응형 이미지로 ㅎㅎ
또는 <img src="경로"style="display: block;max-width: 100%; height: auto;" /> 이렇게 직접 주셔도 됩니다.
불당님과 돼지코구뇽님 께서 그누4에 작업하신것 알고있습니다.
제경우 5버전의 기본 코드도 익힐겸해서 날코딩을 해보는 겁니다.
상품쪽 썸네일 워터마크까지 했는데 이미지 퀄리티가 떨어지고 색상이 가라않는 현상이 있네요.
퀄리티를 100으로 올리거나 언샾 마스크를 빼도 마찬가지고 썸네일 생성 함수를 유창화님 평션으로 교체해도 같은 현상입니다.
그리고 알려주신 부분은 참조해서 수정 하도록 하겠습니다.
img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;width:100% \9;max-width:100%;height:auto}
- 찾아보니 관련 코드는 위와 같고 코드가운데 \9 는 ie hack 이더군요.