Amphtml: amp-date-countdown: Support 'template' attribute

[lucasdalloglio]

amp-date-countdown inside an amp-list generates this alert: The tag 'template' may not appear as a descendant of tag 'template'.

The fact is: in this case it works fine. I can fill end-date attribute inside a amp-counterdown tag with a custom end date of a READER_ID and amp-date-countdown tag generates the correct counterdown.

Two ways to solve this question:

1. Allow tag template as descendat of tag template when amp-counterdown is descendat of amp-list; or
2. Implement a src attribute inside a counterdown to output custom counterdown to different READER_ID users.

To reproduce this issue:

1. Create an amp-counterdown tag inside template tag of amp-list.
2. Set amp-list src attribute to return an end-date like {"items":[{"end-date":"2018-09-25T18:34:08.000Z"}]};
3. Put {{end-date}} inside end-date attribute in a descendant amp-counterdown tag
4. Set time display inside template tag of amp-counterdown tag like {{hh}}:{{mm}}:{{ss}}
5. It will works fine but the validator will display validation error message;

AMP Version 1809142227020
macOS High Sierra - Chrome Version 69.0.3497.100

[choumx]

There's a known validation issue with nested <template> elements. Instead, you can reference the templates by ID via the template="<id>" attribute. E.g.

<template id="myTemplateId">...</template>

<amp-list template="myTemplateId">...</amp-list>

[lucasdalloglio]

Choumx,

Referencing the templates by ID via the template="<id>"is not the solution to the problem.
Here the code I wrote:

'<amp-list width="50" layout="fixed-height" src="https://foo.com/get-end-date.php?ird=READER_ID">
' <template type="mustache">
' ' <amp-date-countdown end-date="{{end-date}}" layout="fixed-height" height="50">
' ' ' <template type="amp-mustache">{{hh}}h {{mm}}m {{ss}}s</template>
' ' </amp-date-countdown>
' </template>
'</amp-list>

The code worked fine, I got the custom end-date from src attribute and injected it into end-date attribute of amp-date-countdown tag.
But this has generated the validation message: 'template' may not appear as a descendant of tag 'template'.
Referencing templates by ID via the template="<id>" do not change the state of things.
So the issue keeps with no workaround.

[choumx]

Can you extract the <template> inside <amp-date-countdown> and reference that by ID?

<template id="foo" type="amp-mustache">{{hh}}h {{mm}}m {{ss}}s</template>

<amp-list width="50" layout="fixed-height" src="https://foo.com/get-end-date.php?ird=READER_ID">
  <template type="mustache">
    <amp-date-countdown end-date="{{end-date}}" layout="fixed-height" height="50" template="foo">
    </amp-date-countdown>
  </template>
</amp-list>

[lucasdalloglio]

Just reference templates by ID via the template="<id>" do not change
the state of things.
Besides this the tag amp-count-down do not accept attribute
template="templateid" -> The attribute 'template' may not appear in tag 'amp-date-countdown'
So this issue keep with no workaround.

[choumx]

Ah, we need to allow the template attribute in the validation rules for amp-date-countdown. Thanks, reopening.

[choumx]

@cvializ We should also support this in amp-date-picker.

[cvializ]

How would this best apply to amp-date-picker? I see some incompatibility with a single template attribute, since amp-date-picker allows multiple template elements as children which can apply to different calendar days, as well as the info area. Or are you referencing external templates generally?

[choumx]

Just generally. E.g. supporting info-template and date-template attributes.

[leonalicious]

hey guys, appreciate your guys help on this as we will need to use this amp-date-countdown component for our upcoming promotion event at 11.11 (Double 11) globally, and it meant quite a lot to us, could your guys please help to support this nested <template> feature for <amp-date-countdown> as quickly as possible please ?

[choumx]

Actually our templating system supports this out of the box. Just need to add validation and fix a bug in amp-date-countdown.

[choumx]

Runtime fix will be in dev-channel next Tuesday and production the following week.

Validation changes are rolled out independently, but likely 1-2 weeks turnaround as well.

[RaFr]

is this validation issue expected to be fixed soon? the validation message is still present when the amp-date-countdown is used inside an amp-list