souvenir #1
ART 675467877
399
р.
599
р.
Information architecture is the art and science of structuring and organizing the information
souvenir #1
ART 675467877
399
р.
599
р.
Information architecture is the art and science of structuring and organizing the information
Click to order
Cart
Total: 
Choose your present
Payment method

Добавляем в корзину поле с выбором, которое меняет изображение подарка в Tilda

Как сделали этот пример:
1. Добавили в корзине "Поле со списком" на 5 значений.
2. Имя поля задали как "presentlist"
3. Добавили код в блок Другое ► T123
4. Изменили ссылки на фото
<style>
/*Делаем фото по центру + отступ сверху*/
.presimg {
  text-align: center;
  padding-top: 20px;
}
/*Задаём ширину фото*/
.imgphoto {
    width: 230px;
}
</style>
<script>
$(document).ready(function(){
    //Добавляем блок с картинкой после поля со списком с именем - presentlist
    $('[name="presentlist"]').parents('.t-input-block').after("<div class='presimg'></div>");
    //Добавляем в наш контейнер фото
    $('.presimg').append("<img src='https://clck.ru/DBGWs' class='t-img imgphoto'>");
  
   //Когда изменяют подарок в списке, то
   $('[name="presentlist"]').change(function() {    
      // Получаем номер элемента в списке       
      var place = $(this)[0].selectedIndex;      
      //Если выбрали 0 пункт, то показываем рисунок №0 и т.д.
      if (place==0){ $(".imgphoto").attr("src","https://clck.ru/DBGWs") };
      if (place==1){ $(".imgphoto").attr("src","https://clck.ru/DBGkc") };
      if (place==2){ $(".imgphoto").attr("src","https://clck.ru/DBGmy") };
      if (place==3){ $(".imgphoto").attr("src","https://clck.ru/DBGn6") };
      if (place==4){ $(".imgphoto").attr("src","https://clck.ru/DBGnG") };
   });    
});    
</script>
Made on
Tilda