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