<data> 태그

<!-- <data> 태그를 활용해서 블록 밖의 데이터를 요청 -->
<data value="$page" />
<data value="$cart" />
<data value="$customer"/>

<style>
...
</style>

<template>

	{{#if (eq page.name "HOME")}}
	<h1>방문을 환영합니다!</h1>
	{{/if}}

	{{#if customer}}
	<h2>안녕하세요 {{customer.name.full}}님!</h2>
	{{else}}
	<h2>안녕하세요 방문자님!</h2>
	{{/if}}

	<p>장바구니에 {{cart.count}}개의 상품을 담으셨어요.</p>

	{{#if customer}}
	<button>로그아웃</button>
	{{/if}}

</template>

<script>

	const container = bm.container;
	const context = bm.context;

	bm.onContextChange = () => {
		// <data> 태그를 통해 가져온 데이터나 상태가 바뀌면 실행돼요.
		console.log(context.page);
		console.log(context.customer);
		console.log(context.cart);
	};

	function clicked(e) {

		e.preventDefault();

		if (e.target.matches('button')) {
			// 팁: 로그아웃 버튼을 누르면 로그아웃 처리!
			bm.do('logout');
		}
	}

	container.addEventListener('click', clicked, true);

</script>

<data> 태그를 통해 고객(Customer) 및 장바구니(Cart) 정보를 활용하는 예시

• <data> 태그는 사이트에서 자동으로 제공되는 값을 블록에서 사용할 수 있게 해줘요.
• <data> 태그는 <style>, <template> 및 <script> 태그와 다르게 꼭 블록에 선언될 필요는 없어요.
  • 블록에서 필요한 데이터를 가져오는 경우에 <data> 태그를 선언해서 사용할 수 있어요.
• <data> 태그의 value 속성에 사용할 수 있는 값은 지원 값 목록을 참고해 주세요.
• <data> 태그로 선언된 값들은 컨텍스트(Context)에서 접근할 수 있어요.

ℹ️ 특정 데이터는 상태가 바뀌면 자동으로 반영돼요!

• 페이지가 이동되면 page 값이 바뀌어요.
• 고객이 로그인하거나 로그아웃하면 customer 값이 바뀌어요.
• 장바구니에 상품을 담거나 빼면 cart 값이 바뀌어요.
• 이런 변화가 생기면 context 값도 자동으로 바뀌고, bm.onContextChange 함수가 실행돼요.