상품의 개수가 10개 내외일 때는 상세페이지의 구성이 아래와 같았다.

 

회사로고

상품간략목록

상품1 상세설명

상품2 상세설명

.

.

.

상품 n 상세설명

 

 

 

하지만 상품 개수가 20개를 넘어가자 한 상품코드에 넣기에는 고객의 입장에서 위의 구성이 보기에 너무 불편해져버렸다. 나같아도 20개가 넘어가는 아래 상품을 보기 위해 스크롤바를 내리다보면 내리다가 뿔이 날 듯;

그렇다고 클릭하면 해당 상세 페이지 화면까지 단숨에 이동할 수 있는 책갈피와 링크 기능은 오픈마켓에서 허용이 안되고;; 결국 상품 이미지를 눌렀을때 팝업창으로 상세 설명이 뜨는 방식을 이용할 수 밖에 없었다.

 

하지만, 자바스크립트가 허용이 안되는 오픈마켓에서는 바로는 안되고 iframe을 이용하는 우회적인 방법밖에 없다.

그나마도 esm(옥션, 지마켓)에서는 html 문서나 이미지를 esm 무료 호스팅을 이용해야 iframe이 가능하다. 

다행히 나는 esm 무료 호스팅을 이용하므로 11번가와 옥션, 지마켓 모두에 iframe을 이용하여 팝업창을 띄우기로 결정~!!

 

 

esm 이미지 무료 호스팅에 알고 싶다면 아래글을 참조해보자.

무료 이미지 호스팅(옥션/지마켓/이베이)으로 상품 이미지 올리기 by Y

 

 

 

 

 

 

 

 

1. 팝업창 문서 만들기

 

팝업창은 상세이미지로만 만들어진 초간단 html 문서다.

팝업창은 상품 1개당 하나씩 만들어놓는다.

아래 문서의 이름은 can_fh03.html이다.

 

 

<title>~</title> - 팝업창 제목에 보여질 타이틀을 입력해준다.

src - 상세 이미지의 주소를 넣어준다.

onclick="window.close();" - 팝업창을 클릭하면 창이 자동으로 닫히도록 하는 스크립트다. 원하는 경우에만 넣어준다.

 

 

 

 

2. iframe 안에 포함될 문서 만들기

 

iframe이란 어떤 문서에 외부 문서를 보여주기 위해 사용되는 태그다.

일단 iframe에 넣을 문서는 포토샵에서 링크를 삽입할 부분을 잘 잘라낸뒤 [Save for Web & Devices] 기능으로 html 문서와 jpg 이미지로 저장하는 방법으로 1차 html 문서를 만든다. 그리고 아래와 같이 각 이미지 주소를 esm 이미지 호스팅 주로로 바꿔주고, 팝업창을 링크해주면 된다. 아래 문서는 c.html로 저장했다.

 

 

 

 

 

링크 부분은 아래와 같다.

 

<a href="#" onClick="window.open('http://gi.esmplus.com/아이디/문서명.html','팝업창이름', 'left='+(screen.availWidth-660)/2+',top='+(screen.availHeight-430)/2+', width=850, height=900, location=no, fullscreen=no, scrollbars=yes, menubar=no, status=no, toolbar=no, resizable=no');return false" onfocus="this.blur()">

 

주소 - 1번 단계에서 만든 팝업창 주소를 넣어준다.

팝업창이름 - 영문으로 아무렇게나 지어준다.

'left='+(screen.availWidth-660)/2+',top='+(screen.availHeight-430)/2+' - 팝업창을 모니터의 가로/세로 가운데에 위치하기 위한 부분으로 모니터 크기에 상관없이 적용되므로 매우 유용하다.

width, height - 팝업창의 가로/세로 크기를 픽셀 단위로 입력해준다.

location - 팝업창에 주소표시줄을 표시하거나(yes), 표시하지 않는(no) 속성이지만 익스플로러 버전과 사용자의 인터넷 옵션에 따라 주소표시줄이 보일수도 안보일수도 있다.

fullscreen - 팝업창을 전체창으로 확대하는 것을 허용할 것인지 아닌지 설정한다.

scrollbars - 팝업창 오른쪽에 스크롤바를 넣거나 안넣을 수 있다. 상세 이미지는 거의 길이가 긴 편이므로 yes를 설정하는 경우가 많다.

menubar - 팝업창에 [파일], [편집] 등의 메뉴표시줄을 표시하거나 숨길 수 있다.

status - 팝업창 하단에 상태표시줄을 표시하거나 숨길 수 있다.

toolbar - 팝업창에 도구상자를 표시하거나 숨길 수 있다.

resizable - 사용자가 팝업창의 크기를 조절할 수 있도록 설정하거나 고정시킬 수 있다.

onfocus="this.blur()" - 이미지에 링크가 걸렸을 경우 생기는 테두리를 없애기 위한 스크립트다.

 

참고로 팝업창은 심플할수록 깔끔해지므로 scrollbars 속성을 제외한 나머지는 no로 설정하는 경우가 많다.

 

 

 

 

3. 상세페이지에 iframe 태그 넣기

 

마지막으로 오픈마켓의 상세페이지 태그 입력하는 부분에 아래와 같이 iframe 태그를 넣어준다.

iframe 안에서 보여질 문서는 위에서 작성한 문서 c.html이다.

 

 

 

 

iframe 태그는 아래와 같다.

 

<iframe src="http://gi.esmplus.com/아이디/문서명.html" width=850 height=2742 frameborder=0 marginheight=0 marginwidth=0 scrolling=no></iframe>

 

src - 이미지와 링크를 포함하는 문서의 주소를 넣어준다.

width, height - 문서가 보여질 가로/세로 공간 크기를 픽셀 단위로 넣어준다.

frameborder - 프레임의 테두리인데 0으로 하면 깔끔하게 표시된다.

marginheight, marginwidth - 프레임 상하/좌우의 여백인데 역시 0으로 지정해준다.

scrolling - 프레임의 오른쪽에 표시되는 스크롤바인데 역시 표시하지 않는다.

 

 

 

 

---------------------------------------------------------------------------------------------------------------------------

 

위의 1, 2번 문서를 한번만 만들어놓으면, 모든 오픈마켓에 3번처럼 iframe 태그만 입력해도 모두 적용된다.

물론 상품코드는 한개가 아닌 수십개라면 시간이 좀 걸리겠지만 말이다.

 

 

 

 

 

 
 
 
 

Posted by 두여자 Y&S
TAG    

댓글을 달아 주세요

  1. 팝업창 띄우기 연습하는 내용 포스팅으로 내용 참조하였습니다. 글 잘 읽고 갑니다 ㅎ

    2016.11.15 12:18 [ ADDR : EDIT/ DEL : REPLY ]
    • 아..이 글을 보시는분이 있나 했는데 있으셨군요 ㅎㅎㅎ
      근데 이걸로는 11번가는 해결이 안된답니다.

      2018.07.04 23:19 신고 [ ADDR : EDIT/ DEL ]