[SOLUCIONADO] visualizar textos según lo que se elija

elpre · #1 (**permalink**) 05/03/2018, 03:03

Buenos días,

a ver si me echáis una mano.

En una página de pulseras, se puede elegir si tiene plata, oro u oro negro y según lo que se elija, pues aparece la info sobre eso.

El caso es que cuando están las 3 variantes el javascript funciona, pero si por ejemplo, solo existe plata y oro, el javascript deja de funcionar

Código PHP:

                  <!--Para el titulo-->

                {% for option in product.options_with_values %}

                  {% if forloop.index0 == 0 %}

                    {% for value in option.values %}

                      {% assign valor_label = value | escape %}

                      {% if valor_label == 'Silver' %}

                        <div id="title-silver" class="large--one-half right">

                          <h2 style=" font-family: 'SofiaPro-Bold'; font-size: 22px; margin-bottom: 20px; padding-top: 60px;">{{ product.title | append: ' Men Beaded Wristband with Silver' }}

                          </h2>

                        </div>

                      {% endif %}

                      {% if valor_label == 'Gold' %}

                        <div id="title-gold" class="large--one-half right" style="display: none;">

                          <h2 style=" font-family: 'SofiaPro-Bold'; font-size: 22px; margin-bottom: 20px; padding-top: 60px;">{{ product.title | append: ' Men Beaded Wristband with Gold' }}

                          </h2>

                        </div>

                      {% endif %}

                      {% if valor_label == 'Black Gold' %}

                        <div id="title-black-gold" class="large--one-half right" style="display: none;">

                          <h2 style=" font-family: 'SofiaPro-Bold'; font-size: 22px; margin-bottom: 20px; padding-top: 60px;">{{ product.title | append: ' Men Beaded Wristband with Black Gold' }}

                          </h2>

                        </div>

                      {% endif %}

                    {% endfor %}

                  {% endif %}

                {% endfor %}

                <div class="large--one-half right">

                  <hr class="hr--small hr--small-black" style="margin-bottom: 40px;">

                    {{ product.description }}

 
                <!--Para la tabla-->

                  <div class="tablas">

                    {% assign short_title = product.title | remove: 'Essential 10' | remove: 'Essential 08' | remove: 'Premium 10' | remove: 'Premium 12' %}

                    {% for option in product.options_with_values %}

                      {% if forloop.index0 == 0 %}

                        {% for value in option.values %}

                          {% assign valor_label = value | escape %}

                          {% if valor_label == 'Silver' %}

                            <div id="table-silver">

                              <table>

                                <tbody>

                                  <tr>

                                    <td colspan="2" style="font-family: 'SofiaPro-Bold">Bracelet Specifications</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Stone</td>

                                    <td>{{ short_title }}</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Noble Metal</td>

                                    <td>Sterling Silver 925</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Size</td>

                                    <td>Custom Fit</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Package</td>

                                    <td>Luxury Jewelery Box</td>

                                  </tr>

                                </tbody>

                              </table>

                            </div>

                          {% endif %}

                          {% if valor_label == 'Gold' %}

                            <div id="table-gold" style="display: none;">

                              <table>

                                <tbody>

                                  <tr>

                                    <td colspan="2" style="font-family: 'SofiaPro-Bold">Bracelet Specifications</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Stone</td>

                                    <td>{{ short_title }}</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Noble Metal</td>

                                    <td>Silver 925 & Heavy Gold Plated</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Size</td>

                                    <td>Custom Fit</td>

                                  </tr>

                                  <tr class="linea">

                                    <td>Package</td>

                                    <td>Luxury Jewelery Box</td>

                                  </tr>

                                </tbody>

                              </table>

                            </div>

                          {% endif %}

                          {% if valor_label == 'Black Gold' %}

                            <div id="table-black-gold" style="display: none;">

                              <table>

                                <tbody>

                                  <tr>

                                    <td colspan="2" style="font-family: 'SofiaPro-Bold">Bracelet Specifications</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Stone</td>

                                    <td>{{ short_title }}</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Noble Metal</td>

                                    <td>Silver 925 & Heavy Black Rodhium</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Size</td>

                                    <td>Custom Fit</td>

                                  </tr>

                                  <tr class="linea">

                                    <td class="columna-table">Package</td>

                                    <td>Luxury Jewelery Box</td>

                                  </tr>

                                </tbody>

                              </table>

                            </div>

                          {% endif %}

                        {% endfor %}

                      {% endif %}

                    {% endfor %}

                  </div>

Este es el javascript

Código:

