[ 23 ENGINE ] 팝업창 관리 / 수정하기

우선 팝업창은 두가지 장소에서 관리됩니다.

스마트디자인 수정창과 c스토어 배너관리v2에서 확인이 가능합니다.

기본적으로는 아래의 c스토어에서 수정이 가능합니다.

팝업창의 수는 20개까지 가능하지만,

사이즈를 벗어날 수 있으므로, 가급적 팝업 사이즈에 맞게 수를 제한하시길 바랍니다.

팝업창이 뜨는 위치도 수정할 수 있는데요, 이 부분은 스마트디자인편집창에서 수정이 가능합니다.

각각의 attribute 설정을 통해서 사이즈 및 뜨는 위치를 수정할 수 있습니다.

아래는 각 항목에 따른 설정에 대한 설명입니다.

floating // 팝업을 수행 

data-cookie="uniqueCookieName2"  // 팝업의 고유값을 지정, 하루 열지 않기의 key가 됩니다.

data-wait="3000" // 화면이 준비되고 몇초후에 나올지 결정 ( 밀리세컨드 / 이 설정이면 3초후에 팝업창이 나옵니다. )

data-speed="600" // 나올때 얼마만큼의 속도로 나올지 결정 ( 밀리세컨드 / 이 설정이면 0.6초 )

data-width="300" // 팝업창의 가로 사이즈

data-height="300" // 팝업창의 세로 사이즈

data-top="" // 화면 위쪽으로 얼마나 떨어트릴 것인지 결정 ( 빈값이면 auto로 인식 )

data-left="550" // 화면 좌측에서 얼마나 띄울지 결정

data-bottom="30" // 화면 하단에서 얼마나 띄울지 결정

data-right="" // 화면 우측에서 얼마나 띄울지 결정

data-url="/_sp/apps/addon/floating/floating_2.html" // 실제로 팝업창 디자인이 연결되어 있는 주소 ( 개발자분들은 이 주소로 접속해서 커스텀 하세요 )

이정도로 정리가 가능하며,

<!--플로팅 쿠키배너 1-->

<!--@css(/_sp/apps/addon/floating/floating.css)-->

<!--@js(/_sp/apps/addon/floating/floating.js)-->

<div module="bannermanage2_display_18" floating data-cookie="uniqueCookieName1" data-wait="2000" data-speed="600" data-width="500" data-height="400" data-top="" data-left="30" data-bottom="30" data-right="" data-url="/_sp/apps/addon/floating/floating.html"><div class="sp-floating-open" data-cookie="uniqueCookieName1"><button>팝업<br>보기</button></div>

<a href="{$href}" {$target} class="displaynone">{$banner}</a>

<a href="{$href}" {$target} class="displaynone">{$banner}</a>

</div>

<!--플로팅 쿠키배너 2-->

<!--@css(/_sp/apps/addon/floating/floating.css)-->

<!--@js(/_sp/apps/addon/floating/floating.js)-->

<div module="bannermanage2_display_19" floating data-cookie="uniqueCookieName2" data-wait="3000" data-speed="600" data-width="300" data-height="300" data-top="" data-left="550" data-bottom="30" data-right="" data-url="/_sp/apps/addon/floating/floating_2.html"><div class="sp-floating-open" data-cookie="uniqueCookieName2"><button>새소식</button></div>

<a href="{$href}" {$target} class="displaynone">{$banner}</a>

<a href="{$href}" {$target} class="displaynone">{$banner}</a>

</div>

이렇게 두개의 팝업이 시간 편차를 두고 열리는것을 코드상으로 확인이 가능합니다.

만약 팝업을 사용하지 않으시려면 아래의 설정을 확인하세요.