Criação de soluções com integração

Neste vídeo será criado uma página no LumisXP, que exibe os detalhes de um pedido específico

Passos de execução

• Criar uma página "Detalhes do pedido"
• Instanciar interface do serviço "Script" no page holder "main"
• Criar estilo "Detalhes pedido" com o seguinte HTML:

<section class="main__container container">
   <h1 class="main__title">Meus pedidos</h1>
   <div class="order-details" id="detalhes-pedido">
      <!--recuperado client-side-->
   </div>
</section>
<script>
   const queryString = window.location.search;
   const params = new URLSearchParams(queryString);
   const pedidoId = params.get('pedidoId');
   
   // Faz uma solicitação HTTP para o endpoint fornecido
   fetch('${environment.properties['api-url'][0]}/pedidos/' + pedidoId)
     .then(response => response.json()) // Converte a resposta em um objeto JSON
     .then(data => {
        var numeroPedido = Object.keys(data).length === 0 ? "não encontrado" : data.numero_pedido;
        var detalhes = Object.keys(data).length === 0 ? "" : data.detalhes;
        const html = `
       <div class="order-details__container">
         <h2>Pedido: ` + numeroPedido + `</h2>
         <p style="white-space: pre-line">` + detalhes + `</p>
       </div>`;
     // Adiciona o HTML gerado ao DOM da página
     document.getElementById("detalhes-pedido").innerHTML  += html;
   })
   .catch(error => console.error(error));
</script>