Улучшение интерактивности
Стартовый код обеспечивает лишь минималистичный опыт взаимодействия. Есть несколько способов улучшить его:
- Добавьте индикатор, который отображает номер текущего слайда и общее количество слайдов.
- Когда пользователь выбирает другой цвет рубашки, поменяйте карусель изображений, чтобы показывать изображения рубашек выбранного цвета.
До появления компонента amp-bind реализовать такую функциональность было невозможно. Давайте получим практический опыт работы с amp-bind и добавим эти новые функции в наш образец кода.
Установите компонент amp-bind
amp-bind — это AMP-компонент, который позволяет создавать индивидуальные интерактивные возможности, используя JS-подобные выражения и привязки данных. Чтобы использовать amp-bind, следует установить его на странице.
Откройте файл static/index.html и добавьте в список AMP-компонентов в разделе <head> страницы следующий скрипт:
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
Добавьте индикатор слайдов
amp-bind работает путем привязки атрибутов элемента к пользовательским выражениям. Эти выражения могут ссылаться на «состояние» (изменяемые данные JSON). Мы можем инициализировать такое состояние через компонент <amp-state>, включенный в amp-bind.
Инициализируйте состояние слайда
Давайте инициализируем переменную состояния, которая будет отслеживать индекс текущего слайда в карусели изображений. Откройте static/index.html и добавьте в верхнюю часть раздела <body> (перед <header>) следующий код:
<amp-state id="selected">
<script type="application/json">
{
"slide": 0
}
</script>
</amp-state>
Доступ к данным, заключенным в элементы <amp-state>, можно осуществлять с помощью назначенного им идентификатора. Например, мы можем ссылаться на эту переменную с помощью следующего фрагмента выражения:
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... - Которое вызывает действие
AMP.setState... - Которое обновляет переменную состояния
selected.slide... - Которая обновляет привязку
[class]на элементах<span>в составе индикатора.
Отлично! Теперь у нас есть работающий индикатор слайдов.
Посмотрите, удастся ли вам добавить функциональность, чтобы, когда пользователь нажимает на индикаторную точку слайда, карусель изображений заполнялась выбранным элементом. В качестве подсказки: используйте событие tap и привязку [slide] на amp-carousel.
Измените изображения в карусели
Было бы удобно, если при изменении выбранного цвета мы могли бы видеть изображения рубашек соответствующих цветов. С помощью amp-bind мы можем сделать это, привязав [src] к элементам amp-img внутри amp-carousel.
Инициализируйте состояние 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> содержит объект JSON, который сопоставляет строку идентификатора рубашки (т. е. артикул) с цветом рубашки и URL-адресом ее изображения. Здесь также можно использовать массив JSON, но применение объекта позволит нам реализовать еще несколько интересных вещей, о которых мы скоро расскажем.
Теперь URL-адрес изображения доступен нам из идентификатора рубашки. Например, shirts['10014'].color выдает "dark green", а shirts['10030'].image возвращает URL-адрес изображения рубашки цвета "wine".
Отслеживайте выбранный вариант товара
Если мы добавим еще одну переменную состояния, которая отслеживает выбранный вариант товара, мы можем привязать к элементам amp-img выражение, обновляющее их атрибуты src при изменении выбранного варианта товара. Добавьте новый ключ sku в JSON существующего элемента amp-state#selected:
<amp-state id="selected">
<script type="application/json">
{
"slide": 0,
"sku": "1001"
}
</script>
</amp-state>
Обновите состояние варианта товара
Добавьте в элемент amp-selector действие «on», обновляющее переменную selected.sku при выборе нового цвета:
<amp-selector
name="color"
on="select:AMP.setState({selected: {sku: event.targetOption}})"
></amp-selector>
on="tap:AMP.setState(...) в каждый дочерний элемент amp-img компонента amp-selector. Одним из важных преимуществ 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. Это можно реализовать путем замены одного изображения массивом изображений. В данном уроке для упрощения процесса используется одно изображение с разной степенью увеличения. Попробуйте в действии: обновите страницу и выберите другой цвет рубашки. Когда вы сделаете это, в карусели отобразятся изображения с рубашками выбранного цвета.