<script>
  function cambio(auxiliar) {
    var met = document.getElementsByName('Variantes')[auxiliar+1].value;
    if(met === "Silver" || met === "Silver Alt"){
      document.getElementById('title-silver').style.display="block";
      document.getElementById('title-gold').style.display="none";
      document.getElementById('title-black-gold').style.display="none";
      document.getElementById('table-silver').style.display="block";
      document.getElementById('table-gold').style.display="none";
      document.getElementById('table-black-gold').style.display="none";
    }
    if(met === "Gold" || met === "Gold Alt"){
      document.getElementById('title-silver').style.display="none";
      document.getElementById('title-gold').style.display="block";
      document.getElementById('title-black-gold').style.display="none";
      document.getElementById('table-silver').style.display="none";
      document.getElementById('table-gold').style.display="block";
      document.getElementById('table-black-gold').style.display="none";
    }
    if(met === "Black Gold" || met === "Black Gold Alt"){
      document.getElementById('title-silver').style.display="none";
      document.getElementById('title-gold').style.display="none";
      document.getElementById('title-black-gold').style.display="block"; 
      document.getElementById('table-silver').style.display="none";
      document.getElementById('table-gold').style.display="none";
      document.getElementById('table-black-gold').style.display="block";
    }  
  }
</script>

La llamada a la función cambio se hace en el (input type="radio") que hay más arriba en donde le paso los valores de "Silver", "silver Alt", "Gold", "Gold Alt", "Black Gold" y "Black Gold Alt"

Lo que he pegado tiene como dos partes,
Para el título
Para la tabla

La parte del título funciona siempre, da igual que solo existan plata u oro, que siempre funciona y al cambiar el metal se cambia también el título.
El problema es con la tabla, que solo funciona si existen los 3 metales, en el momento en que oro negro deja de existir, ya no cambia, se queda siempre con los datos de la plata.

Si no me he explicado bien, dejo dos url, para que veais:
Pulsera que funciona
Pulsera que no funciona

Gracias y un saludo

Fuzzylog · #2 (**permalink**) 05/03/2018, 06:48

Tienes que comprobar que existen en el DOM los elementos con el id indicado o de lo contrario saltará un error de javascript al intentar modificar sus propiedades (el típico null pointer)

Si lo haces con jQuery no sería necesario ya que la librería te evita esa comprobación.

elpre · #3 (**permalink**) 05/03/2018, 08:48

Buenas tardes,

quieres decir que si por ejemplo el elemento con ID "title-black.gold" no existe salta error de javascript??? y no continua con la sentencia???

Algo así imaginaba, pero cómo le digo si existe??? con algo así valdría???
if(document.getElementById('title-black-gold') != null)

Mientras se ve la respuesta voy a probar a ver

Alexis88 · #4 (**permalink**) 05/03/2018, 09:54

Efectivamente, si un elemento indicado en el código no existe en el documento, se produce un error. Ahora, lo que puedes hacer es: tomar el camino más largo, el cual consiste en realizar comprobaciones sucesivas mediante el uso de condiciones (N comprobaciones por cada N elementos), o tomar el camino más corto: utilizar una clase la cual se asignaría al bloque que se desea visualizar y, cuando se elija otra opción, se comprueba la existencia de algún bloque con dicha clase, se le retira la clase, se oculta a dicho bloque y, al bloque que se desea visualizar, se le asigna la clase de visualización y se lo hace visible.

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
  var select = document.querySelector("#id_del_select"), //El <select>
      valor, antiguo, nuevo;
  
  //Cuando se elija un valor diferente en el <select>
  select.addEventListener("change", function(){
 
    //Si existe el valor elegido, se trabaja con él, caso contrario, con el valor booleano "false"
    valor = this.value ? this.value : false;
 
    //Tomamos al elemento visible, si lo hay
    antiguo = document.querySelector(".la_clase");
 
    //Tomamos al bloque que corresponda con el valor elegido si este existe o se establece un valor nulo
    nuevo = valor ? document.querySelector("#" + valor) : null;
      
    //Si existe un bloque visible
    if (antiguo){
      //Le retiramos la clase y automáticamente se ocultará
      antiguo.className = "";
    }
 
    //Si el valor de la opción elegida existe
    if (valor){      
      //Al nuevo se le añade la clase y automáticamente se hará visible
      nuevo.className = "la_clase";
    }
  }, false);
});

Para este ejemplo estoy considerando que, inicialmente, todos los bloques están ocultos. Eso puedes hacerlo desde la hoja de estilos (CSS) estableciendo el par atributo-valor display: none para todos los bloques. La clase es fundamental ya que, mediante CSS, hará visible al bloque elegido.

DEMO

elpre · #5 (**permalink**) 07/03/2018, 04:46

Buenos días, y perdón por contestar tarde.

Teníais razón, he comprobado primero que el valor existe y ya funciona perfectamente.

Como es una tienda online que está en funcionamiento, corría prisa y no son muchos los valores que mirar lo he hecho a mano pero ahora miro la respuesta que ha comentado Alexis88.

Voy a poner como solucionado el tema y a darle vueltas al tema este

Muchas gracias por la ayuda y un saludo