CMS매뉴얼 17.상품목록 수정하기
2012-02-25 19:56:39

17. 상품목록 수정하기

세부 화면 디자인에서 제공되는 페이지는 일반적으로 하나의 디자인만 출력할 수 있지만, 강제접근코드를 이용하면 상품 목록, 회원 가입, 회사 소개 등의 페이지에서 두 가지의 다른 디자인을 출력할 수 있습니다. 강제접근 코드에 대해 자세히 살펴보도록 하겠습니다.

EMB0000149035a4 src

? [디자인관리》고급 디자인 관리》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품목록에서 나만의 디자인을 “[photo]앨범형 상품 목록”으로 선택합니다.

tip)실제로 화면에 출력되는 세부화면 페이지는 ?과 같이 파란 글씨로 표시됩니다.

? [photo] 앨범형 상품목록의 강제접근코드의 코드명입니다.

EMB0000149035a5 src

? [list] 목록형 상품목록 화면입니다.

? [list] 목록형 상품목록의 강제접근코드의 코드명입니다.

EMB0000149035a6 src

? 상품목록에서 [photo] 앨범형 상품목록을 출력하는 버튼이며, html을 아래와 같이 해당위치의 <td>~</td>에 삽입합니다.

<a href="javascript:direct_code('photo')"><img src="/img_up/shop_pds/ushop009/design/button/btn_list_type1.gif" width="63" height="25" border="0"></a>

? 상품목록에서 [list] 목록형 상품목록을 출력하는 버튼이며, html을 아래와 같이 해당위치의<td>~</td>에 삽입합니다.

<a href="javascript:direct_code('list')"><img src="/img_up/shop_pds/ushop009/design/button/btn_list_type2.gif" width="63" height="25" border="0"></a>

위와 같이 웹디모 솔루션에서 강제접근코드를 이용하면 하나의 페이지에 두 가지 이상의 디자인을 출력할 수 있습니다.

2_1 앨범형 상품 목록 수정하기

(1) 앨범형 상품목록 미리보기

? [디자인관리》고급 디자인 관리》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품목록에서 나만의 디자인을 [photo]앨범형 상품 목록으로 선택할 경우 아래와 같이 나타납니다. “수정 전 이미지”를 “수정할 디자인”으로 출력되도록 수정하고, 서브 페이지의 상품목록, 상품상세보기, 상품 상세 검색 등도 동일한 방법으로 수정해 보도록 하겠습니다. 상품을 불러오는 부분을 제외하고는 html코딩으로 이루어져있기 때문에 메인코딩방법과 동일하게 작업합니다.

수정 전 이미지

EMB0000149035a7 src

수정 할 디자인

EMB0000149035a8 src

(2) 앨범형 상품목록 수정하기

EMB0000149035a9 src

? [디자인관리》고급 디자인 관리》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품목록에서 나만의 디자인을 [photo]앨범형 상품 목록으로 선택합니다.

? 앨범형 상품 목록의 html소스입니다. 웹디모 샵 디자인으로 변경하기 위해 html소스를 복사 하여 드림위버에서 편집해보겠습니다.(편집기는 어떤 것을 사용하셔도 무방합니다.)

아래의 그림에서 왼쪽은 앨범형 상품 목록 소스를 복사하여 드림위버 Design view로 표시한 것이며, 오른쪽은 앨범형 상품 목록이 웹상에서 출력된 화면으로 왼쪽과 오른쪽 그림상의 번호는 동일한 위치입니다.

EMB0000149035aa src

? {GROUP_mypage_top}[쇼핑몰 관련 페이지 수정하기-서브코딩하기-서브 상단 타이틀 수정하기]에서 언급한 것과 같이 상단의 이미지를 변경하는 부분입니다.

? [메인 중앙 디자인 코딩하기-상품출력하기-상품추천코드편]에서 선택한 상품들이 나타납니다. 기본적으로 “best”코드가 등록되어 있습니다. 웹디모 샵 세부화면에서는 추천 상품코드를 사용하지 않기 때문에 테이블을 삭제합니다.

EMB0000149035ab src

? 아래와 같이 TOP>OUTER으로 나타나며, 쇼핑몰의 현재 위치를 나타냅니다.

EMB0000149035ac src

위에 사용되는 소스에서 <script>~</script>가 현재 위치를 나타내는 소스입니다. 현재 위치의 글자 속성을 변경하고자 할 경우에는 아래와 같이 직접 소스를 수정합니다. 필자는 현재 위치의 <td>~</td>에 변경할 왼쪽과 오른쪽이미지를 삽입하고, 현재 위치를 표시하는 <td>~</td>에서 배경이미지를 수정하였습니다.

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

<tr>

<td width=32><img src='/img_up/tmp_img/webdi/3_96/subtitle_icon.gif'></td> <-- 왼쪽 이미지

<td background='/img_up/tmp_img/webdi/3_96/subtitle_bg.gif' align=left> <- 백그라운드 이미지

<b>

<script>

// 현재 카테고리 위치 표시 부분

var str = "<a href='../shop_goods/goods_list.htm?list_type='><font color=ffffff size=3>TOP</font></a> ";

var row

var code,subject

var category_this_arr = category_this_str.split("");

for(var i =0;i<category_this_arr.length;i++){

if(!category_this_arr[i]) continue;

row = category_this_arr[i].split( "" );

code = row[0]; // 카테고리 코드번호

subject = row[1]; // 카테고리 명

str += "<font color=ffffff size=3>&gt</font> <a href='../shop_goods/goods_list.htm?category="+code+"'><font color=ffffff size=3>"+subject+"</font></a>";

}

document.write(str);

</script>

</b>

</td>

<td width='10'><img src='/img_up/tmp_img/webdi/3_96/subtitle_right.gif'></td> <--오른쪽 이미지

</tr>

</table>

아래의 그림은 현재 위치가 수정된 화면입니다.

EMB0000149035ad src

? 현재 위치의 서브메뉴를 나타냅니다.

? 상품을 속성별로 정렬하는 부분이며, 이미지를 변경하려면 변경할 이미지와 동일한 이름으로 변경한 다음 동일한 경로에 업로드합니다. 예를 들어, /img_up/shop_pds/ushop009/design/button/goods_order1.gif를 변경할 경우에는 이미지를 goods_order1.gif로 저장한 한 다음 /img_up/shop_pds/ushop009/design/button위치에 FTP를 사용해서 goods_order1.gif 이미지를 업로드 합니다.

? 상품을 출력합니다. 웹디모 샵의 상품에 맞는 이미지와 버튼으로 수정해 보도록 하겠습니다.

EMB0000149035ae src

수정 전 디자인

EMB0000149035af src

수정 할 디자인

수정하기 전에 디자인의 체크 박스와 확대 아이콘을 삭제한 후, [photo]앨범형 상품 목록 html소스에서 상품이 출력되는 //테이블 한칸 안에 들어갈 상품 디자인 선언이라는 주석이 삽입되어 있는 부분을 찾습니다.

EMB0000149035b0 src

이 부분은 상품을 표시하고, 상품의 가격, 아이콘, 확대보기 등을 나타내는 소스입니다. 체크박스와 크게보기 이미지가 <td>~</td>에 포함되어 있으므로 아래의 소스부분을 찾아서 삭제합니다.

[photo] 앨범형 상품 목록 html소스에서 삭제 할 소스

goods_box += "<td width='20' align='center' valign='top' style='padding:5 0 0 0'><input type='checkbox' name='goods_idx_arr' value='"+idx+"'><img width='1' height='5'><br><a href='javascript:goods_img_detail("+idx+")'><img src='/img_up/shop_pds/ushop009/design/title/sub_icon3.gif' width='13' height='13' border='0'></a></td>";

지금부터 바로구매, 장바구니, 찜하기 버튼을 변경해 보도록 하겠습니다. //(앨범형)상품 목록 출력부분의 소스에서 해당하는 이미지를 변경하거나 크기를 변경합니다. 필자는 이미지명을 동일하게 만들고 동일한 경로에 업로드 했기 때문에 크기만 조절하겠습니다.

goods_box += "<td ><a href='javascript:goods_direct_buy("+idx+")'><img src='/img_up/shop_pds/ushop009/design/button/sub1_bt_buy.gif' width='70' height='21' border='0'></a></td>";

goods_box += "<td ><a href='javascript:goods_cart_reg("+idx+")'><img src='/img_up/shop_pds/ushop009/design/button/sub1_bt_cart.gif' width='71' height='21' border='0'></a></td>";

goods_box += "<td width='56' valign='top'><a href='javascript:goods_jjim("+idx+")'><img src='/img_up/shop_pds/ushop009/design/button/sub1_bt_zzim.gif' width='56' height='21' border='0'></a></td>";

Check point) 웹디모 솔루션에서는 상품이미지의 크기 변경시 width, height 태그를 사용하지 않습니다. 상품목록 출력의 상품이미지 크기변경은 [상품 관리》환경 설정》상품정보 설정]의 상품이미지 크기 설정에서 변경합니다.

아래 그림은 수정된 앨범형 상품목록입니다.

EMB0000149035b1 src

2_2 list형 상품 목록 수정하기

(1) list형 상품목록 미리보기

앞서 설명한 앨범형 상품 목록 수정하기를 활용해서 list형 상품목록을 수정해 보도록 하겠습니다.

EMB0000149035b2 src

(2) list형 상품목록 수정하기

EMB0000149035b3 src

list형 상품목록의 현재 위치는 앨범형 상품 목록 수정하기에서 수정한 부분과 동일하므로 따로 수정할 필요 없이 앨범형 상품목록의 소스를 복사해서 리스트형 상품목록을 수정해 보도록 하겠습니다. [디자인관리 》고급 디자인 관리 》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품목록에서 나만의 디자인을 [photo]앨범형 상품목록에서 현재 위치의 table까지 복사한 후, [list]목록형 상품목록에 삽입합니다. 체크박스와 미리보기 아이콘은 위치를 찾아 삭제하고, 바로구매와 장바구니 등의 아이콘은 같은 크기로 이미지를 변경합니다. 여기서는 생략하도록 하겠습니다.

EMB0000149035b4 src

? 앨범형 상품목록의 타이틀이미지와 현재 위치입니다.

? ?에 해당하는 소스이며, 이 부분을 복사해서 list형 상품 목록의 현재 위치에 삽입하고 저장합니다.

EMB0000149035b5 src

? list형 상품 목록의 타이틀 이미지와 현재위치입니다.

? ?에 해당하는 소스이며, 이 부분을 삭제하고 ?의 소스를 삽입합니다. 위치를 검색할 경우에는 //하위 카테고리 출력부분으로 검색합니다.

tip) 드림위버에서 검색할 경우에는 단축키 Ctrl+F를 사용합니다.

? 드림위버에서 수정된 list형 상품목록의 소스를 [디자인관리 》고급 디자인 관리 》세부화면 디자인]으로 이동하여 쇼핑몰 상품관련의 상품목록에서 [list]목록형 상품 목록의 소스 부분에 삽입하고, 수정 버튼을 클릭하면 아래와 같이 변경된 list형 상품 목록을 확인할 수 있습니다.

EMB0000149035b6 src