Improving the interactivity
시작 코드는 매우 기본적인 사용자 환경을 제공합니다. 몇 가지 방법을 통해 사용자 환경을 개선할 수 있습니다.
- 현재 슬라이드 및 슬라이드의 총 개수를 표시하는 표시기를 추가합니다.
- 사용자가 다른 셔츠 색상을 선택하면 이미지 캐러셀을 변경하여 선택된 색상의 셔츠 이미지를 표시합니다.
amp-bind 컴포넌트가 도입되기 전에는 이와 같은 기능을 추가할 수 없었습니다. amp-bind를 직접 경험하고 신규 기능을 샘플 코드에 추가해 보겠습니다!
amp-bind 컴포넌트 설치
amp-bind는 AMP 데이터 바인딩과 JS와 유사한 표현식을 통해 사용자 지정의 상호작용을 제공하는 컴포넌트입니다. amp-bind를 사용하려면 페이지에 설치해야 합니다.
static/index.html 파일을 열고 다음 스크립트를 페이지 <head> 섹션의 AMP 컴포넌트 목록에 추가합니다.
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
슬라이드 표시기 추가
amp-bind는 요소 속성을 사용자 지정 표현식에 바인딩하여 작동합니다. 이 표현식은 "상태"(변경 가능한 JSON 데이터)를 참조할 수 있습니다. 이 상태는 amp-bind에 포함된 <amp-state> 컴포넌트를 통해 초기화할 수 있습니다.
슬라이드 상태 초기화
이제 상태 변수를 초기화하여 이미지 캐러셀에 현재 표시된 슬라이드의 색인을 추적해 보겠습니다. static/index.html을 열고 페이지 <body> 상단(<header> 이전)에 다음을 추가하세요.
<amp-state id="selected">
<script type="application/json">
{
"slide": 0
}
</script>
</amp-state>
<amp-state> 요소 내의 데이터는 연결된 ID로 액세스할 수 있습니다. 예를 들어 다음 표현식 조각으로 해당 변수를 참조할 수 있습니다.
selected.slide; // Evaluates to 0.
슬라이드 상태 업데이트
다음으로 사용자가 캐러셀의 슬라이드를 변경하는 경우 기존 amp-carousel 요소에 다음의 "on" 작업을 추가하여 이 변수를 업데이트해 보겠습니다.
<amp-carousel
type="slides"
layout="fixed-height"
height="250"
id="carousel"
on="slideChange:AMP.setState({selected: {slide: event.index}})"
></amp-carousel>
이제 표시된 amp-carousel 슬라이드가 변경될 때마다 AMP.setState 작업은 다음 인수를 사용하여 호출됩니다.
{
selected: {
slide: event.index;
}
}
event.index 표현식은 새 슬라이드 색인을 평가하고 AMP.setState() 작업으로 이 객체 리터럴이 현재 상태로 병합됩니다. 이렇게 하면 selected.slide의 현재 값이 event.index 값으로 대체됩니다.
AMP.setState()는 중첩된 객체 리터럴을 완전히 병합합니다. 자세한 내용은 amp-bind 문서를 참조하세요. 표시기 요소 바인딩
다음으로 현재 표시된 슬라이드를 추적하는 이 상태 변수를 활용하여 슬라이드 표시기를 만들어 보겠습니다. 슬라이드 표시기 요소를 찾고(<!-- TODO: "Add a slide indicator" -->) 다음 바인딩을 하위 요소에 추가합니다.
<!-- TODO: "Add a slide indicator" -->
<p class="dots">
<!-- The <span> element corresponding to the current displayed slide
will have the 'current' CSS class. -->
<span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
<span [class]="selected.slide == 1 ? 'current' : ''"></span>
<span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>
[class]는 class 속성을 변경하는 바인딩이며 이를 사용하여 모든 요소에 CSS 클래스를 추가하거나 삭제할 수 있습니다.
직접 해보기: 페이지를 새로고침하고 슬라이드를 변경해 보세요.
캐러셀의 슬라이드를 변경하면 다음과 같은 작업이 실행됩니다.
slideChange event를 트리거하며 ...AMP.setState작업이 호출되고 ...- 상태 변수
selected.slide가 업데이트되고 ... - 표시기
<span>요소의[class]바인딩이 업데이트됩니다.
좋습니다! 이제 슬라이드 표시기가 작동합니다.
기능을 추가하여 사용자가 슬라이드의 표시기 점을 탭하면 선택된 항목으로 이미지 캐러셀을 업데이트할 수 있는지 확인합니다. 참고로 amp-carousel에서 tap 이벤트와 [slide] 바인딩을 사용합니다.
캐러셀의 이미지 변경
선택된 색상을 변경할 때 다른 셔츠 색상의 이미지가 표시되면 좋습니다. amp-bind를 사용하여 amp-carousel 내에서 [src]를 amp-img 요소에 바인딩하면 가능합니다.
SKU 상태 초기화
먼저 각 색상 셔츠의 이미지 소스 URL로 상태 데이터를 초기화해야 합니다. 새 <amp-state> 요소로 이 작업을 실행해 보겠습니다.
<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
<script type="application/json">
{
"1001": {
"color": "black",
"image": "./shirts/black.jpg"
},
"1002": {
"color": "blue",
"image": "./shirts/blue.jpg"
},
"1010": {
"color": "brown",
"image": "./shirts/brown.jpg"
},
"1014": {
"color": "dark green",
"image": "./shirts/dark-green.jpg"
},
"1015": {
"color": "gray",
"image": "./shirts/gray.jpg"
},
"1016": {
"color": "light gray",
"image": "./shirts/light-gray.jpg"
},
"1021": {
"color": "navy",
"image": "./shirts/navy.jpg"
},
"1030": {
"color": "wine",
"image": "./shirts/wine.jpg"
}
}
</script>
</amp-state>
<amp-state>요소에는 셔츠 식별자 문자열(예: SKU)을 해당 셔츠의 색상 및 이미지 URL에 매핑하는 JSON 객체가 포함되어 있습니다. JSON 배열은 여기에서도 작동하지만 객체를 사용하면 다른 멋진 작업을 할 수 있습니다. 이러한 작업은 곧 제공될 예정입니다.
이제 셔츠의 식별자를 통해 이미지 URL에 액세스할 수 있습니다. 예를 들어 shirts['10014'].color는 "dark green"을 평가하고 shirts['10030'].image는 "wine" 셔츠 색상의 이미지 URL을 반환합니다.
선택된 SKU 추적
선택된 SKU를 추적하는 다른 상태 변수를 추가하면 표현식을 amp-img 요소에 바인딩하고 선택된 SKU가 변경될 경우 src 속성을 업데이트할 수 있습니다. 새 sku 키를 기존 amp-state#selected 요소의 JSON에 추가합니다.
<amp-state id="selected">
<script type="application/json">
{
"slide": 0,
"sku": "1001"
}
</script>
</amp-state>
SKU 상태 업데이트
새 색상이 선택될 때마다 selected.sku 변수를 업데이트하는 amp-selector에 "on" 작업을 추가합니다.
<amp-selector
name="color"
on="select:AMP.setState({selected: {sku: event.targetOption}})"
></amp-selector>
on="tap:AMP.setState(...) 작업을 amp-selector 내의 각 amp-img 하위 요소에 추가함으로써 실행할 수도 있습니다. amp-selector의 장점 중 하나는 이러한 방식으로 마크업을 단순화한다는 것입니다. 이미지 요소 바인딩
다음으로 amp-img 요소에 바인딩을 추가합니다.
<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img
width="200"
height="250"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
<amp-img
width="300"
height="375"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
<amp-img
width="400"
height="500"
src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"
></amp-img>
src가 있을 가능성이 높습니다. 이는 하나의 이미지를 이미지 배열로 대체함으로써 실행할 수 있습니다. 간단한 설명을 위해 이 튜토리얼에서는 하나의 이미지를 다양한 배율로 사용합니다. 직접 해보기: 페이지를 새로고침하고 다른 색상의 셔츠를 선택하세요. 다른 색상을 선택하면 캐러셀의 이미지가 업데이트되어 선택한 색상의 셔츠가 표시됩니다.