Autor Tema: Enviar lista de compras  (Leído 280 veces)

redxpress

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Enviar lista de compras
« en: 30 de Marzo 2021, 20:01 »
hola buen día espero estén muy bien.
El objetivo de este foro es obtener una respuesta a mi pregunta.

me gustaría integrar a mi pagina web un recuadro flotante donde los visitantes puedan realizar una lista de los productos que allí se ofrecen, esta lista poder enviarla a un mensaje de whatsapp donde sera

La idea es que al ir pasando por la pagina y ver el articulo deseado agregarlo a la lista como un carrito de compras pero teniendo mas interacción con el cliente por si desea ingresar un articulo que no se encuentre en la pagina.

adjunto la pagina para que se puedan hacer una mejor idea de mi solicitud.

https://www.anunciappvalle.com/comercio/dagua/rapitienda-el-mayorista/dulceria

Y el código html del recuadro al inicio de la pagina, no es flotante pero me gustaría hacerlo flotante y no me envía los datos que el usuario ingresa en la lista.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Lista de la compra">
        <meta name="author" content="Francesc Ricart">
        <title>Lista de la compra</title>
        <style>
           
            *{box-sizing:border-box;padding:0;margin:0;}
            #container{
                width:600px;
                padding:2%;
                border:1px solid #000;
                border-radius:10px;
                background-color:#f0f0f0;
                margin:auto;
            }
           
            #container p{
                font-style:italic;
                margin:20px auto;
            }
           
            label{
                display:block;
                font-weight:bold;
            }
            input{
                display:inline-block;
                width:49%;
                margin:20px auto;
            }
           
        </style>
    </head>
    <body>
   
       <div id="container">
        <form action="https://wa.me/573123271795?text=container">
            <label for="anadir">Mi lista de la compra:</label>
            <input type="text" name="anadir" id="anadir">
            <input type="button" value="Añadir a la lista">
            <input type="submit" value="envia lista">
        </form>   
       
        <ul id="listaCompra"></ul>

        <p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
       </div>

    <script>
        window.onload = init;
        function init(){
            botonEnvio = document.querySelector('[type="button"]');
            nuevoItem = document.querySelector('[type="text"]');
            listaCompra = document.getElementById("listaCompra");
           
            botonEnvio.addEventListener("click",anadir);
        }
       
        function anadir(e){
            evento = e || window.event;
            if (nuevoItem.value == ""){
                evento.preventDefault();
            }else{
            var lista = document.createElement("li");
            lista.innerHTML = nuevoItem.value;
            lista.addEventListener("dblclick",eliminarLi);
            listaCompra.appendChild(lista);
            nuevoItem.value = "";
            }
        }
       
        function eliminarLi(){
            this.parentNode.removeChild(this);
        }
    </script>
    </body>
</html>


Si me pueden hacer el favor de colaborar con ello? Les agradezco un montón.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".