CODEWITHSUNDEEP
amp-html
Zengabi
Zengabi

Reputation: 31

How to dynamically set the amp-date-countdown end-date

I am using this amp-date-countdown and want to dynamically set the timestamp-seconds

The component is used in an ecommerce project which gets its product information (including the sale end date) from a json endpoint.

<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>

I tried rendering this component in an <amp-list> which gets its data from a json src but then I have 2 <template> tags inside of eachother which isn't allowed. Also the documentation doesn't show any way to bind for example a value from a <amp-state> to timestamp-seconds or end-date.

So in short: How do I dynamically set the value of timestamp-seconds or end-date for this component from a json source?

Upvotes: 1

Views: 594

Answers (2)

E Greyjoy
E Greyjoy

Reputation: 27

Getting a value from endpoint JSON source using 'amp-state' and amp-bind into timestamp-seconds attribute of amp-date-countdown.

To begin with using amp-bind (adds custom interactivity with data binding and expressions) and ‘amp-state’ with a JSON end-point, a user can get up-to-date data after an interaction. As amp-bind statements are not evaluated on page load, the updated state is only available after a user interaction, which works well for use cases such as specific product availability (in this case the lowest fair). This link talks more about how to show dynamic content after user interaction. For examples, please refer to the below help resources and GitHub links :

Upvotes: 0

Craig Scott
Craig Scott

Reputation: 902

I don't think there is any way of doing this using AMP components alone. You could certainly head over to the AMP GitHub page and make a feature request though.

Alternatively, if you're using PHP on your pages and the product ID or something similar is your indentifier inside the JSON file you could echo the value out using PHP.

Decode your JSON using a PHP json_decode and then echo it out something like:

echo $jsonArray['items']['PRODUCT ID']['timestamp']

Obviously, not knowing how deep your JSON goes you may have to extend the echo statement.

echo $jsonArray['items']['LAYER 1']['LAYER 2']['PRODUCT ID']['timestamp']

I have personally never used amp-date-countdown before, but I have successfully done this with other AMP components.

Upvotes: 2

Related Questions