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

  • Autor Autor samuelsuteras
  • Fecha de inicio Fecha de inicio
samuelsuteras

samuelsuteras

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
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?
 
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?
Hacer clic para expandir...
por que lo le imprimes el codigo HTML al momento de imprimir el array. concatenándoles.
 
kanikase dijo:
Usa forEach de JavaScript, aquí tienes un ejemplo de cómo funciona: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_foreach
Hacer clic para expandir...
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]);
            });
 
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]);
            });
Hacer clic para expandir...
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.
 
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.
Hacer clic para expandir...
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
 
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>
 
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>
Hacer clic para expandir...
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
 
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.
 
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
 
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); ?>;
 
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); ?>;
Hacer clic para expandir...
Las comillas las genera javascript, woocommerce solo te arroja el html pero bueno seguire intentado a ver, pero tu codigo funciona super 🙂

Gracias
 
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.
 
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.
Hacer clic para expandir...
Listo bro 🙂

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

Muchas gracias
 
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>
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba