cafe24 쇼핑몰 확대보기 수정

cafe24 쇼핑몰 상세페이지 확대보기 라는 기능 이 있다.
이부분을 다른 방법으로 출력을 원하는 사장님의 문의가 있었다.
확대보기를 클릭했을 때 보여지는 화면은 다음과 같다.

기본적으로 첫번째 이미지가 자리하고 상품등록시 추가이미지로 올린 이미지들이 오른쪽에 작은 이미지로 자리 잡는다.
이 작은 이미지들의 마우스를 올렸을때 큰 이미지가 변경 되는 구조 이다.
하지만 문의 하신 사장님께서는 이런 기능이 아니라 팝업창에 스크롤바를 넣고 총 5개의 이미지가 큰 사이즈로 위에서 아래로 내려오기를 원하셨다.
처음에는 간단하게 생각을 했다.

카페24 쇼핑몰은 상품을 등록 할때 기본 이미지가 있고 추가 이미지가 있을때
기본이미지의 파일 이름은 카페24쇼핑몰 아이디 + 숫자 + .jpg 이며 추가 이미지는 카페24 쇼핑몰 아이디 +숫자 + _1.jpg 부터 카페24 쇼핑몰 아이디 +숫자 + _4.jpg 이렇게 구성된다.

그럼 이미지 확대보기를 눌렀을때 열려지는 팝업창에 현제 상세페이지의 이미지 이름 에서 .jpg 를 때어낸 변수를 팝업창으로 보내고 팝업창에서 받아온 변수에 _1 ~ _4 를 대입해 이미지를 뿌러 주면 되는 것이다.

작업을 할때 카페24 쇼핑몰 솔루션을 최대한 이용해서 작업하는 걸 기본으로 생각 한다. ^^

해서 일단 팝업창으로 여는 소스를 확인 해보았다.
카페24 쇼핑몰 관리자 화면에서 디자인관리 > html 디자인 설정 > 상품관련 화면 > 상품상세정보 > 상품상세설명 >html 편집 에서 팝업창을 여는 소스를 찾았다.

<a href="javascript:image_zoom({{$product_no}},{{$main_cate_no}},{{$display_group}})">

바로 이부분이다. 상세페이지에서 자바스크립트로 팝업창을 열게 되어 있었다. image_zoom 가 실행될때
{{$product_no}},{{$main_cate_no}},{{$display_group}} 해당 변수를 팝업창으로 넘기게 되어 있다.

그리고 자바 스크립트는 디자인관리 > html 디자인 설정 >메인화면 > 자바스크립트 & 스타일시트 > 자바스크립트
에서

function image_zoom( product_no, main_cate_no, display_group )
{
//href = '/front/php/image_zoom.php?img='+image+'&product_no='+document.frm.product_no.value;
href = '/front/php/image_zoom.php?product_no='+product_no+'&main_cate_no='+main_cate_no+'&display_group='+display_group;
option = 'toolbar=no,scrollbars=no,resizable=yes,width=800,height=640,left=0,top=0';
win_name = 'image'

}

</script>
<script>
function sendData(){
var ailead_c = textsearch();
var url = "/web/upload/aile/pop.php?aile_t=" +ailead_c; 
window.open( url, "idcheck", "top=0, left=0, toolbar=no, menubar=no, scrollbars=yes, resizable=no, width=520, height=640" );

}

              </script></td>
              </tr>
            </table>
            </div>

상세 페이지에 이렇게 적용하고 팝업창으로 열릴 페이지를 php 로 만들었다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>000에 오신 것을 환영합니다.</title>
</head>

<!--

aile_t = unescape(params["aile_t"]);

// -->
</script>
<br />

//-->
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="center" valign="middle">
     <script>
aile_t = unescape(params["aile_t"]);
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="480">' +
'      <param name="movie" value="/web/upload/aile/main1.swf?itemimg_target='+aile_t,'">' +
'      <param name="quality" value="high">' +
'      <param name="wmode" value="transparent">' +
'      <embed src="/web/upload/aile/main1.swf" width="640" height="480" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>' +
'    </object>');
</script>
    </td>
</tr>
</table>

<br /><br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="center" valign="middle">
<script>
aile_t = unescape(params["aile_t"]);
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="480">' +
'      <param name="movie" value="/web/upload/aile/main2.swf?itemimg_target='+aile_t,'">' +
'      <param name="quality" value="high">' +
'      <param name="wmode" value="transparent">' +
'      <embed src="/web/upload/aile/main2.swf" width="640" height="480" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>' +
'    </object>');
</script>
    </td>
</tr>
</table>
<br />
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="center" valign="middle">
<script>
aile_t = unescape(params["aile_t"]);
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="480">' +
'      <param name="movie" value="/web/upload/aile/main3.swf?itemimg_target='+aile_t,'">' +
'      <param name="quality" value="high">' +
'      <param name="wmode" value="transparent">' +
'      <embed src="/web/upload/aile/main3.swf" width="640" height="480" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>' +
'    </object>');
</script>
    </td>
</tr>
</table>

<br />

</body>
</html>

이렇게 팝업창으로 만들었다 그리고 이미지를 보여줄 플래시 파일을 만들었다.
플래시에는 무비클립을 하나 말들고 무비클립 네임을 main 으로 지정 했다. 그리고 액션스크립트를
main.loadMovie("/web/product/big/"+itemimg_target+".jpg");
main.loadMovie("/web/product/extra/big/"+itemimg_target+"_1.jpg");
.
.
main.loadMovie("/web/product/extra/big/"+itemimg_target+"_4.jpg");
으로 총 5개의 플래시 파일을 만들었다.
첫번째 이미지와 추가 이미지의 경로가 다르기 때문에 주의 하여야 한다.

그리고 위 팝업창 소스에서 itemimg_target 이라는 변수명에 aile_t 가 적용되게 하였다..^^

이렇게 하니 고객이 원하는 부분으로 작업이 완료 되었다..^^

알고 나면 간단한 소스 하지만 카페24쇼핑모로 구조를 모른다면 한참 헤메게 된다..

필자도 아무것도 아닌 이걸 하면서 문제에 몽착해서 삽질을 한참 했다..^^

카페24쇼핑몰,메이크샵,고도몰 자동글쓰기 프로그램

카페24쇼핑몰 전용 자동 글쓰기 프로그램

이글에는 개 의 댓글이 있습니다. 댓글 확인 ▼

블로그투데이

블로그투데이

블로그투데이

cafe24 쇼핑몰 확대보기 수정

Comments

최신글

카테고리

티스토리툴바

cafe24 쇼핑몰 확대보기 수정

Comments

최신글

카테고리

태그 클라우드

티스토리툴바