collection_templates.html

<!-- Example Template to showcase how you could load NFT Templates on your website -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  <style>
    .my-card {
      background-color: rgba(245, 245, 245, 0.7);
      margin-bottom: 1rem; 
    }

  </style>
<div class="container mt-4 mb-4">
<div class="row mb-2 justify-content-center">
    <!-- Dropdown for Hyperion API Endpoint -->
<div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
  <select id="rpcSelector" class="form-select">
    <!-- Options will be populated by JavaScript -->
  </select>
</div>
      <!-- Form for Selecting NFT Collection -->
<div class="col-md-6 text-center text-md-start">
  <form id="collectionForm" class="d-flex justify-content-center justify-content-md-start">
    <input id="collectionInput" type="text" class="form-control" pattern="[a-z1-5.]{1,12}" placeholder="Enter collection" required>
    <button type="submit" class="btn btn-primary ml-2">Update</button>
  </form>
</div>
</div>
</div>
  
  <div class="container">
    <div class="row justify-content-center" id="cardContainer">
      <!-- NFT Templates will show up here -->
    </div>
  </div>
  
  <script>
// You can edit the default Atomic API Endpoint
      let RpcEndpoint = "https://wax-atomic-api.eosphere.io"
// You can edit the default NFT Collection
      let Collection = "anyo.b1"
// You can edit the default number of templates to load, 1-100
      let NumTemplates = 6
// You can edit the default IPFS endpoint to fetch IPFS data from.
// Don't use the NFThive IPFS api if you expect a lot of traffic. 
// It's not designed to be used for third party products
      const IpfsEndpoint = "https://ipfs.hivebp.io/ipfs/"
// You can edit this list of Hyperion APIs if you want
      const endpoints = {
            "https://wax-atomic-api.eosphere.io": "wax-atomic-api.eosphere.io",
            "https://wax-aa.eu.eosamsterdam.net": "wax-aa.eu.eosamsterdam.net",
            "https://atomic-wax.tacocrypto.io": "atomic-wax.tacocrypto.io",
            "https://atomic.hivebp.io": "atomic.hivebp.io"
      };
  
  
      async function fetchData(RpcEndpoint, Collection, num_templates) {
          try {
          const response = await fetch(RpcEndpoint + "/atomicassets/v1/templates?collection_name="+ Collection +"&page=1&limit="+ NumTemplates + "&order=desc&sort=created");
          const data = await response.json();
          createCards(data.data);
          } catch (error) {
          console.error("Error fetching data:", error);
          }
      }
      
      function createCards(items) {
          const container = document.getElementById("cardContainer");
          container.innerHTML = '';
  
          items.forEach(item => {
            const card = document.createElement('div');
            card.className = 'col-md-4 d-flex justify-content-center'; 
  
            let media = item.immutable_data.img;
            if (item.immutable_data.video) {
              media = item.immutable_data.video;
            }
  
            // Check if the media is an IPFS hash
            if (media.startsWith('Qm') && media.length === 46) {
              media = IpfsEndpoint + media;
            }
  
            const content = `
                <div class="card my-card mb-4">
                  <div class="card-header d-flex justify-content-between"> 
                    <div id="template_id" data-bs-toggle="tooltip" data-bs-placement="top" title="The Template ID">#${item.template_id}</div>
                    <div id="issued_supply" data-bs-toggle="tooltip" data-bs-placement="top" title="Number of Issued NFTs in this Template">${item.issued_supply}</div>
                  </div>
                  <div class="card-body text-center">
                    <img src="${media}" class="img-fluid" style="max-height: 200px; object-fit: contain;" alt="${item.immutable_data.name}">
                  </div>
                  <div class="card-footer">
                    <div id="template_name" data-bs-toggle="tooltip" data-bs-placement="top" title="The Template Name">
                    <strong>${item.immutable_data.name || ''}</strong>
                    </div>
                    <div>${item.immutable_data.description || ''}</div>
                    <div class="d-flex justify-content-between"> 
                      <div id="schema_name" data-bs-toggle="tooltip" data-bs-placement="top" title="The Template Schema Name">${item.schema.schema_name || ''}</div>
                      <div id="created_at" data-bs-toggle="tooltip" data-bs-placement="top" title="The Date The Template was Created">${new Date(parseInt(item.schema.created_at_time)).toLocaleDateString()}</div> 
                    </div>
                  </div>
                </div>
              `;
  
            card.innerHTML = content;
            container.appendChild(card);
          });
        }
      
        document.addEventListener("DOMContentLoaded", function(){
          var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
          var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
          });
        });
  
        document.addEventListener("DOMContentLoaded", function () {
            document.getElementById('rpcSelector').addEventListener('change', function () {
              RpcEndpoint = this.value;
              fetchData(RpcEndpoint, Collection, NumTemplates);
            });
  
            document.getElementById('collectionForm').addEventListener('submit', function (e) {
              e.preventDefault();
              Collection = document.getElementById('collectionInput').value;
              fetchData(RpcEndpoint, Collection, NumTemplates);
            });
          });
  
      function UpdateDropdown() {
          const dropdown = document.getElementById('rpcSelector');
          dropdown.innerHTML = '';
          for (const [key, value] of Object.entries(endpoints)) {
            const option = document.createElement('option');
            option.value = key;
            option.text = value;
            dropdown.appendChild(option);
          }};
  
      UpdateDropdown();
  
      fetchData(RpcEndpoint, Collection, NumTemplates);
  
    
  </script>