Aurora Modules
복잡한 비즈니스 로직은 NHN커머스 모듈에 맡기세요!
NHN커머스에서 제공하는 공식 모듈을 활용하여
UI 개발에 집중해서 쉽고 빠르게 스킨을 제작할 수 있습니다.
설치하기
shopby-skin.js를 사용하시면 ShopbySkin에서 전역으로 제공하는 다양한 유틸, 핸들바 커스텀 헬퍼 함수 사용과 손쉬운 API 호출이 가능합니다.
<script src="https://shopby-skin.cdn-nhncommerce.com/{버전}/shopby-skin.js" crossorigin="anonymous"></script>기술스펙
ShopbySkin은 코드의 재사용성과 사용자의 쉬운 커스텀을 고려하여 Web Components와 HandlebarsJS 기술 스펙을 사용합니다.
Web Components의 뛰어난 재사용성, 모듈화에 장점과 HandlebarsJS의 간결하고 직관적인 문법을 경험하실 수 있습니다.Web Components 사용해보기
아래 예시 코드와 같이 ShopbySkin에서 제공하는 모듈을 쉽게 재사용할 수 있습니다.
제공되는 모듈을 더 알아보고 싶다면 모듈 가이드 문서에서 확인하실 수 있습니다.
<!-- 첫번째 상품 목록 -->
<product-list-items>
<!-- handlebars template 스크립트 태그 추가 -->
<script type="text/x-handlebars-template">
<section>
{{#each items}}
...
{{/each}}
</section>
</script>
</product-list-items>
<!-- 두번째 상품 목록 -->
<product-list-items>
<!-- handlebars template 스크립트 태그 추가 -->
<script type="text/x-handlebars-template">
<section>
{{#each items}}
...
{{/each}}
</section>
</script>
</product-list-items>
Handlebars 사용해보기
핸들바에서 제공하는 API를 사용하는 템플릿이 정상적으로 렌더링되기 위해서는 <script type="text/x-handlebars-template"></script> 태그를 추가해야합니다.
HandlebarsJS를 더 알아보고 싶다면 HandlebarsJS 공식 가이드 문서에서 확인하실 수 있습니다.
오로라 커스텀 핸들바 가이드는 여기에서 확인하실 수 있습니다.
<product-list-items>
<!-- handlebars template 스크립트 태그 추가 -->
<script type="text/x-handlebars-template">
<section>
{{#each items}}
{{#if isSoldOut}}
<div >SOLD OUT</div >
{{/if}}
...
{{/each}}
</section>
</script>
</product-list-items>
Utils 등록하기
핸들바에 utils 를 등록해서 사용할 수 있습니다. aurora modules 에서 등록한 유틸과 함께 사용하는 경우 ShopbySkin 에서 제공하는 Handlebars 에 유틸을 추가 등록해서 사용하시면 됩니다. ShopbySkin 글로벌객체는 DOMContentLoaded 시점에 제공됩니다. 따라서 등록한 utils 스크립트는 body 태그 내 하단에 삽입해야합니다.
pc 혹은 mobile 디렉토리 하위에 utils 디렉토리를 생성하고 handlebars.js 파일을 생성합니다.
<!-- PC 디렉토리 구조 -->
pc
ㄴutils
ㄴhandlebars.js
<!-- 모바일 디렉토리 구조 -->
mo
ㄴutils
ㄴhandlebars.js
handlebars.js 에 ShopbySkin.Handlebars.registerHelper 를 호출해 필요한 유틸을 등록합니다.
// /utils/handlebars.js
(() => {
const { Handlebars } = ShopbySkin;
Handlebars.registerHelper({
example(x, y, options) {
return x > y ? options.fn(this) : options.inverse(this);
},
});
})();
사용할 html 파일에 handlebars.js 파일을 로드합니다.
<!-- /pages/order/cart.html -->
<body>
...
<cart-products>
<script type="text/x-handlebars-template">
<div>
<p>1 > 2 {{#example 1 2}}참{{else}}거짓{{/example}}</p>
</div>
</script>
</cart-products>
...
<script src="/utils/handlebars.js"></script>
</body>
jQuery 사용하기
<!-- /pages/**/*.html -->
<script src="https://code.jquery.com/jquery-latest.min.js" crossorigin="anonymous"></script>