1

Estoy iterando unos colores con php y el código es este:

<div class="colores_conf_producto">
   @foreach ($colores as $item)
     <div class="info_color_conf @if ($loop->first) activeProducto @endif @if ($item->stock == 0) noStock @endif" data-color="{{ $item->color }}">
        <img src="{{ $item->foto }}" alt="">
        <h3>{{ $item->color }}</h3>
     </div>
   @endforeach
</div>

La primera opción del bucle lleva una clase que se llama activeProducto, entonces tengo que guardar en una variable de JavaScript el primer color elegido.

Lo hago del siguiente modo:

window.onload = function() {
    obtener_primeros_valores();
};


var color_elegido = "";

function obtener_primeros_valores(){
    color_elegido = $(".colores_conf_producto").find('.activeProducto').data("color");
    $('#color_elegido').html(color_elegido);
};

Esto me funciona bien. Si os dais cuenta en la iteración hay una condición @if ($item->stock == 0) noStock @endif, esto es para que si el stock es "0", añadir una clase CSS donde lo opacito y además hago que no se pueda pulsar.

Entonces la duda es, a través del foreach, ¿se puede hacer que si el primer resultado tiene stock = "0" seleccione el siguiente?

2
  • Hola Miguel, el titulo de la pregunta no se corresponde con la pregunta en el cuerpo. Para mi lo que necesitas es agregar activeProducto al primer producto con stock y eso lo deberías hacer en el template con Blade. ¿Te interesa una respuesta así?
    – Marcos
    Commented el 10 nov. 2023 a las 11:49
  • Hola @Marcos perdona si lo hice un buen detalle, si correcto lo que comentas es lo que busco, que se seleccione el primer elemento del foreach que stock == 1
    – Miguel
    Commented el 10 nov. 2023 a las 12:18

1 respuesta 1

2

Para agregar activeProducto al primer producto con stock, podrías hacer lo siguiente:

  • Agregar una variable ($isActive = false) para saber si ya agregamos un "activo"
  • Al recorer el arrelgo de $colores, analizar si:
    • Si $item->stock == 0, entonces agregamos el estilo noStock
    • En caso contrario y si todavia no agregamos un activo:
      • Modificamos el valor de la variable $isActive = true
      • Agregamos el estilo activeProducto

Ejemplo:

<div class="colores_conf_producto">
    @php
        $isActive = false;
    @endphp
    @foreach ($colores as $item)
        @php
            $styles = "info_color_conf";
            if ($item->stock == 0) $styles .= " noStock";
            else if (!$isActive) {
                $isActive = true;
                $styles .= " activeProducto";
            }
        @endphp
      <div class="{{ $styles }}" data-color="{{ $item->color }}">
        <img src="{{ $item->foto }}" alt="">
        <h3>{{ $item->color }}</h3>
      </div>
   @endforeach
</div>

Demo

1
  • 1
    Gracias @Marcos funciona a las mil maravillas, gracias por ayudarme a aprender algo nuevo ;)
    – Miguel
    Commented el 10 nov. 2023 a las 13:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.