Buenos días,
tengo un problema con jquery, ahora bien, no sé si el problema viene de la parte de php o de jquery. Comentar que jquery no es que se me de muy bien y ando buscando info pero no consigo dar con la tecla correcta.
Es una tienda hecha en shopify pero el código se entiende y también aporto comentarios.
Al entrar en un producto, si por ejemplo es un anillo, hay varios tamaños, que se eligen mediante un desplegable. Necesito saber el stock pero si meto código con el que no tendría problemas para el stock, no funciona, por lo que tengo que recorrer primero el producto y después las variantes (eso lo comento ahora).
Lo que quiero hacer, es que al elegir en el desplegable el tamaño, me diga la posición en la que está en el array. Después recorro otro array con el stock que hay de ese tamaño, para que al final consiga un mensaje, diciendo que hay x stock con ese tamaño para ese anillo. Al uso fácil, pero no sale.
Tengo este código:
Código PHP:
<select class="value_stock" data-index="option{{ forloop.index }}">
{% for value in option.values %} //recorro los tamaño que hay
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %} data-position="{{forloop.index}}">{{ value }}</option> //el value tiene el tamaño y el data-position tiene la posición en la que está en el array
{% endfor %}
{% for variant in product.variants %} //recorro las variantes, que es volver a recorrer los tamaños, pero en forma de variante
{% if variant.available %}
{% if variant.inventory_quantity %} //aquí consigo el stock de ese tamaño
{% assign auxiliar_segundo = variant.inventory_quantity %}
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="{{ auxiliar_segundo }}"> //le pongo el nombre de auxiliar_segundo para mandarlo al jquery
{% endif %}
{% endif %}
{% endfor %}
</select>
Código:
Aquí he estado haciendo varias pruebas, todas mal, por eso ahora mismo en lo que pongo nada tiene que ver con la posición y con el stock. Ahora mismo con conseguir recorrer el auxiliar segundo me vale
<script type="text/javascript">
$(document).ready(function () {
$(".value_stock").change(function () {
var cntrol = $(this);
var position = 'Position : ' + cntrol.find(':selected').data('position');
var auxiliar_segundo = $('#auxiliar_segundo');
alert(auxiliar_segundo.length); //solo me devuelve que tengo un valor
var aux = [];
for(var i = 0; i < auxiliar_segundo.length; i++) {
aux[i]=auxiliar_segundo[i];
alert(aux[i]); //este alert solo me devuelve [object HTMLInputElement]
}
alert(position); //esto me devuelve la posición del array correctamente
var finalvalue = position;
//$('#frase').text(finalvalue);
});
});
</script>
Si entro a la inspección de la página me sale esto. Lo que me mosquea es que está fuera del select, y no debería.
Código HTML:
<select class="value_stock single-option-selector single-option-selector-product-template-2 product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="5" data-position="1">5</option>
<option value="5.5" data-position="2">5.5</option>
<option value="6" data-position="3">6</option>
<option value="6.5" data-position="4">6.5</option>
<option value="7" data-position="5">7</option>
<option value="7.5" data-position="6">7.5</option>
<option value="8" selected="selected" data-position="7">8</option>
<option value="8.5" data-position="8">8.5</option>
<option value="9" data-position="9">9</option>
<option value="9.5" data-position="10">9.5</option>
</select>
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="1">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
<input type="hidden" name="auxiliar_segundo" id="auxiliar_segundo" value="0">
Y poco más que decir, yo me supongo que es la parte del jquery lo que está mal, que no recorro bien el array (he estado viendo en internet pero no encuentro un sitio en el que recorra algo que le viene siendo un id)
Un saludo y a ver si me podéis ayudar