Soy un principiante en líquido y actualmente estoy tratando de desarrollar una tienda Shopify. En la página de productos, muestro las opciones como botones de radio y tomo las entradas de los clientes. Los precios son diferentes para las variantes. Ahora estoy tratando de mostrar el precio de la variante según la entrada del cliente, estoy un poco perdido. Esto es lo que tengo hasta ahora:
{% for product_option in product.options_with_values %} {{ product_option.name }} {% for value in product_option.values %} <input type="radio" id = "{{ value }}" name="{{ product_option.name}}" value="{{ value }}" > <label for="{{ value }}">{{ value }}</label> {% endfor %} <!--want to show the variant price here--> <br> {% endfor %} </div>Sé que puedo mostrar todos los precios de las variantes así:
{% for variant in product.variants %} {{ variant.title }} - {{ variant.price | money }} {% endfor %}Pero eso no es lo que quiero. ¿Hay alguna forma de hacerlo sin tener que usar javaScript? Gracias por adelantado.
Liquid es un lenguaje del lado del servidor. Es procesado por el servidor y no puede ofrecer ningún comportamiento dinámico. Necesitas cambiar el precio con Javascript. No hay otra solución. Usando tu código he hecho un pequeño ejemplo.
document .querySelectorAll("input[name='Size']").forEach(option =>{ option.addEventListener("change", function (event, target) { document.querySelectorAll(".price").forEach((price) => { if(price.dataset.option==option.value){ price.classList.remove("hide"); }else{ price.classList.add("hide"); } }); }); }) .hide{ display: none; } <html> <form> Size <input type="radio" id="S" name="Size" checked="checked" value="S"> <label for="S">S</label> <input type="radio" id="M" name="Size" value="M"> <label for="M">M</label> <br> <p>Price: <span class="price" data-option="S">£14.00</span> <span class="price hide" data-option="M">£15.00</span> </p> <input type="number" min="1"> <button type="submit">Add to Cart</button> </form> </html>