¿Cómo conectar mis relojes de variante a mi valor de opción?

Quiero conectar mi valor de opción a mis relojes como cuando haga clic en la variante observa que el valor de opción cambiará también.

Ejemplo cuando haga clic en las opciones desplegables de swatches[color círculo] también cambiará. muestra de imagen

Aquí está mi código abajo y enlace del sitio:https://strokes-test.myshopify.com/collections/frontpage

and Im using JQuery v1.8.1

HTML


{% if product.variants.size == 1 %}
  

{% else %}

{% endif %}

      
{% for option in product.options %}
  {% if option == 'Shades' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}  
      {% assign text = color | handleize %}
      
  • 
       
        {% if variant.image != null %}
        
        {% endif %}
      
    • 
        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}

JS

initColorSwatchGrid: function() { 
   jQuery('.item-swatch li label').click(function(){ 
         var newImage = jQuery(this).parent().find('.hidden img').attr('src');
         jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 
         return false;
  });
}

Pregunta hecha hace 3 años, 5 meses, 0 días - Por scriptsculptorbf10

3 Respuestas:

  • Pruébalo.

    initColorSwatchGrid: function() {
  jQuery('.item-swatch li label').click(function () {
    var newImage = jQuery(this).next().find('img').attr('src');
    jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
    // JS code for product switching
    jQuery(this).parents('ul.item-swatch').prev().val(jQuery(this).attr('value'));
    return false;
  });
}

    Respondida el Dec 17, 2020 a las 08:19 - por bugbusterx

    Votos positivos: 0 | Votos negativos: 0

  • Para conectar tus relojes de variante a tu valor de opción, necesitas agregar código adicional a tu función initColorSwatchGrid. En este caso, necesitas actualizar el valor de la opción al hacer clic en el reloj de color correspondiente.

    Aquí te dejo el código modificado:

    js
initColorSwatchGrid: function() { 
    jQuery('.item-swatch li label').click(function(){ 
        var newImage = jQuery(this).parent().find('.hidden img').attr('src');
        jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 

        // Actualizar el valor de la opción seleccionada
        var variantId = jQuery(this).attr('value');
        jQuery('select[name="id"]').val(variantId);

        return false;
    });
}

    Con esta modificación, al hacer clic en un reloj de color, se actualizará la imagen destacada y el valor de la opción seleccionada en el menú desplegable de variantes.

    Por favor, intégralo en tu código y realiza las pruebas necesarias para asegurarte de que funcione como deseas. Si tienes alguna pregunta adicional o necesitas más ayuda, ¡no dudes en decírmelo!

    Respondida el Dec 18, 2020 a las 08:17 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para conectar el valor de opción a los relojes, debes utilizar una función de JavaScript que actualice el valor de opción seleccionado cuando se hace clic en un reloj. Aquí tienes los pasos a seguir:

    1. Obtener el valor del reloj seleccionado:

    En el manejador de clic del reloj, utiliza this.value para obtener el valor del reloj seleccionado.

    2. Actualizar el valor de opción seleccionado:

    Selecciona el elemento select de la opción y establece su valor con el valor obtenido en el paso 1.

    3. Desencadenar el evento change:

    Desencadena el evento change en el elemento select para que Shopify actualice el valor de opción mostrado.

    Código actualizado:

    javascript
jQuery('.item-swatch li label').click(function(){ 
  var newImage = jQuery(this).parent().find('.hidden img').attr('src');
  jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 

  // Obtener el valor del reloj seleccionado
  var variantId = jQuery(this).attr('value');

  // Seleccionar el elemento select de la opción
  var optionSelect = jQuery('select[name="id"]');

  // Establecer el valor del elemento select
  optionSelect.val(variantId);

  // Desencadenar el evento change
  optionSelect.trigger('change');

  return false;
});

    Nota: Asegúrate de reemplazar name="id" con el nombre de tu elemento select de opción si es diferente.

    Respondida el Dec 18, 2020 a las 08:24 - por Gemini

    Votos positivos: 0 | Votos negativos: 0