¿Como agregar contenido de un array PHP a varios DIV con la misma clase?

samuelsuteras · 13 May 2022

Buenos dias,

Llevo dandole un par de horas a este problema y no logro solucionarlo.

Tengo un array en php que me trae los precios de un producto variable en woocommerce, este array lo he pasado a javascript con json_enconde(), hasta aqui todo bien el array ahora lo tengo en javascript, ahora viene el problema.

Tengo 6 divs con la misma clase (no se la puedo cambiar), quisiera agregar 1 index del array a cada DIV, por ejemplo:

array = (a,b,c,d,e,f);

DIV 1 = a
DIV 2 = b
DIV 3 = C
ETC

Como podria hacerlo?

Henry00jj95 · 13 May 2022

samuelsuteras dijo:
Buenos dias,

Llevo dandole un par de horas a este problema y no logro solucionarlo.

Tengo un array en php que me trae los precios de un producto variable en woocommerce, este array lo he pasado a javascript con json_enconde(), hasta aqui todo bien el array ahora lo tengo en javascript, ahora viene el problema.

Tengo 6 divs con la misma clase (no se la puedo cambiar), quisiera agregar 1 index del array a cada DIV, por ejemplo:

array = (a,b,c,d,e,f);

DIV 1 = a
DIV 2 = b
DIV 3 = C
ETC

Como podria hacerlo?

por que lo le imprimes el codigo HTML al momento de imprimir el array. concatenándoles.

kanikase · 13 May 2022

Usa forEach de JavaScript, aquí tienes un ejemplo de cómo funciona: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_foreach

samuelsuteras · 13 May 2022

kanikase dijo:
Usa forEach de JavaScript, aquí tienes un ejemplo de cómo funciona: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_foreach

He probado con el forEach pero por alguna rázon no me funciona.

Mis elementos html se ven asi, estos ya vienen en el theme:

HTML:

<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch swatch-enabled" data-value="1-gramo" data-title="1 gramo" selected="selected" style="">1 gramo</div>
<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge swatch-enabled" data-value="3-gramos" data-title="3 gramos" style="">3 gramos</div>

Mi javascript con el foreach

JavaScript:

jQuery( document ).ready(function() {
                let text = "";
                const array = <?php echo json_encode($precios); ?>;
                   array.forEach(myFunction);
                   document.getElementsByClassName("wd-swatch").innerHTML = text;
                   function myFunction(item, index) {
                      text += index + ": " + item;
                }
            });

Lo que me funciona por ahora, pero creo que no es lo más optimo.

JavaScript:

jQuery( document ).ready(function() {
                var precio = <?php echo json_encode($precios); ?>;
                jQuery('[data-value="1-gramo"]').append(precio[0]);
                jQuery('[data-value="3-gramos"]').append(precio[1]);
                jQuery('[data-value="5-gramos"]').append(precio[2]);
                jQuery('[data-value="10-gramos"]').append(precio[3]);
                jQuery('[data-value="20-gramos"]').append(precio[4]);
                jQuery('[data-value="100-gramos"]').append(precio[5]);
            });

Henry00jj95 · 13 May 2022

samuelsuteras dijo:

He probado con el forEach pero por alguna rázon no me funciona.

Mis elementos html se ven asi, estos ya vienen en el theme:

HTML:

<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch swatch-enabled" data-value="1-gramo" data-title="1 gramo" selected="selected" style="">1 gramo</div>
<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge swatch-enabled" data-value="3-gramos" data-title="3 gramos" style="">3 gramos</div>

Mi javascript con el foreach

JavaScript:

jQuery( document ).ready(function() {
                let text = "";
                const array = <?php echo json_encode($precios); ?>;
                   array.forEach(myFunction);
                   document.getElementsByClassName("wd-swatch").innerHTML = text;
                   function myFunction(item, index) {
                      text += index + ": " + item;
                }
            });

Lo que me funciona por ahora, pero creo que no es lo más optimo.

JavaScript:

jQuery( document ).ready(function() {
                var precio = <?php echo json_encode($precios); ?>;
                jQuery('[data-value="1-gramo"]').append(precio[0]);
                jQuery('[data-value="3-gramos"]').append(precio[1]);
                jQuery('[data-value="5-gramos"]').append(precio[2]);
                jQuery('[data-value="10-gramos"]').append(precio[3]);
                jQuery('[data-value="20-gramos"]').append(precio[4]);
                jQuery('[data-value="100-gramos"]').append(precio[5]);
            });

prueba directamente con PHP

PHP:

<?php

for ($i = 0; $i < count($precios); $i++) {

    if ($i == 0) {

        echo '<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch swatch-enabled" data-value="' . $precios[$i] . '" data-title="' . $precios[$i] . '" style="">' . $precios[$i] . '</div>';

    } else {

        echo '<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch" data-value="' . $precios[$i] . '" data-title="' . $precios[$i] . '" style="">' . $precios[$i] . '</div>';

    }
}
?>

tendrias que ponerlo dentro del div donde va.

samuelsuteras · 13 May 2022

Henry00jj95 dijo:

prueba directamente con PHP

PHP:

<?php

for ($i = 0; $i < count($precios); $i++) {

    if ($i == 0) {

        echo '<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch swatch-enabled" data-value="' . $precios[$i] . '" data-title="' . $precios[$i] . '" style="">' . $precios[$i] . '</div>';

    } else {

        echo '<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch" data-value="' . $precios[$i] . '" data-title="' . $precios[$i] . '" style="">' . $precios[$i] . '</div>';

    }
}
?>

tendrias que ponerlo dentro del div donde va.

Claro esa solucion seria la mas rapida.

El problema es que los div ya me los genera el theme por ende no puedo hacerles un echo para div nuevos

anmt · 13 May 2022

Creo que este código te servira.

JavaScript:

<script type="text/javascript">
jQuery( document ).ready(function() {
    var precio = const array = <?php echo json_encode($precios); ?>;
    jQuery('.wd-swatch').each(function (index, elemento){
        elemento.append(precio[index]);
    });
});
</script>

samuelsuteras · 13 May 2022

anmt dijo:

Creo que este código te servira.

JavaScript:

<script type="text/javascript">
jQuery( document ).ready(function() {
    var precio = const array = <?php echo json_encode($precios); ?>;
    jQuery('.wd-swatch').each(function (index, elemento){
        elemento.append(precio[index]);
    });
});
</script>

Funciona 🙂 Gracias

El unico detalle es que por alguna razon agregar el html con "", esoty usando el price_html de woocommerce y por ende me lo tira en html, lo que no entiendo es de donde salen las comillas que rompe el codigo

anmt · 13 May 2022

No entiendo bien el problema, si el javascript pone el precio con comillas podria ser por la conversion de JSON. Sino intentar poner el codigo de otra forma, ya que de woocommerce no controlo.

samuelsuteras · 13 May 2022

Me lo tira asi:

HTML:

<div class="wd-swatch swatch-on-single text-only swatch-size-xlarge active-swatch swatch-enabled" data-value="1-gramo" data-title="1 gramo" selected="selected" style="">
1 gramo
"<span class="price">24$</span>"
</div>

Esas comillas antes del span es la que jode el codigo, pero ni idea del porqué se generan

anmt · 13 May 2022

Yo miraria el codigo fuente que genera a ver que pone en la linea de la variable precio.
y esa linea como la puse se puede modificar eliminando el const array
var precio = const array = <?php echo json_encode($precios); ?>;
var precio = <?php echo json_encode($precios); ?>;

samuelsuteras · 13 May 2022

anmt dijo:
Yo miraria el codigo fuente que genera a ver que pone en la linea de la variable precio.
y esa linea como la puse se puede modificar eliminando el const array
var precio = const array = <?php echo json_encode($precios); ?>;
var precio = <?php echo json_encode($precios); ?>;

Las comillas las genera javascript, woocommerce solo te arroja el html pero bueno seguire intentado a ver, pero tu codigo funciona super 🙂

Gracias

anmt · 13 May 2022

Puedes intentar cambiar el append por
elemento.innerHTML=elemento.innerHTML + precio[index];
aunque deberia ser lo mismo.

Si puedes copia el array del precio a ver si se me ocurre algo.

samuelsuteras · 13 May 2022

anmt dijo:
Puedes intentar cambiar el append por
elemento.innerHTML=elemento.innerHTML + precio[index];
aunque deberia ser lo mismo.

Si puedes copia el array del precio a ver si se me ocurre algo.

Listo bro 🙂

Era el append el que creaba esas comillas con el innerHTML va de lujo.

Muchas gracias

bits4me · 14 May 2022

una opción sin jQuery

HTML:

<script id="data_prices" type="application/json">
    <?php echo json_encode($precios); ?>
</script>
<script type="text/javascript">
    (()=>{
        try{
            const arr = JSON.parse(document.querySelector('#data_prices').textContent);
            const start = () =>{
                const targets = document.querySelectorAll(".wd-swatch");
                for(let index in arr){
                    targets[index].insertAdjacentHTML("beforeend", arr[index]);
                }
            }
            window.setPrices = setInterval(()=>{
                if(document.querySelector(".wd-swatch")){
                    clearInterval(window.setPrices);
                    start();
                }
            },100);
        }catch(error){
            console.error(error);
        }
    })(window);
</script>

¿Como agregar contenido de un array PHP a varios DIV con la misma clase?

samuelsuteras

Henry00jj95

kanikase

samuelsuteras

Henry00jj95

samuelsuteras

anmt

samuelsuteras

anmt

samuelsuteras

anmt

samuelsuteras

anmt

samuelsuteras

bits4me

Privacidad y transparencia

Privacidad y transparencia