portfolio
고도몰 옵션 선택시 박스형태로 UI 변경하기
0
공유하기
고도몰의 기본 옵션 선택 방식은 선택박스 ( 일명 드랍다운) 메뉴입니다.
이 방식은 옵션들의 세무 항목을 확인하기 위해 먼저 선택박스를 클릭해서 일일이 스크롤을 내려 옵션을 살펴봐야 하며 확인해야 할 옵션 개수가 많아지면 살펴보기가 힘들어집니다.
고도몰 튜닝을 통해 버튼형으로 옵션 선택 UI를 개선하여 옵션이 많아도 버튼형으로 나열되어 직관적으로 보이게 되며 옵션을 선택하는 것 또한 1번의 클릭으로 바로 선택이 됩니다.
클릭시 옵션이 선택되어 총 상품금액과 함께 노출되며 선택된 옵션은 검정색으로 색상이 활성화 됩니다.
검정색 배경으로 이미 선택된 옵션을 다시 한 번 클릭할 경우 이번에는 옵션이 삭제되며 검정색 배경이 다시 원래대로 돌아갑니다.
※ 품절된 옵션은 뿌옇게 처리되며 선택되지 않습니다.
※ 옵션 박스형 UI 튜닝이후 텍스트 옵션을 함께 사용할 수 없습니다.
- 고도몰에서 제공하는 텍스트 옵션은 선택할 수 있는 옵션 항목이 N개로 생성되어 활성화/비활성화가 배경 컬러로 명확히 구분되는 해당 옵션 UI 에는 적용할 수 없습니다.
튜닝 후 : 고도몰 상품 상세 페이지 PC ( checkbox 형태 )
튜닝 후 : 고도몰 장바구니 페이지 M ( checkbox 형태 )
- 장바구니 페이지에서도 박스형 UI로 선택된 옵션이 활성화되어 보이며 다른 옵션으로 변경이 가능합니다.
튜닝 후 : 고도몰 상품 상세 페이지 M
튜닝 후 : 고도몰 장바구니 페이지 M ( checkbox 형태 )
참고 사이트 1 : 안다르
참고 사이트 2 : 배럴
댓글 0개
댓글을 불러오는 중입니다.
친절한 개발자에게
무엇이든 물어보세요
1
고도몰 옵션 선택시 박스형태로 UI 변경하기