핫딜 타임세일 이벤트_추석이벤트 만들기

 

안녕하세요.

행운공장 입니다.

 

이번 포스팅은 별도의 코딩수정이 가능한 쇼핑몰 솔루션에서, 타임세일 이벤트 페이지 만들기에 대한 내용입니다.

 

2개월전 즈음에 코딩카테고리에 올렸었던, 타임세일js 포스팅 내용의 첨부파일 타임세일 코딩내용을 참고하고 있습니다. 내용이 궁금하신 분들은 아래의 링크를 클릭해서 확인해 보세요.

타임세일js ▶

 

쇼핑몰에서 이벤트를 진행할때, 매출향상에 가장 도움이 되는 이벤트는 세일이벤트입니다. 그중에서도 세일마감기간이 표기되어져 보여지는 타임세일이 가장 효과가 있습니다. 그런데, 쇼핑몰솔루션에 타임세일을 원하는 스타일대로, 표현하는것은 쉽지가 않습니다. 그래서, 최대한 관리자가 표현할 수 있도록 한번 만들어 보았습니다. 완벽하지는 않겠지만, 그래도 필요하신 분들은 꼼꼼하게 읽어보시고, 꼭 사용해 보세요.

 

이벤트 내용에 따라 진행방법은 달라지겠지만, 타일세일 기간이 보여지는 부분은 별도의 새페이지에 만들어진 코딩을 아이프레임을로 불러와서 표현해야하는것은 동일합니다. 필자의 방법이외에 다른 방법이 있다면, 그 방법을 사용해도 됩니다.

 

 

 

 

가상의 행운공장 쇼핑몰의 타임세일 이벤트 진행방식은 전상품 세일쿠폰을 다운로드해서 사용하는 핫딜세일입니다. 아래의 진행방법을 보시고, 필요한 부분을 응용해보세요. 필자는 카페24방식으로 설명하겠지만, 쇼핑몰솔루션은 비슷한 방식이니, 활용하는데에는 크게 문제 없을 것으로 생각됩니다. pc버전 위주의 코딩이며, 모바일버전을 고려해서 크기별로 조정되는 코드를 별도로 추가수정해 주면 됩니다.

 

 

1. 디자인관리에서 쇼핑몰페이지를 수정할 수 있는 곳에서, 원하는 카테고리에 아무것도 없는 새페이지를 만듭니다. 새페이지에는 header와 footer의 연결되는 코드도 없는 완전한 새페이지여야 합니다.( 예시 파일이름 : sale.html )

 

2. 새페이지에 아래의 예시화면처럼, 상단에 타일세일임을 강조하는 코드를 넣고, 하단에는 이벤트 내용을 자세하게 표현하면 됩니다.

 

3. 바로 위의 예시화면 파일입니다. 필요하신 분들은 다운로드해서 활용해보세요. 타임세일코드 있습니다.

timesale2.html

0.00MB

 

4. 위와 같이 이벤트페이지를 별도로 완성하였다면, 이벤트게시판에 아이프레임으로 파일경로를 넣으면 됩니다.(만들어진 새파일에서 바로 오른쪽버튼 클릭하면, 경로 복사 나옵니다.) 게시판에 바로 이벤트 페이지를 표현하지 못하는 이유는 js와 css가 제대로 표현되지 못하기 때문입니다. 카페24 내부 코드와 충돌하여, 수정하려고 할때 코드들이 없어지거나, 표현이 제대로 안되거나 합니다.

 

5. 아이프레임 코드는 아래와 같습니다. 참고하세요.

<iframe src="https://tistory1.daumcdn.net/tistory/3891244/skin/images/timesale2.html" width="100%" height="1140px" frameborder="1" scrolling="no"></iframe>

 

 

 

 

6. 쇼핑몰 인덱스화면에도 이런방식으로, 새파일과 아이프레임을 활용해서 얼마든지 다양하게 타임세일을 표현할 수 있습니다.

 

7. 주의할점은 새페이지의 이벤트 링크를 넣을때 타겟을 _blank로 해서, 새창으로 보여지게 하세요. 만약에 최종적인 쿠폰링크를 클릭시에 별다른 이상이 없다면, 그냥 a태그만 넣으셔도 됩니다.

<a href="https://hhwd.tistory.com/" target="_blank">행운월드로 이동하기</a>

 

도움이 되었는지 모르겠네요. 궁금하거나 안되는 것이 있다면 댓글에 남겨주세요.