Notes by tag: AMP

Если вам нужно показать много товарных карточек или, например, товар с нескольких ракурсов прямо в письме, то интерактивные AMP-карусели — отличный инструмент.

Базовый пример AMP-карусели:

<amp-carousel width="450" height="300" layout="responsive" type="slides" role="region" aria-label="Basic carousel">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300"></amp-img>
  </amp-carousel>

Но есть нюанс: в Gmail на iOS при клике на стрелку карусели письмо может резко прокручиваться вверх.

Что предпринять: заменить amp-carousel на использование amp-bind. То есть вместо стандартной карусели используем отслеживание состояний и меняем изображения с помощью amp-bind. Такой подход работает стабильно на всех платформах.

Пример реализации:

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>
<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>
<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>

Отображение AMP-писем в тёмной теме отличается в зависимости от почтового клиента. Рассмотрим особенности работы тёмной темы в популярных почтовых сервисах:

➖ Mail.ru AMP-письма не перекрашивает. При этом позволяет полностью кастомизировать отображение. Для этого в head нужно добавить:

<meta name="supported-color-schemes" content="light dark">

В style используем префиксы для селекторов:
:root[data-ogsc] для тёмной темы и :root:not([data-ogsc]) - для светлой.

➖ Gmail на Android при включённой тёмной теме автоматически перекрашивает светлые AMP-письма в тёмные. Это означает, что изначально светлое AMP-письмо станет тёмным, а тёмное останется без изменений.

➖ Gmail на iOS AMP-письма не перекрашивает. Но и кастомизировать отображение в зависимости от темы не позволяет.

➖ Yahoo ведёт себя аналогично Gmail. В приложении на Android перекрашивает светлые AMP-письма в тёмные. А в приложении на iOS — не перекрашивает AMP-письма, оставляя оригинальные цвета.