CMS매뉴얼 18.상품 상세보기 수정하기
2012-02-25 19:59:03

18. 상품 상세보기 수정하기

상품상세 페이지를 수정해 보도록 하겠습니다. 상품 상세보기는 상품 상세 페이지, 상품구입, 배송관련 등을 나타내는 페이지입니다. 여기에 추가로 상품정보나 알림 글 등을 삽입할 수 있으며, 홈페이지 상품의 성격과 필요유무에 따라 삭제가 가능합니다.

(1) 상품 상세보기 미리보기

여기서는 상품 상세보기 페이지를 상품이 출력되는 부분(상품이 출력되고 구매하기, 장바구니담기 까지)과 상품 정보, 관련 상품, 교환 및 배송, 이용후기, 상품문의의 상품과 쇼핑몰의 정보를 나타내는 부분으로 나누어서 살펴보도록 하겠습니다.

상품 상세보기 기본 이미지

EMB000014903540 src

상품 상세보기에 적용할 디자인

EMB0000149035b7 src

(2) 상품 상세보기 상품출력 수정하기

상품상세보기 소스에서 상품출력부분을 웹디모 샵에 알맞게 수정합니다. 필자는 [디자인관리 》고급 디자인 관리 》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품상세보기에서 소스를 드림위버로 불러와 수정해 보도록 하겠습니다.

EMB0000149035b8 src

아래의 그림은 상품 상세보기의 상품출력 디자인부분입니다. 상품이 표시되는 왼쪽은 디자인 변동이 없기 때문에 수정하지 않고, 오른쪽의 상품명과 가격 부분을 새로운 디자인으로 변경해 보도록 하겠습니다.

EMB0000149035b9 src

? 새롭게 변경할 디자인에는 상품의 현재위치가 필요하지 않으므로 기본 디자인의 상품 상세보기소스에서 상품의 현재위치부분을 삭제합니다.

EMB0000149035ba src

? 상품의 현재 위치가 들어가야 할 부분을 <table>로 만들어 삽입합니다. 상품명이 표시되는 <td>~</td>에 다음과 같이 문자 변환 코드를 삽입합니다. 여기서 {GOODS_NAME}은 상품명을 나타내고, {GOODS_INFO}은 상품 간략 정보를 나타냅니다.

<td><font color=da2971 size=3><b>{GOODS_NAME}</b></font><font color=000000>{GOODS_INFO}</font></td>

EMB0000149035bb src

? 구매하기, 장바구니담기, 관심 상품등록, 추천메일 발송, 상품 문의하기 버튼을 수정하는 가장 좋은 방법은 새롭게 변경되는 버튼의 이미지명을 기존의 이미지 명과 동일하게 변경하는 것입니다. 필자는 이미지명을 기존의 버튼이미지명과 동일하게 변경하고, 웹디모 샵에서 사용하지 않는 추천메일발송 이미지는 소스에서 삭제하였습니다.

EMB0000149035bc src

? 아래의 그림은 상품 상세보기의 상품출력부분이 수정된 화면입니다.

EMB0000149035bd src

(3) 상품 상세보기 상품정보 출력 수정하기

아래의 그림은 상품 상세보기의 상품정보를 출력한 화면입니다. 디자인한 이미지 중 버튼, 백그라운드, 타이틀 등의 이미지를 크기에 맞게 자른 후 동일한 위치에 삽입해 보도록 하겠습니다.

EMB0000149035be src

EMB0000149035bf src

? 웹디모 샵에서 기존 디자인의 버튼 중에서 추천상품 탭은 사용하지 않기 때문에 그림에 있는 ? 번 소스를 모두 삭제합니다.

EMB0000149035c0 src

? 상품상세정보를 표시하는 변환코드인 {GOODS_CONTENT}를 통해서 화면에 표시합니다. 상품상세정보를 등록하는 방법은 [상품 관리 》상품 관리 》상품등록관리]로 이동해서 상세설명정보에 상품을 소개하는 글자나 이미지를 삽입합니다.

EMB0000149035c1 src

? {GOODS_INFO_CONTENT}변환코드는 상품 공통정보를 화면에 표시합니다. 상품 공통정보를 등록하는 방법은 [상품 관리 》상품 관리 》상품상세 공통정보]에서 입력할 수 있습니다. 이 부분은 쇼핑몰의 모든 상품페이지에 표시될 글자나 이미지가 있을 때 사용합니다.

EMB0000149035c2 src

? 현재 상품과 관련성이 있는 상품을 등록합니다. 관련 상품을 등록하는 방법에 자세히 대해서 살펴보도록 하겠습니다.

EMB0000149035c3 src

[상품 관리 》상품 관리 》관련상품 관리]에서 관련 상품 그룹등록 버튼을 클릭하면 관련 상품 등록창이 나타납니다. 관련 상품의 제목을 입력하고 등록 버튼을 클릭합니다. 아래의 같이 생성된 관련 상품그룹이 표시됩니다. 오른쪽의 등록상품 관리 버튼을 클릭한 후 관련 상품을 나타낼 카테고리를 지정합니다.

EMB0000149035c4 src

관련 상품으로 등록할 상품을 추가 버튼을 이용해서 추가하고 적용버튼을 클릭하면 아래와 같이 관련 상품이 출력되는 것을 확인할 수 있습니다.

EMB0000149035c5 src

EMB0000149035c6 src

? 교환 및 반품안내의 타이틀부분은 이미지로 만들거나 간편 디자인을 사용합니다.

? TEXT로 출력되는 교환 및 반품에 관련된 내용이며 수정이 쉽도록 아래와 같이 html 간편 디자인으로 생성합니다. 아래의 소스에서 타이틀이미지는 FTP로 업로드하고 글자가 표시되는 부분은 {USER_subtext2}이라는 간편디자인이 삽입되었습니다.

<!-- 교환/반품/환불1-->

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="1" background='/img_up/tmp_img/group/2/14/line_dot03.gif'></td>

</tr>

<tr>

<td height="20"><img src="/img_up/shop_pds/ushop009/design/button/gv_tab4_tit1.gif" width="140" height="19"></td>

</tr>

<tr>

<td height="1" background='/img_up/tmp_img/group/2/14/line_dot03.gif'></td>

</tr>

<tr>

<td style="padding:20 0 20 0">{USER_subtext2}</td>

</tr>

</table>

<!-- 교환/반품/환불1 종료-->

? 이용후기에서는 전체보기버튼, 이용후기버튼을 변경해보도록 하겠습니다. 앞에서와 동일한 방법으로 이미지명과 경로를 동일하게 만들어 업로드하면 아래와 같이 나타납니다. 필자는 이용후기 뿐만 아니라 샵의 기본 디자인의 버튼을 웹디모 샵에 맞는 버튼 이미지로 변경하였습니다.

EMB0000149035c7 src

동일한 방법으로 교환/반품/환불 부분도 적용하면 아래 그림과 같습니다.

EMB0000149035c8 src