안녕하세요. 저번시간에 이어 쇼핑몰과 관련된 미션을 계속하고 있습니다.

쇼핑몰은 알아야 할 것두 많고 수정할 부분도 많이 있습니다. 일반 홍보용 홈페이지를 만드는것보다 2~3배정도 작업량이 많고 그 만큼 페이지 작업에 시간이 많이 소요됩니다. 필자가 쇼핑몰 미션초기에 설명했듯이 쇼핑몰을 운영하고자 하시는 분들은 쇼핑몰 관련페이지들을 모두 아시는게 좋습니다. 이유는 운영하시다 보면 필요에 따라 새로운 페이지를 만들거나 기존의 페이지를 수정할 경우에 자주 생기니까요~

오늘은 쇼핑몰에서 가장 중요한 부분인 상품관련페이지에 대해서 알아보도록 하겠습니다. 상품관련페이지는 [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]의 "[쇼핑몰]상품 관련" 부분으로 상품목록, 상품상세페이지, 상품이미지 상세보기, 견적서(목록/패스워드확인/상세보기/등록폼/프린트), 오늘 본 상품 퀵메뉴, 위시리스트 추가, 오늘 본 상품목록, Q&A(목록/상세보기/등록폼/비밀번호) 등 중요하다고 생각되는 페이지들이 모두 모여있습니다.

여기서 쇼핑몰에서 잘 사용하지 않는 견적서부분은 생략하며, 수행해야 하는 미션이 많은 만큼 상품관련페이지를 3개의 미션으로 나누어 설명하겠습니다.

오늘은 상품관련페이지 첫번째 미션으로 상품목록, 상품상세페이지, 상품이미지상세보기에 대해서 설명드리겠습니다.

우선 상품목록에는 분류1기준, 메인출력코드별, 검색결과페이지가 있습니다.

각 페이지에 대해서 간략히 살펴보면 다음과 같습니다.

① 분류1기준 - 쇼핑몰에서 일반적으로 보여지는 상품목록페이지입니다. "[중급16단] 쇼핑몰 상품 출력 화면 만들기"에서 수행했던 미션이므로 생략하겠습니다.

② 메인출력코드별 - 메인출력코드로 등록된 상품들을 상품목록의 형식으로 출력하는 페이지입니다. 프리미엄상품, 베스트상품, 추천상품,.. 등의 쇼핑몰에 필요한 여러가지 출력코드의 페이지를 만들수 있답니다. "[중급20단] 쇼핑몰 메인출력코드별 상품목록 "에서 수행했던 미션이므로 생략하겠습니다.

③ 검색결과페이지 -  상품검색 결과에 따라 상품목록을 출력하는 페이지이며 상품검색페이지가 필요합니다.

상품목록:: 검색결과페이지에 대해서 살펴보도록 하겠습니다. 

- 외각디자인의 왼쪽디자인을 "쇼핑몰 왼쪽디자인"을 선택하고 "외각디자인 저장하기"를 클릭합니다.

- 기본템플릿에서 "상품 상세 검색 결과 B "를 선택합니다.

- 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다.

- 나만의 디자인에 복사된 "상품 상세 검색 결과 B"를 선택합니다.

검색결과페이지는 바로 확인이 불가능하고 검색기능이 포함된 페이지에서 확인이 가능합니다. 

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]로 이동한 후 [프로그램 마법사 생성]을 클릭합니다.

통합검색폼의 [쇼핑몰전용]상품검색폼을 선택하고 아래와 같이 코드명(search)과 제목(상품검색)을 입력하고 등록합니다.

 

 

상품상세페이지는 상품목록에 나타나는 상품을 클릭했을 때 표시되는 상품가격/옵션/수량/기타정보, 상품정보, 관련상품, 추천상품, 교환 및 반품, 이용후기, 상품문의가 포함되어 있습니다. 각각에 대해서 간략히 설명하면 다음과 같습니다.

① 상품가격/옵션/수량/기타정보 - 상품에 대한 시중가, 판매가, 매입가, 재고량, 선택옵셥, 판매수량,... 등의 다양한 정보를 표시합니다.

② 상품정보 - 상품등록시 상세설명정보의 내용이 표시됩니다.

③ 관련상품 - 서로 관련된 상품을 표시하는 기능입니다. 예를 들어, A의류에 어울리는 A가방, A벨트, A신발이 있을 경우에 모두 관련상품그룹으로 연결하게 되면, 각 상품의 상세보기에서는 자신의 상품을 제외한 나머지 상품이 관련상품으로 나타나게 됩니다.

④ 추천상품 - 관련상품과 동일한 기능이며 추천하고자 하는 상품을 등록합니다.

⑤ 교환 및 반품 - 상품의 교환과 반품에 관한 사항을 표시하는 부분이며, 이미지나 텍스트로 삽입할 수 있습니다.

⑥ 이용후기 -  이전 미션에서 수행했던 상품리뷰입니다.

⑦ 상품문의 - 상품에 대한 궁금한 내용을 문의하는 부분입니다. 차후 미션에서 설명드리겠습니다.

- 외각디자인의 왼쪽디자인을 "쇼핑몰 왼쪽디자인"을 선택하고 "외각디자인 저장하기"를 클릭합니다.

- 기본템플릿에서 "상품 상세 보기"를 선택합니다.

- 하단의 "나만의 디자인으로 복사"버튼을 클릭합니다.

- 나만의 디자인에 복사된 "상품 상세 보기"를 선택합니다.

 

 

 

 

 

 

 

 

상품이미지 상세보기는 상품상세보기 페이지에서 "큰이미지 보기"를 클릭했을 때 표시되는 페이지입니다. 동일한 방법으로 기본템플릿(상품 이미지 상세 보기 B)을 나만의 디자인으로 복사합니다. 이 페이지는 팝업창으로 표시됩니다.