드디어 제품소개페이지 만들기가 막바지에 왔네요 ^^ 역시 뭐든지 꾸준히 하는것이 중요합니다.

계속따라서 하다 보시면 나도 모르게 실력이 부쩍 늘어난답니다. 앞으로도 계속 화이팅 해주세요.

자~ 오늘은 지금까지 만든 제품들을 메인에 출력해보는 시간입니다. 당연히 그룹디자인을 이용하겠죠? 

아래는 오늘 배울부분의 메인화면 결과물입니다.  아래과 같이 제품명, 모델명/제조년월, [상세보기]가 표시되도록 만들어 보겠습니다.

그룹디자인을 사용하기 위해서 [디자인관리 》 고급 디자인 관리 》 그룹디자인 관리]로 이동합니다.

"프로그램 마법사생성" 버튼을 클릭하고 "[제품소개] 데이타출력"에서 "앨범형"을 선택합니다.

프로그램마법사 환경설정에서 다음과 같이 각 항목에 값을 입력합니다.

  - 나의 그룹코드 설정는 "product" 를 입력합니다.

  - 제목은 "제품소개 메인출력"을 입력합니다.

  - 출력수는 5건

  - 썸네일크기는 150×150으로 "원본 이미지가 위 설정한 사이즈안에 가득 찰 수 있는데까지만 축소 하고 나머지는 잘라 낸다."에 체크합니다.  이렇게 설정하면 이미지가 정확하게 썸네일크기에 맞춰진답니다.

  - 가로진열수를 5로 설정 

생성된 그룹디자인의 미리보기를 눌러보면 아래 그림과 같이 나타납니다.

현재 화면에서 수정할 부분은 다음과 같습니다.

  - 타이틀, 상세보기를 사진의  아래쪽으로 이동

  - 모델명/제조년월을 사진의 아래쪽에 추가

소스수정버튼을 클릭한 후 다음과 같은 소스를 찾아주세요~

ok_content = content.substr(0,100); // 본문내용 글자수 
 if(content.length != ok_content.length) ok_content += "...";

이 부분을 아래와 같이 content 부분을 전부 column1으로 변경합니다.

 ok_column1= column1.substr(0,8); // 본문내용 글자수 
 if(column1.length != ok_column1.length) ok_column1+= "...";

위 소스는 colmun1 의 글자수를 8자리까지 표시하고, 8자리를 넘으면 글자 뒤에 " ..."으로 표시되도록 하는 소스랍니다.

자주사용되는 스크립트 구문이므로 외워두시면 유용하게 사용할 수 있습니다.

그리고, 나머지 부분은 아래와 같이 수정합니다.

 

[전체소스]

 

$$LIMIT=05$$ <!--출력수 : 반드시 2자리 입력-->
$$THUMBNAIL=120*120*2$$ <!--썸네일 이미지 사이즈 선언 : 가로*세로 -->
$$CODE=ALL$$ <!-- shin : 신규상품, ingi : 인기상품, chu : 추천상품, best : 베스트 상품 -->
$$CATEGORY=00000000$$ <!--제품분류코드 : 반드시 8자리코드 입력-->
$$ORDER_TYPE=DEFAULT$$ <!--정렬 방식 RAND 또는 DEFAULT  입력-->
$$PRODUCT$$ <!-- 추천 사이트 선언 -->

<table width=100% border="0" cellpadding="0" cellspacing="0">
<script>
// (앨범형)
var goods_box
var str = '';

var namuji;
var column = 0; // 변경 금지
var table_col = 5; // 가로 진열수
var width =  parseInt(100/table_col);

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

 read_url = read_url_arr[i]; // 연결 URL
 etc_img1 = etc_img1_arr[i]; // 이미지 URL
 column1 = column1_arr[i]; // 1번 내용
 column2 = column2_arr[i]; // 2번 내용
 column3 = column3_arr[i]; // 3번 내용
 column4 = column4_arr[i]; // 4번 내용
 column5 = column5_arr[i]; // 5번 내용
 column6 = column6_arr[i]; // 6번 내용
 column7 = column7_arr[i]; // 7번 내용
 column8 = column8_arr[i]; // 8번 내용
 etc1_name = etc1_name_arr[i]; // 추가항목1 제목
 etc1_value = etc1_value_arr[i]; // 추가항목1 값
 etc2_name = etc2_name_arr[i]; // 추가항목2 제목
 etc2_value = etc2_value_arr[i]; // 추가항목2 값
 etc3_name = etc3_name_arr[i]; // 추가항목3 제목
 etc3_value = etc3_value_arr[i]; // 추가항목3 값
 etc4_name = etc4_name_arr[i]; // 추가항목4 제목
 etc4_value = etc4_value_arr[i]; // 추가항목4 값
 etc5_name = etc5_name_arr[i]; // 추가항목5 제목
 etc5_value = etc5_value_arr[i]; // 추가항목5 값
 goods_price = goods_price_arr[i]; // 제품 가격
 content = content_arr[i]; // 제품 상세 내용

 ok_column1= column1.substr(0,8); // 본문내용 글자수 
 if(column1.length != ok_column1.length) ok_column1+= "...";

 // 테이블 한칸 안에 들어갈 상품 디자인 선언
 goods_box = "<table width='100%' border='0' cellspacing='0' cellpadding='0'>";
 goods_box += "<tr>";
 goods_box += "<td valign=top align='center' width='150'>";
 goods_box += "  <table border='0' cellpadding='0' cellspacing='1' bgcolor='#555555'><tr> ";
 goods_box += "   <td bgcolor='#FFFFFF'><a href="+read_url+"><img src='"+etc_img1+"'  border=0></a></td>";
 goods_box += "  </tr>";
 goods_box += "  </table>";
 goods_box += "</td>";
 goods_box += "</tr><tr>";
 goods_box += "<td valign=top style='padding:10' align=center>"+ok_column1+"</b><br>"+column2+"/"+column3+"<br> <a href="+read_url+"><b>[상세보기]</b></a></td>";
 goods_box += "</tr>";
 goods_box += "</table><br>";

 column++;
 namuji = column % table_col;
 if(namuji == 1) str += "<tr>"; 
 str += "<td width="+width+"% align=center valign=top style='padding:5 0 5 0'>"+goods_box+"</td> ";
 if(namuji == 0) str += "</tr><tr><td colspan="+table_col+" background=/img_up/tmp_img/group/6/36/line_dot01.gif></td></tr>";
}
namuji = column % table_col;
if(0 < namuji){
 for(i=namuji;i<=table_col - 1;i++){
  str += "<td  width='"+width+"%'>&nbsp;</td>";
 }
 str += "</tr>";
}
document.write(str);
</script>
</table>

위에서 생성된 그룹디자인코드 {GROUP_product}를 메인화면의 붙여넣어보도록 하겠습니다.
[디자인관리 》 고급 디자인 관리 》 메인 화면 디자인]으로 이동하여 기존의 소스에 아래와 같이 제품소개부분의 소스를 추가합니다.

수고하셨습니다~~~

완성화면 : http://uhkr29.aramschool.co.kr/shop_main/main_body.htm

완성 하신 분은 다음 미션으로 고고고~~~