오늘은 지난 미션에 이어 쇼핑몰의 상품리뷰에 대해서 알아보도록 하겠습니다.

상품리뷰는 상품후기 또는 이용후기 라고도 하며, 고객이 상품을 구매후 상품과 관련된 여러가지 내용을 적을 수 있는 기능입니다. 대부분의 쇼핑몰에서는 상품상세보기 페이지에 상품리뷰가 표시됩니다.

상품리뷰는 [디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]의 "[쇼핑몰]상품리뷰"에 있으며, 상품리뷰 전체목록, 상품리뷰 읽기, 상품리뷰 등록폼, 상품리뷰 덧글 수정폼으로 페이지가 구분됩니다. 필자는 [쇼핑몰]상품리뷰의 순서대로 설명드릴께요.

 

 

 

 

 
 

 

상품리뷰  전체목록은 상품리뷰에 대한 전체목록을 표시하는 페이지입니다.  [쇼핑몰]상품리뷰에서 상품리뷰 전체목록을 클릭합니다.

 

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

- 기본템플릿에서 "상품 후기 목록 A "를 선택합니다.

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

- 나만의 디자인에 복사된 "상품 후기 목록 A "를 선택합니다.

 

위의 순서대로 완료한 후에는 페이지 디자인 관리의 URL을 클릭하여 페이지를 확인합니다. 또한, 상품리뷰를 확인하기 위해서 임의로 상품리뷰를 5개정도 등록합니다. 상품리뷰를 등록하기 위해서는 반드시 상품을 클릭한 후 상품상세보기화면에서 상품리뷰(이용후기)에 작성해야 합니다.

 

※  결과물이 얘기치못한 형태로 나오는 경우게 있으니 완료 후에는 반드시 페이지를 확인하는 습관을 가져야 합니다!
 

 

 

 

 

 

 

 

 

 

 

 

상품리뷰읽기는 상품리뷰목록에서 해당항목을 클릭했을때 나타나는 페이지입니다. 동일한 방법으로 외각디자인을 선택하고 기본템플릿(상품 후기 읽기 C)을 나만의 디자인으로 복사합니다.

 

 

 

 

       

 

 

 

상품리뷰 등록폼은 상품리뷰를 등록하는 페이지입니다. 위에서 설명했듯이 상품리뷰를 등록하기 위해서는 반드시 상품을 클릭한 후 등록해야합니다. 상품리뷰는 상품에 대한 후기를 등록하는 부분이며, 각 상품별로 상품리뷰가 존재합니다.

동일한 방법으로 외각디자인을 선택하고 기본템플릿(상품 후기 작성 폼 C)을 나만의 디자인으로 복사합니다.

 

 

 

 

       

 

상품 리뷰 덧글 수정 폼은 상품리뷰 등록후 읽기모드에서 등록된 덧글을 수정하는 페이지입니다. 동일한 방법으로 외각디자인을 선택하고 기본템플릿(상품 리뷰 덧글 수정 폼 B)을 나만의 디자인으로 복사합니다.

 

 

 

 

 

 

 

 

 

위에서 만든 상품리뷰 덧글 수정폼을 차후에 수정이 쉽도록 만들어 보겠습니다.

상품리뷰 덧글수정폼을 HTML편집기모드에서 확인해보면 아래와 같이 소스만 보이시죠?

 

이것을 아래와 같이 이미지형태로 만들어 볼께요. 이런 형태로 편집기모드를 만들 경우에 페이지전체를 한눈에 쉽게 알 수 있고, 본인뿐만 아니라 다른 고객이 쉽게 수정할 수 있다는 장점이 있습니다.

 

위와 같이 HTML편집기모드를 이미지형태로 만들려면 소스전체가 순수 HTML소스로 되어있어야 합니다. 즉, HTML기본테그(<table>,<tr>,<td>,a태그, img태그, input,... )로만 이루어진 소스를 말합니다. 위의  HTML소스에서 보면 "<script> 내용 </script>" 부분이 삽입되어 있으며, 이 부분은 자바스크립트로 순수 HTML소스가 아닙니다. 이 부분을 수정해보도록 하겠습니다.

TEXT모드를 클릭하고 아래의 소스부분을 잘라내고(Ctrl + X)  수정완료버튼을 누릅니다.

 

※ HTML편집기모드에서 소스를 수정할 경우에는 소스의 전체포멧이 꼬일 수 있기 때문에 가능한 TEXT모드에서 소스를 수정해야 합니다.

 

[디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]에서 일반그룹디자인 생성버튼을 클릭한 후 아래와 같이 만들어 줍니다. TEXT모드에서 그룹코드(review_top), 제목(상품리뷰 상단)을 입력하고 소스를 붙여넣기(Ctrl+V)하고 "신규그룹디자인"버튼을 클릭합니다.

 

 

[디자인관리 》 고급 디자인 관리 》 세부 화면 디자인]으로 이동한 후 "상품 리뷰 덧글 수정 폼 B" 편집창 아래의 "나만의 그룹디자인"을 클릭하고 해당하는 그룹코드를 클릭하면 그룹코드가 저장됩니다.

※ 나만의 그룹디자인은 그룹디자인으로 만든 코드들을 한 곳에 모아놓은 페이지입니다. 코드를 클릭하면 자동으로  클립보드에 저장되며 페이지의 어느 곳이든지 코드를 붙여넣기(Ctrl+V)할 수 있습니다.

 

 

편집창에서 위에서 복사된 그룹코드를 소스창의 최상단에 붙여넣기(Ctrl+V) 합니다.

 

 

마지막으로 HTML편집기모드로 전환하면 아래과 같이 나타납니다.