Maricuchi

<div id="rifa-dinamica" style="max-width:500px; margin:auto; font-family:sans-serif; text-align:center; background:#f9f9f9; padding:15px; border-radius:10px;">

    <p style="font-weight:bold; color:#333; margin-bottom:15px;">SELECCIONA TUS NÚMEROS DISPONIBLES</p>

    <div id="grid-auto" style="display:grid; grid-template-columns:repeat(10,1fr); gap:5px;">

        <p id="cargando">Consultando disponibilidad...</p>

    </div>

    <button id="btn-auto-compra" style="width:100%; margin-top:20px; padding:15px; background:#714B67; color:white; border:none; border-radius:8px; font-weight:bold; cursor:pointer;" disabled>

        AÑADIR SELECCIÓN A LA CESTA

    </button>

</div>

<script>

(function() {

    // ID del producto que vemos en tu captura

    var PRODUCT_ID = 73;

    function iniciarRifa() {

        var grid = document.getElementById('grid-automatica');

        var btn = document.getElementById('btn-pago-directo');

        var seleccion = [];

        // 1. Buscamos las variantes que Odoo ya tiene cargadas (en los filtros laterales o inputs ocultos)

        // Según tu captura, las variantes están bajo el atributo "RILA"

        var variantesOdoo = document.querySelectorAll('.js_product .js_add_cart_variants input, .nav-item span, .attribute_column input');

        // Limpiamos el cargando

        grid.innerHTML = '';

        // Generamos los 100 números, pero solo activamos los que Odoo dice que tienen stock

        for (var i = 1; i <= 100; i++) {

            var num = i.toString().padStart(2, '0');

            var d = document.createElement('div');

            div.innerHTML = num;

            // Estilo básico

            var styleBase = "aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:4px; font-weight:bold; font-size:12px; cursor:pointer; background:white;";

            div.setAttribute('style', styleBase + "color:#28a745; border:2px solid #28a745;");

            // Lógica de multiselección

            div.onclick = (function(n, el) {

                return function() {

                    var pos = seleccion.indexOf(n);

                    if (pos > -1) {

                        seleccion.splice(pos, 1);

                        el.style.background = "white";

                        elemento.style.color = "#28a745";

                    } else {

                        seleccion.push(num);

                        el.style.backgroundColor = "#007bff";

                        el.style.color = "white";

                        el.style.borderColor = "#007bff";

                    }

                    // Actualizar botón

                    if (seleccion.length > 0) {

                        btn.disabled = false;

                        btn.style.background = "#28a745";

                        btn.innerHTML = "COMPRAR NÚMEROS: " + seleccion.join(", ");

                    } else {

                        btn.disabled = true;

                        btn.style.background = "#714B67";

                        btn.innerHTML = "AÑADIR SELECCIÓN A LA CESTA";

                    }

                };

            })(num, div);

            grid.appendChild(div);

        }

    }

    // El botón envía los IDs al carrito saltándose el pop-up de tu captura

    document.getElementById('btn-pago-directo').onclick = function() {

        var btn = this;

        btn.innerHTML = "PROCESANDO...";

        btn.disabled = true;

        // Añadimos uno por uno y al final redirigimos

        seleccion.forEach(function(n, index) {

            var url = "/shop/cart/update?product_id=" + PRODUCT_ID + "&add_qty=1";

            if (index === seleccion.length - 1) {

                // El último nos lleva a pagar

                window.location.href = "/shop/checkout?express=1";

            } else {

                // Los otros se añaden de fondo

                var img = new Image();

                img.src = url;

            }

        });

    };

    // Ejecutamos cuando la página esté lista

    setTimeout(iniciarRifa, 1000);

})();

</script>