0
295
VistasAgregar 2 productos al carrito con 1 botón Agregar al carrito Shopify
Quiero agregar 2 productos en el carrito en un botón Agregar al carrito . Tengo dos opciones seleccionadas con las mismas variantes con un producto. El botón Agregar al carrito agregará el mismo producto pero diferentes variantes de productos. Aquí está mi código de opción de selección.
<div class="product-single-variant-item"> <label>Power (Left Eye)</label> <select name="id_left" id="productSelect_left"> {% for variant in product.variants %} {% if variant.available %} <option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}> {% assign variantname = variant.title | replace: ' ', '' | split: '/' %} {{ variantname[0] }} </option> {% else %} <option disabled="disabled"> {% assign variantname = variant.title | replace: ' ', '' | split: '/' %} {{ variantname[0] }} - (Out of Stock) </option> {% endif %} {% endfor %} </select> </div> <div class="product-single-variant-item"> <label>Power (Right Eye)</label> <select name="id_right" id="productSelect_right"> {% for variant in product.variants %} {% if variant.available %} <option value="{{ variant.id }}" {% if forloop.first %}selected="selected"{% endif %}> {% assign variantname = variant.title | replace: ' ', '' | split: '/' %} {{ variantname[1] }} </option> {% else %} <option disabled="disabled"> {% assign variantname = variant.title | replace: ' ', '' | split: '/' %} {{ variantname[1] }} - (Out of Stock) </option> {% endif %} {% endfor %} </select> </div>CÓDIGO GENERADO HTML
<div class="product-single-variant d-none d-md-flex align-items-center mt-auto"> <div class="product-single-variant-item"> <label>Power (Left Eye)</label> <select name="id_left" id="productSelect_left"> <option value="34353935515783" selected="selected"> ±0.00 </option> <option value="34353935548551"> -0.50 </option> <option value="34353935581319"> -0.75 </option> <option disabled="disabled"> -1.00 - (Out of Stock) </option> <option disabled="disabled"> -1.25 - (Out of Stock) </option> <option disabled="disabled"> -1.50 - (Out of Stock) </option> <option disabled="disabled"> -1.75 - (Out of Stock) </option> <option disabled="disabled"> -2.00 - (Out of Stock) </option> <option disabled="disabled"> -2.25 - (Out of Stock) </option> <option disabled="disabled"> -2.50 - (Out of Stock) </option> <option disabled="disabled"> -2.75 - (Out of Stock) </option> <option disabled="disabled"> -3.00 - (Out of Stock) </option> <option disabled="disabled"> -3.25 - (Out of Stock) </option> <option disabled="disabled"> -3.50 - (Out of Stock) </option> <option disabled="disabled"> -3.75 - (Out of Stock) </option> <option disabled="disabled"> -4.00 - (Out of Stock) </option> <option disabled="disabled"> -4.25 - (Out of Stock) </option> <option disabled="disabled"> -4.50 - (Out of Stock) </option> <option disabled="disabled"> -4.75 - (Out of Stock) </option> <option disabled="disabled"> -5.00 - (Out of Stock) </option> <option disabled="disabled"> -5.25 - (Out of Stock) </option> <option disabled="disabled"> -5.50 - (Out of Stock) </option> <option disabled="disabled"> -5.75 - (Out of Stock) </option> <option disabled="disabled"> -6.00 - (Out of Stock) </option> <option disabled="disabled"> -6.50 - (Out of Stock) </option> <option disabled="disabled"> -7.00 - (Out of Stock) </option> <option disabled="disabled"> -7.50 - (Out of Stock) </option> <option disabled="disabled"> -8.00 - (Out of Stock) </option> <option disabled="disabled"> -8.50 - (Out of Stock) </option> <option disabled="disabled"> -9.00 - (Out of Stock) </option> <option disabled="disabled"> -9.50 - (Out of Stock) </option> <option disabled="disabled"> -10.00 - (Out of Stock) </option> </select> </div> <div class="product-single-variant-item"> <label>Power (Right Eye)</label> <select name="id_right" id="productSelect_right"> <option value="34353935515783" selected="selected"> ±0.00 </option> <option value="34353935548551"> -0.50 </option> <option value="34353935581319"> -0.75 </option> <option disabled="disabled"> -1.00 - (Out of Stock) </option> <option disabled="disabled"> -1.25 - (Out of Stock) </option> <option disabled="disabled"> -1.50 - (Out of Stock) </option> <option disabled="disabled"> -1.75 - (Out of Stock) </option> <option disabled="disabled"> -2.00 - (Out of Stock) </option> <option disabled="disabled"> -2.25 - (Out of Stock) </option> <option disabled="disabled"> -2.50 - (Out of Stock) </option> <option disabled="disabled"> -2.75 - (Out of Stock) </option> <option disabled="disabled"> -3.00 - (Out of Stock) </option> <option disabled="disabled"> -3.25 - (Out of Stock) </option> <option disabled="disabled"> -3.50 - (Out of Stock) </option> <option disabled="disabled"> -3.75 - (Out of Stock) </option> <option disabled="disabled"> -4.00 - (Out of Stock) </option> <option disabled="disabled"> -4.25 - (Out of Stock) </option> <option disabled="disabled"> -4.50 - (Out of Stock) </option> <option disabled="disabled"> -4.75 - (Out of Stock) </option> <option disabled="disabled"> -5.00 - (Out of Stock) </option> <option disabled="disabled"> -5.25 - (Out of Stock) </option> <option disabled="disabled"> -5.50 - (Out of Stock) </option> <option disabled="disabled"> -5.75 - (Out of Stock) </option> <option disabled="disabled"> -6.00 - (Out of Stock) </option> <option disabled="disabled"> -6.50 - (Out of Stock) </option> <option disabled="disabled"> -7.00 - (Out of Stock) </option> <option disabled="disabled"> -7.50 - (Out of Stock) </option> <option disabled="disabled"> -8.00 - (Out of Stock) </option> <option disabled="disabled"> -8.50 - (Out of Stock) </option> <option disabled="disabled"> -9.00 - (Out of Stock) </option> <option disabled="disabled"> -9.50 - (Out of Stock) </option> <option disabled="disabled"> -10.00 - (Out of Stock) </option> </select> </div> </div>Creo que se puede hacer con AJAX . Pero no sé cómo hacerlo con la solicitud de AJAX . Estoy tratando de agregar algo como esto usando AJAX .
$(function(){ var variantLeft = $('#productSelect_left option:selected').val(); var variantRight = $('#productSelect_right option:selected').val(); var totalVariant = [variantLeft, variantRight]; $('#AddToCart').on('click', function(){ $.ajax({ type: 'POST', url: '/cart/add.js', data: { quantity: 1, id: totalVariant }, dataType: 'json', success: function (data){} }); }); }); Pero mi código no funciona, solo agregue una variante con la primera seleccionada. Además, mi selección no funciona con select . ¡Necesitas ayuda!
Aquí está el sitio de referencia cómo quiero. La salida debería ser así.
2 Respuestas
Responde la pregunta0
Permítanme dividir su pregunta en dos partes:
- ¿Agregar el mismo producto con una variante diferente?
- ¿La selección no funciona con el cambio
<select>?
Respuesta 1
Vi el código y noté que usas el mismo valor de opción para ambos. Entonces, cómo, se diferencian ambas variantes. Debe pasar la clave para la variante o escribir el código en el backend para diferenciar.
If your backend have already this functionality then ok.
Respuesta - 2
selectno trabajar con cambiar la opción. Porque no hay código paraonchange. Entonces, en el momento de cargar la página, las opciones seleccionadas se guardan con jquery.
corregir código como -:
<script> var variantLeft = $('#productSelect_left option:selected').val(); var variantRight = $('#productSelect_right option:selected').val(); $('#productSelect_left').on('change', () => { variantLeft = $('#productSelect_left option:selected').val(); console.log(variantLeft); }); $('#productSelect_right').on('change', () => { variantRight = $('#productSelect_right option:selected').val(); console.log(variantRight); }); $('#AddToCart').on('click', function(){ var totalVariant = [variantLeft, variantRight]; console.log(totalVariant) $.ajax({ type: 'POST', url: '/cart/add.js', data: { quantity: 1, id: totalVariant }, dataType: 'json', success: function (data){} }); }); </script>producción -:
Same variant list
select change
Editado: como en la segunda imagen, hay dos identificaciones diferentes. Entonces, si el backend obtuvo estas dos identificaciones, entonces por la coincidencia de estas variantes de identificación y crea una estructura combinada como
[{product_id: {variantLeft: varient}}, {product_id: {varianttRight: varient}]variantLeft and variantRightvienen dentro de la solicitud ajax .
Y procese uno por uno para agregar dos productos con el mismo nombre de producto con diferentes variantes. Puede ser que haya cambiado algún código de back-end para esto.
Elimina console.log() del script. Se usó solo para prueba.
0
Esto se puede lograr sin Javascript usando name="id[]" en la selección de variante:
<select name="id[]" id="productSelect_left"> {% for variant in product.variants %} <option value="{{ variant.id }}"> {{ variant.title }} </option> {% endfor %} </select>Luego:
<select name="id[]" id="productSelect_right"> {% for variant in product.variants %} <option value="{{ variant.id }}"> {{ variant.title }} </option> {% endfor %} </select>Por supuesto ambos dentro del mismo formulario de "añadir al carrito" .
No lo usé por un tiempo, pero debería funcionar (esta es una solución conocida).
Si usa la API de Ajax, puede simplemente serializar el formulario en el evento de envío.