Shopify - Paraderos

paraderos.liquid

{% comment %}
    @rotcl
{% endcomment %}


<div class="container cn">
  <h1>¿Cuanto falta? <span id="parada"></span> </h1>
    <div class="row">
        <div class="bigb col-sm-12 col-md-12 col-lg-12 text-center align-self-center">
          <div class="prd col-sm-12 col-md-6 col-lg-4 text-center align-self-center">
            <input class="col-sm-12" id="inp" type="text" placeholder="Ingrese código del paradero" />
            <button class="col-sm-12" id="but">Buscar</button>
          </div>
            <div class="col-sm-12 col-md-6 col-lg-8 text-left">
            <h3>Hora de consulta: <span id="hra"></span></h3>
            <h3>Paradero: <span id="idp"></span></h3>
            <h3>Referencia paradero: <span id="referencia"></span></h3>
          </div>
        </div>
      
      	<div class="rs text-center align-self-center">
          <div id="result"></div>
        </div>
    </div>
</div>

<style>
  #hra, #idp, #referencia{
   	font-weight: 700; 
  }
  #but{
   	margin-top: 2px; 
  }
  #but, #inp{
   	border-radius:0; 
  }
  @media only screen and (max-width: 768px) {
  	.prd{
      display:block; 
      margin-bottom: 10px;
    }
  }
  @media only screen and (min-width: 769px) {
  	.prd{
      display:inline-flex; 
    }
  }
  
  .cn ul{
   list-style: none; 
  }
  .tit{
    font-weight: 700;
  }
  .bigb{
    margin-bottom: 20px; 
  }
</style>

<script>
  const button = document.querySelector('#but');
  const subInput = document.querySelector('#inp');
  const result = document.querySelector('#result');

  function renderList(json) {
    const posts = json.servicios;
    document.getElementById("hra").innerHTML = json.horaConsulta;
    document.getElementById("idp").innerHTML = json.id;
    document.getElementById("referencia").innerHTML = json.descripcion;
    return `
      ${posts.map(
      post => `<div class="col-sm-6 col-md-4 col-lg-3"><h3 class="tit">${post.servicio}</h3><p>${post.patente}</p><p>${post.tiempo}</p><p>${post.distancia}</p></div>`
      ).join('')}`;
  }

  async function fetchTopFive(sub) {
    const URL = `https://api.adderou.cl/ts/?paradero=${sub}`;
    try {
      const fetchResult = fetch(new Request(URL, { method: 'GET', cache: 'reload' }));
      const response = await fetchResult;
      if (response.ok) {
        const jsonData = await response.json();
        result.innerHTML = renderList(jsonData);

      } else {
        result.innerHTML = `Response.status: ${response.status}`;
      }
    } catch (e) {
      result.innerHTML = e;
    }
  }

  button.addEventListener('click', () => {
    fetchTopFive(subInput.value);
  });

  
</script>

{% schema %}
{
  "name": "Paraderos",
  "class": "tex",
  "settings": [
	{	
		"type": "header",
		"content": "Static"
	}
  ],
  "presets": [{
    "name": "Paraderos",
    "category": "Mamá, cuanto falta"
  }]

}
{% endschema %}

eCommerce - ⚡️ Shopify ⚡️

Alguna vez has querido saber cuanto falta para que pase la micro?
¡Aquí esta la inutil solución!