如何动态设置amp-date-countdown结束日期

时间:2018-07-30 14:41:04

标签: amp-html

我正在使用此amp-date-countdown,并希望动态设置时间戳秒数

该组件用在电子商务项目中,该项目从json端点获取其产品信息(包括销售结束日期)。

<amp-date-countdown timestamp-seconds="2147483648" layout="fixed-height" height="50">
  <template type="amp-mustache">
    <p class="p1">
      <% d %> days, <% h %> hours, <% m %> minutes and <% s %> seconds until
    </p>
  </template>
</amp-date-countdown>

我尝试在<amp-list>中渲染此组件,该组件从json src获取其数据,但是后来我在彼此之间有2个<template>标签,这是不允许的。此外,文档也没有显示任何将<amp-state>中的值绑定到timestamp-seconds或end-date的方法。

简而言之:如何从json源中动态设置此组件的timestamp-secondsend-date的值?

2 个答案:

答案 0 :(得分:2)

我认为仅使用AMP组件是没有任何办法的。当然,您可以转到AMP GitHub页面并提出功能请求。

或者,如果您在页面上使用PHP,并且产品ID或类似的内容是JSON文件中的标识符,则可以使用PHP来回显该值。

使用PHP json_decode解码JSON,然后回显类似的内容:

A

很明显,不知道JSON的深度,您可能必须扩展echo语句。

    var json = JsonConvert.SerializeObject( new 
    {
     str.StatementCode = "123456",
     str.Value = "Test",
     str.Note = "Test"
    });
   //construct content to send
    var content = new System.Net.Http.StringContent(json, Encoding.UTF8, "application/json");

我个人以前从未使用过amp-date-countdown,但是我已经成功地使用了其他AMP组件。

答案 1 :(得分:0)

使用'amp-state'和amp-bind从端点JSON源获取值到amp-date-countdown的timestamp-seconds属性中。

首先要使用amp-bind(通过数据绑定和表达式添加自定义交互性)和带有JSON端点的“ amp-state”,用户可以在交互后获取最新数据。由于amp-bind语句不会在页面加载时进行评估,因此更新的状态仅在用户交互之后才可用,这对于诸如特定产品可用性(在这种情况下为最低公平)之类的用例非常有效。 link讨论了更多有关在用户交互后如何显示动态内容的信息。 有关示例,请参考以下帮助资源和GitHub链接: