+
Demo Product
1000
€
3200
€
Добавить в корзину

Добавляем в корзину кнопки с несколькими способами связи

Отличный скрипт, чтобы упростить UI вашей корзины для ваших же клиентов, тем самым сделав вашу жизнь и их жизнь счастливее =)
Здесь мы решаем проблему перегруженности интерфейса большим количеством полей ввода. Мы создаем ровно два поля ввода (при желании эту конструкцию можно еще упростить). Первое — для выбора способа связи с помощью модификации поля "Вопрос с вариантами ответа в виде картинок" подобие кнопок. Втрое поле ввода — это непосредственно для ввода контакта.

Как установить
  1. Добавляем в корзину поле Вопрос с вариантами ответа в виде картинок.
  2. Добавляем Поле ввода в одну строку. Задаем имя переменно conval (значит contact value / можете свое придумать и заменить в скрипте). Если полей данного типа в корзине несколько — меняете .t-input-group_in на [data-input-lid="1667482344859"] (ищете его через devtools)
  3. Загружаем SVG (желательно) картинки и задаем Названия (Телефон, Telegram etc.). Можете взять их со скрипта, можете написать свои, поменяв при этом их в скрипте (value=***).
  4. Добавляете код в T123
  5. Корректируете стили кнопок под себя
  6. Наслаждаетесь результатом своих трудов =)

<style>
.t-img-select__control {
  width: auto;
  margin: 5px;
  display: inline-flex;
  padding: 5px 10px;
  border: solid 2px #edeff7; /* цвет обводки кнопки */
  background: #edeff7;        /* цвет фона кнопки */
  border-radius: 10px;          /* скругление */
}
.t-img-select__indicator {
  width: 20px;
  height: 20px;
  box-shadow: none;
  padding: 0;
  margin: 3px 3px 3px 0px;
}
.t-img-select__indicator:after {
  display:none;
}
@media screen and (max-width: 640px) {
    .t-img-select__text {margin-top: 7px}
}
</style>

<script>
$('.t-input-group_in').hide()
$('.t-img-select__control input').on('click', function(){
  $('.t-input-group_in').show(300)
  $('.t-img-select__control').css('border','2px solid #f7f7f7');  // цвет обводки неактивной кнопки 
  $(this).parents('.t-img-select__control').css('border','2px solid #7385fe'); // цвет обводки активной кнопки 
})
$('[value="Телефон"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите номер телефона');
  $('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Telegram"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите ник или номер Telegram');
  $('[name="conval"]').attr('placeholder','@nicname');
})
$('[value="Whatsapp"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите номер Whatsapp');
  $('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Viber"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите номер Viber');
  $('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
$('[value="Vk"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите ник Vk');
  $('[name="conval"]').attr('placeholder','@nicname');
})
$('[value="Почта"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите адрес электронной почты');
  $('[name="conval"]').attr('placeholder','yournic@mail.com');
})
$('[value="СМС"]').on('click', function(){
  $('.t-input-group_in .t-input-title').text('Введите номер для СМС');
  $('[name="conval"]').attr('placeholder','+1 860 000 00 00');
})
</script>
Made on
Tilda