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

Question

Я хочу использовать 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>

Answer 1

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

Ваш код, как есть, не будет работать на игровой площадке 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 "[e-mail]"
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 для проверки.

Скриншот