6. 쇼핑몰 메인 이미지 키우기

이번에는 다들 궁금해 하시는 메인 이미지 키우는 법에 대해 알아 보겠습니다.

일단 메인 이미지를 어떻게 배열할지 설정을 먼저 해 주셔야 합니다. 

기본은 4단 가로형 X 세로 맘대로...^^ㅋ 10개로 설정하겠습니다.

총 40개의 메인 이미지가 배열 되겠죠...^^

1. 상품 관리

2. 메인상품 진열관리

3. 메인상품관리

4. 메인추천/메인신상품

5. 4단가로형

6. 10개

7. 진열방법 설정.

8. 설정완료.

<참고. 4X10 으로 설정하면 40개의 상품이 메인에 뿌려 지게 됩니다. 그 이상 상품을 진열하면 상품은 숨겨 집니다.>

이상 메인화면 이미지 설정법입니다. 

이제 본격적인 이미지 키우는 법에 대해 알아 보겠습니다.

1. 디자인관리 - HTML 디자인 설정 - 메인화면디자인 -CENTER의 이미지 100X100을 200X200으로 변경하겠습니다.

2. 밑으로 내려오면 위의 이미지와 같이  4단 가로형 모튤이 있습니다. 편집을 클릭해 줍니다.

3. 상품 목록의 편집을 클릭해 줍니다.

4. 새창이 뜨며 소스가 보입니다.

<원소스>

{{*

파일 내용 : 4단 상품 출력 시작

변수 설명 :

cnt           : 상품 출력 번호

product_price : 상품 가격

product_name  : 상품 명

product_no    : 상품 번호

main_cate_no  : 상품을 클릭한 카테고리 번호(통계를 위한 값)

display_group : 1=일반 상품, 2=추천상품, 3=신규상품

common_img    : 품절/무이자/적립금 등의 아이콘

        product_effect: 상품이미지 마우스오버 효과

*}}

  <!-- UNIT u2 시작 -->

  {{* 상품 출력 시작 *}}

  {{if $cnt mod 4 eq 0 and $cnt is div by 8 }}

   <tr bgcolor="{{$table_attr.td_unselected_color}}">

  {{elseif $cnt mod 4 eq 0}}

   <tr bgcolor="{{$table_attr.td_selected_color}}">

  {{/if}}

    <td align="center" width='25%' valign="top">

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

             <tr>

                  <td align="center" valign="top">

                   {{$tooltip_span_s}}

                   <a href="/front/php/product.php?product_no={{$product_no}}&main_cate_no={{$main_cate_no}}&display_group={{$display_group}}">

        <img src="http://{{$image_server}}/web/product/tiny/{{$image_tiny}}" width="100" height="100" {{$product_effect}}></a>

         {{$tooltip_span_e}}

                  </td>

             </tr>

             <tr>

                  <td align="center">

                     <table cellpadding=0 cellspacing=0 border=0>

                        <tr>

                          <td width=120 align="center">

     <a href="/front/php/product.php?product_no={{$product_no}}&main_cate_no={{$main_cate_no}}&display_group={{$display_group}}">

             {{$product_name_font}}{{$product_name}}</a>{{$common_img}}{{$product_summary_info}}

                          </td>

                        </tr>

                      </table>

                  </td>

             </tr>

             <tr>

                  <td align="center" valign="top">{{$product_add_info1}}</td>

             </tr>

        </table>

    </td>

  {{* <TR>로 줄 끊기 *}}

  {{if $cnt ne 0 and ( $cnt + 1 ) mod 4 eq 0}}

  </tr>

  {{/if}}            

<빨간색 부분의 100X100을 원하는 크기로 변경합니다. 전 200X200으로 변경하겠습니다.

{{*

파일 내용 : 4단 상품 출력 시작

변수 설명 :

cnt           : 상품 출력 번호

product_price : 상품 가격

product_name  : 상품 명

product_no    : 상품 번호

main_cate_no  : 상품을 클릭한 카테고리 번호(통계를 위한 값)

display_group : 1=일반 상품, 2=추천상품, 3=신규상품

common_img    : 품절/무이자/적립금 등의 아이콘

        product_effect: 상품이미지 마우스오버 효과

*}}

  <!-- UNIT u2 시작 -->

  {{* 상품 출력 시작 *}}

  {{if $cnt mod 4 eq 0 and $cnt is div by 8 }}

   <tr bgcolor="">

  {{elseif $cnt mod 4 eq 0}}

   <tr bgcolor="">

  {{/if}}

    <td align="center" width='25%' valign="top">

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

             <tr>

                  <td align="center" valign="top">

                   {{$tooltip_span_s}}

                  

        <a href="/front/php/product.php?product_no={{$product_no}}&main_cate_no={{$main_cate_no}}&display_group={{$display_group}}"><img src="http://{{$image_server}}/web/product/tiny/{{$image_tiny}}" width="200" height="200"{{$product_effect}}></a>

         {{$tooltip_span_e}}

                  </td>

             </tr>

             <tr>

                  <td align="center">

                     <table cellpadding=0 cellspacing=0 border=0>

                        <tr>

                          <td width=120 align="center">

    

             <a href="/front/php/product.php?product_no={{$product_no}}&main_cate_no={{$main_cate_no}}&display_group={{$display_group}}">{{$product_name_font}}{{$product_name}}</a>{{$common_img}}{{$product_summary_info}}

                          </td>

                        </tr>

                      </table>

                  </td>

             </tr>

             <tr>

                  <td align="center" valign="top">{{$product_add_info1}}</td>

             </tr>

        </table>

        </td>

  {{* <TR>로 줄 끊기 *}}

  {{if $cnt ne 0 and ( $cnt + 1 ) mod 4 eq 0}}

  </tr>

  {{/if}}        

이제 내상점 보기를 클릭하시면 메인 상품이미지가 바뀐것을 확인하실수 있습니다.