@Greendy

Переключение между двумя картинками по средствам input[type="radio"]?

Здравствуйте.

Есть необходимость вывести в shopify, а именно в коллекциях возможность выбора цвета варианта и при выборе бы менялись картинки (по сути переключались с одной на другую).

У вариантов есть свои картинки, их поставили как основная у товара и при переключении radio, то они меняются. Но почему то меняется только одна.

Сам сайт:
https://22stacy.com/

Сам скрипт:

<script> 
$(".grid-view-item__image").next().addClass("hide");

$('input[name="id"]').on('change', function() {
   var variant_img_id = $(".grid-view-item__image").attr('id');
  
  $("#"+variant_img_id).next().toggleClass("hide");   
});
  
</script>


Блок с товаром:

<div class="img-card-grid" style="padding-top: 100%; height: 194px;"> 
        
  <img id="grid-view-item__image_37867818418374" class="grid-view-item__image lazyloaded" data-src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_300x300.jpg?v=1607539127}" data-image="" src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_300x300.jpg?v=1607539127}" old-src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_300x300.jpg?v=1607539127}" old-data-src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_300x300.jpg?v=1607539127}" style="object-fit: contain; object-position: 50% 50%;"> 

        
  <img id="grid-view-item__image_37867818451142" class="grid-view-item__image lazyload hide" data-src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_silver_300x300.jpg?v=1607539241}" data-image="" old-data-src="//cdn.shopify.com/s/files/1/0511/6254/6374/products/crossearring_silver_300x300.jpg?v=1607539241}" style="object-fit: contain; object-position: 50% 50%;">         
      </div>

<form method="post" action="/cart/add">  
<label class="color-select-item"> 
      <input name="id" class="variant_image_id" type="radio" checked="checked" value="37768577220806">
      <span style="background:Gold;"></span>  
  </label>
  
<label class="color-select-item">      
      <input name="id" class="variant_image_id" type="radio" value="37768577253574">
      <span style="background:Silver;"></span>  
  </label> 
  <input name="add" class="btn2" value="ADD TO BAG" type="submit">

</form>


ID варианта можно прикрутить как картинке, так и к инпуту. Но как их сверять и чтобы они переключали именно нужный нам блок, а не только первый?
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы