Dynamic setState in AMP

Question

I have amp-state like this:

<amp-state id="smartBannerData">
<script type="application/json">
    {   
        "0":  {
            "imgSrc": "https://cdn.voicetube.com/assets/img/banners/smartbanner-jp-20200116.jpg"
        },
        "1":  {
            "imgSrc": "https://cdn.voicetube.com/assets/img/banners/smartbanner-branding-jp.jpg"
        }
    }
</script>
</amp-state>
<amp-img
      alt=""
      src="https://cdn.voicetube.com/assets/img/banners/smartbanner-jp-191205.png"
      width="500"
      height="100"
      layout="responsive"
      [src]="smartBannerData[currentImg].imgSrc"
    >
</amp-img>
<button on="tap:AMP.setState({currentImg: '0'})">1</button>
<button on="tap:AMP.setState({currentImg: '1'})">2</button>

If I click the buttons, the image will change dynamically. I want to change the imgSrc in random when the page is loaded:

<amp-script  script="smart-banner">
    <p>
        test
    </p>
</amp-script>

<script id="smart-banner" type="text/plain" target="amp-script">
setTimeout(function(){  AMP.setState({currentImg: '1'}); }, 2000)
</script>

but the image won't change.. I am a newhand of AMP , could somebody help me to figure out the problem?

@PRADIPGORULE i will hide the buttons so I can't use the click event. — AirNoir, Nov 10 '20 at 02:55
@AirNoir I think you need the server side. Use amp-list and send data from the server there.amp-script is best used after an event, such as a click, is triggered. — Alexandr Kazakov, Nov 13 '20 at 12:01

score 0 · Answer 1 · answered Nov 26 '20 at 17:32

0

Can you try the next approach?

<button on="tap:AMP.setState({currentImg: floor(random()*(100-0)+0) })"></button>

there 100 is max and 0 is min. You may change this freshold if you like.

Best Regards, V.

answered Nov 26 '20 at 17:32

Vasily Ivanov

46
3

Dynamic setState in AMP

1 Answers1