Условная форма в Popup Squarespace - PullRequest
Новая
       22

Условная форма в Popup Squarespace

0 голосов
/ 31 марта 2020

У меня есть сайт с квадратным пространством (страница здесь https://www.americangardenhouse.com/products/o-sweet-viola). Я пытаюсь создать условную форму (в данном случае это будет дополнительная форма продукта). После выбора вариантов продукта и нажатия кнопки «Добавить в корзину» отображается всплывающая форма продукта с двумя радиовходами. Если выбрано «Да», я хочу, чтобы отображались дополнительные поля формы продукта (в настоящее время скрытые CSS), а если «Нет», то появится сообщение html, предлагающее клиенту нажать кнопку «Добавить в корзину» формы продукта. , 

<style>
#textarea-yui_3_17_2_1_1585523845981_190824,
#address-yui_3_17_2_1_1585523845981_456969,
#email-yui_3_17_2_1_1585523845981_459960,
#phone-yui_3_17_2_1_1585523845981_461162 {
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#radio-yui_3_17_2_1_1585593158170_218442 input:radio').click(function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});
</script>

CSS загружается с помощью инжектора кода в верхний колонтитул страницы, а скрипт находится в нижнем колонтитуле. AJAX в настоящее время отключено.

Проблема в том, что событие щелчка не работает во всплывающем окне. Любая помощь будет принята с благодарностью. Спасибо! enter image description here

1 Ответ

0 голосов
/ 10 апреля 2020

Я считаю, что это простая JS проблема, которую вы можете исправить.

Ваше событие клика не работает, поскольку оно не делегировано. Всплывающее окно с этими кнопками (sqs-modal-lightbox) добавляется на странице с помощью AJAX.

Вам нужно сделать что-то вроде этого: 

$(document).on('click', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});

Обратите внимание, что более правильным способом проверки значения является использование события изменения и получение input.prop ()

Ресурсы:

https://learn.jquery.com/events/event-delegation/ https://api.jquery.com/prop/#prop -propertyName

Вы также можете попробовать что-то вроде этого (еще не проверял): 

$(document).on('change', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
	const inputValue = $(this).val();

	return inputValue == 'Yes' ?
		$('.form-item').show() :
		$('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
});
...