4

I am using firebase backend database for the site (mostly have a 2 page to display content business page, product page) I try to create AMP page with PHP but it's not working. I have lots of business/product to display in APM (page structure is same for both content/data is different to display)

How to do this? I try to search in google getting option to make dynamic AMP only using AMP list AMP List

I am saving all the JSON file to my hosting, but how to call that JSON file for particular AMP page that I can't identify?

KENdi
  • 7,576
  • 2
  • 16
  • 31
Mitul Bhadeshiya
  • 1,280
  • 1
  • 12
  • 32

1 Answers1

1

Try this one, replace your json src with the firebase database URL

https://fir-apps-14aae-default-rtdb.firebaseio.com/amplist/.json

https://amp.dev/documentation/components/amp-list/

    {
  "items": [
    {
      "title": "amp-carousel",
      "url": "https://ampbyexample.com/components/amp-carousel"
    },
    ...
  ]
}


<script src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

 <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
<body>
 

    <h1 id="hello"> AMP-HTML LIST with firebase</h1>
  <amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="https://fir-apps-14aae-default-rtdb.firebaseio.com/amplist/.json"
>
  <template type="amp-mustache">

    <div class="url-entry">
     <li >{{name}}<br><span>   color :{{color}}</span></li>
    </div>
  </template>
</amp-list>
</body>
Salman Shaikh
  • 321
  • 1
  • 10