DemoSite에서 제공하는 랜딩 페이지의 중앙에는 마케팅 제품 한개만을 디스플레이한다. 이를 여러개의 마케팅 제품을 Carousel로 변경하는 작업을 해본다.
Carousel HTML 추가
- 원래 화면으로 SHIRT SPECIAL 이미지가 고정이다.
- 변경된 화면으로 Carousel을 적용한다.
+ Twitter Bootstrap의 carousel을 적용
+ 기존 제품을 두번째에 배치
- HTML에서 메인 마케팅 제품의 <blc> 태그 내역음 하기와 같다
+ <blc:content> 태그의 contentType="Homepage Banner Ad"의 값이 키가 되어 content의 데이터를 MySQL에서 찾음
+ 반환값인 contentItem 객체를 통해 Thymeleaf 템플릿엔진은 HTML을 생성해줌
+ Twitter Bootstrap의 carousel을 추가하고 첫번째에 배너를 넣고 다음 아이템(보라색) 두번째에 틀린 배너를 넣음
contentType인 Homepage Banner Ad2 라는 이름임
// 원본 소스
<nav th:substituteby="layout/partials/nav" />
<blc:content contentType="Homepage Banner Ad" />
<div id="banners" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}">
<a th:href="@{${contentItem['targetUrl']}}"><img blc:src="@{${contentItem['imageUrl']}}" /></a>
</div>
// 수정 소스
<div th:include="layout/partials/nav" />
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<blc:content contentType="Homepage Banner Ad" />
<div class="fill" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}" >
<a th:href="@{${contentItem['targetUrl']}}"><img style="height:100%; width:100%" blc:src="@{${contentItem['imageUrl']}}" /></a>
</div>
<div class="carousel-caption">
<h1></h1>
</div>
</div>
<div class="item">
<blc:content contentType="Homepage Banner Ad2" />
<div class="fill" th:if="${contentItem !=null and contentItem['targetUrl'] != null and contentItem['imageUrl'] != null}" >
<a th:href="@{${contentItem['targetUrl']}}"><img style="height:100%; width:100%" blc:src="@{${contentItem['imageUrl']}}" /></a>
</div>
<div class="carousel-caption">
<h1>This is Homepage Banner Ad2 Test</h1>
</div>
</div>
<div class="item">
<div class="fill" style=""></div>
<div class="carousel-caption">
<h1>Additional Layout Options at <a href="http://startbootstrap.com">http://startbootstrap.com</a>
</h1>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
- Carousel을 구동하는 자바스크립트를 추가함
+ WEB-INF/templates/layout/partials/footer.html안에 main.js를 추가함. 메인 페이지 하단에 자바스크립트를 추가해줌
+ webapp/js 폴더 밑에 main.js 를 추가하고 carousel 자바스크립트를 초기화하고 화면간 이동시간을 설정함
// footer.html
<blc:bundle name="heatclinic.js"
mapping-prefix="/js/"
files="main.js,
BLC.js,
heatClinic.js,
cartOperations.js,
checkoutOperations.js,
globalOnReady.js,
manageAccountOperations.js,
reviewOperations.js" />
// js/main.js
$('.carousel').carousel({
interval: 3000
})
Homepage Banner Ad2 추가하기
- Homepage Banner Ad가 추가된 위치를 Admin에서 화인할 수 있다.
+ DemoSite에 보면 admin sub-module이 있고 Ant를 통해서 실행할 수 있다.
+ http://localhost:8081/admin 으로 접속해서 id:admin, pwd:admin으로 접속한다.
+ 관리페이지의 Content -> Content Items를 보면 아이템 목록이 나오고 "Content Type"이 Homepage Banner Ad가 언어별로 등록됨
+ 즉, <blc:content> 태그의 contentType이 데이터 조회를 위한 파라미터 키이고 Homepage Banner Ad가 값임.
- 최초에 DemoSite를 수행할 때 src/main/resources/runtime-properties/development.properties는 하기와 같다
+ create-drop 설정은 DemoSite 서버(jetty)를 기동할 때 기존 테이블을 전부 drop 하고 새롭게 생성하고 데이터를 넣어줌
+ 한번 생성된 이후 다시 drop하지 않고 DemoSite를 기동하고 싶으면 update로 변경함
// 기존 설정
blPU.hibernate.hbm2ddl.auto=create-drop
// 변경 설정
blPU.hibernate.hbm2ddl.auto=update
- 결국 DemoSite 기동할 때 insert 구문을 통해 Homepage Banner Ad를 넣고 있으므로 Homepage Banner Ad2 값을 넣을 수 있음
+ sql 파일은 core sub-module의 src/main/resrouces/sql밑에 존재함
+ 관련 sql은 load_content_structure.sql 과 load_content_data.sql 이다
+ content_structure는 원화 기준, 언어 기준, 화면 템플릿의 논리적 그룹핑 명칭 등록 및 4단계를 거쳐 structure를 만들어준다
// load_content_structure.sql 안에 보라색 내역 Homepage Banner Ad2를 추가함
---------------------------------------------------------------------------------------------------------------------------
-- Structured Content Step 4: Create Types (These represent areas on a page or general types: e.g 'Homepage Banner Ad')
---------------------------------------------------------------------------------------------------------------------------
INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (1, 'Homepage Banner Ad', NULL, 1);
INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (2, 'Homepage Middle Promo Snippet', NULL, 2);
INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (3, 'Homepage Featured Products Title', NULL, 3);
INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (4, 'Right Hand Side Banner Ad', NULL, 1);
-- by ysyun
INSERT INTO BLC_SC_TYPE (SC_TYPE_ID, NAME, DESCRIPTION, SC_FLD_TMPLT_ID) VALUES (5, 'Homepage Banner Ad2', NULL, 1);
+ content_data는 컨텐트의 url, image 등의 세부 내역이 담겨져 있다.
+ 원본은 3개의 Banner가 우선순위가 있게 등록되어 있는데 Homepage Banner Ad2를 새로운 배너 우선순위 1로 해서 등록한다.
+ 기존 베너에 있던 Buy One Get One을 Homepage Banner Ad2에 배정한다.
+ 세번째 Carousel을 등록하고 싶다면 Homepage Banner Ad3를 structure에 등록해서 하기 과정에 sql을 추가하면 끝!
+ 이미지는 webapp/img/banners 폴더에 존재함
// load_content_data.sql 에서 보라색 부분을 추가한다.
---------------------------------------------------
-- HOME PAGE BANNER
---------------------------------------------------
-- Content Item
INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (100, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Buy One Get One - Twice the Burn', FALSE, 5, 'en', 1);
INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (101, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Shirt Special - 20% off all shirts', FALSE, 1, 'en', 1);
INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (102, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Member Special - $10 off next order over $50', FALSE, 5, 'en', 1);
-- by ysyun
INSERT INTO BLC_SC (SC_ID, CREATED_BY, DATE_CREATED, DATE_UPDATED, UPDATED_BY, CONTENT_NAME, OFFLINE_FLAG, PRIORITY, LOCALE_CODE, SC_TYPE_ID) VALUES (103, 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 1, 'Buy One Get One - Twice the Burn', FALSE, 1, 'en', 5);
-- Fields
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (1, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/buy-one-get-one-home-banner.jpg');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (2, CURRENT_TIMESTAMP, 'targetUrl', 1, '/hot-sauces');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (3, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/shirt-special.jpg');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (4, CURRENT_TIMESTAMP, 'targetUrl', 1, '/merchandise');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (5, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/member-special.jpg');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (6, CURRENT_TIMESTAMP, 'targetUrl', 1, '/register');
-- by ysyun
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (7, CURRENT_TIMESTAMP, 'imageUrl', 1, '/img/banners/buy-one-get-one-home-banner.jpg');
INSERT INTO BLC_SC_FLD (SC_FLD_ID, DATE_CREATED, FLD_KEY, CREATED_BY, VALUE) VALUES (8, CURRENT_TIMESTAMP, 'targetUrl', 1, '/hot-sauces');
-- Field XREF
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (100, 1, 'imageUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (100, 2, 'targetUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (101, 3, 'imageUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (101, 4, 'targetUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (102, 5, 'imageUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (102, 6, 'targetUrl');
-- by ysyun
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (103, 7, 'imageUrl');
INSERT INTO BLC_SC_FLD_MAP (SC_ID, SC_FLD_ID, MAP_KEY) VALUES (103, 8, 'targetUrl');
- sql 추가하고 create-drop으로 놓은 다음 DemoSite를 제구동하면 Admin에서 하기와 같이 나온다.
베너를 Carousel로 변환하여 볼 수 있을 것이다. 다음은 2 level Menu로 변경하는 과정을 살펴보자.
참조
'Study Frameworks > BroadLeaf eCommerce' 카테고리의 다른 글
| [BroadLeaf] Product 화면 RWD 적용하기 - 4 (0) | 2014.12.15 |
|---|---|
| [BroadLeaf] Twitter Bootstrap 적용하기 - 2 (0) | 2014.12.03 |
| [BroadLeaf] eCommerce 시작하기 - 1 (0) | 2014.12.03 |
