Использование amp-list для создания динамической amp-карусели в AMP4HTML - PullRequest
Новая
       42

Использование amp-list для создания динамической amp-карусели в AMP4HTML

0 голосов
/ 03 мая 2019

Я хочу использовать amp-list для создания динамической amp-карусели для AMP4Email.

Я создал шаблон, который проходит проверку здесь , но при помещении его в https://amp.gmail.dev/playground/, карусель не работает.

Разве это невозможно с AMP4Email? Похоже, что он отлично работает в AMP, как правило, на основе это .

Часть кода, которая делает карусель 

<amp-list src="https://amp-templates.com/templates/api/1.json"
  layout="fixed-height"
  height="400">
  <template type="amp-mustache">
    <amp-carousel id="links-carousel"
      height="400"
      layout="fixed-height"
      type="slides">
        {{#default}}
          {{#images}}
            <div>
              <a href="{{link}}" class="carousel-link">
                <amp-img
                  class="contain"
                  layout="fill"
                  src="{{image}}"
                  alt="photo courtesy of Unsplash"></amp-img>
                  <div class="caption">
                    <p>{{description}}</p>
                  </div>
              </a>
            </div>
          {{/images}}
        {{/default}}
    </amp-carousel>
  </template>
</amp-list>

1 Ответ

0 голосов
/ 03 мая 2019

Когда вы говорите "не работает", вы имеете в виду, что карусель не показывается?

Ваш код, как есть, не будет работать на почтовой площадке AMP (или в реальном электронном письме AMP), поскольку источник вашего списка: "https://amp -templates.com / templates / api /1.json "не отправляет правильные заголовки CORS в своем ответе. Попробуйте открыть консоль и сетевые запросы, и вы сможете точно понять, что я имею в виду.

Поскольку src является удаленным, спецификации AMP предписывают множество дополнительных требований безопасности, которые вы должны соблюдать для получения файла json. Заголовки для игровой площадки электронной почты можно найти здесь , тогда как более полный список требуемых заголовков здесь .

Я смог подтвердить, что эта проблема повлияла на ваш код, самостоятельно разместив JSON и добавив его в свой htaccess: 

# AMP
Header add Access-Control-Allow-Origin "*"
Header add AMP-Access-Control-Allow-Source-Origin "amp@gmail.dev"
Header add Access-Control-Allow-Source-Origin "AMP-Access-Control-Allow-Source-Origin"
Header add access-control-expose-headers "AMP-Access-Control-Allow-Source-Origin"

Я подбросил его на временный хост, в "https://fjas298401cxj.000webhostapp.com/amptemplates-api-1.json",, который вы можете заменить своим src для проверки.

Скриншот

...