UdnlxPortfolio - Функционал "Купить в один клик"

Устанавливаем плагин Contact Form из архива, создаем в нем новую форму "Купить в один клик", в Шаблон формы вставим коды наших полей.

Поля

[text nameorder]
[text* nameperson placeholder "Ваше Имя*"]
[tel* phone placeholder "Телефон*"]
[submit "ОТПРАВИТЬ"]

Далее в Настройках письма, в Шаблон письма подставим код.

Код письма

Была заполнена заявка на покупку в один клик:

Товар: [nameorder]

ФИО: [nameperson]
Телефон: [phone]

-- 
Это сообщение отправлено с сайта "[_site_title]" ([_site_url]))

После этого в футоре сайта сделаем модальное окно.

Код модалки

<!--МОДАЛЬНОЕ ОКНО КУПИТЬ В ОДИН КЛИК-->
	<div class="modal fade" id="modalForm_BuyOneClick" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modalLabel">КУПИТЬ В ОДИН КЛИК</h5>
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					ФОРМА
				</div>
			</div>
		</div>
	</div>

Прикрепим теперь эту модалку ко определенным кнопкам, которые ее будут вызывать.

Пример кода вызова

<div class="container-card-001__buyblock-link">
	<a class="container-card-001__buyblock-link-lnk" href="" data-bs-toggle="modal" data-bs-target="#modalForm_BuyOneClick">Купить в 1 клик</a>
</div>

Теперь вставим в нашу модалку ту форму что мы создали плагином используя шорткод.

Шорткод формы

<div class="modal-body">
	<? echo do_shortcode( '[contact-form-7 id="d53e649" title="Купить в один клик"]' ); ?>
</div>

Этим действием выйдя на сайт и вызвав окно мы сможем посмотреть код самой формы, которую будем использовать при работе со скриптами. Получим код формы. И через панель разработчика скопируем его. Копировать элемент стоит начать со строки - <div class="wpcf7 js" id="wpcf7-f286-o1" lang="ru-RU" dir="ltr">.

Код формы изначальный

<div class="wpcf7 js" id="wpcf7-f286-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/catalog/uhod-za-belem/stiralnye-mashiny-miele/#wpcf7-f286-o1" method="post" class="wpcf7-form init" aria-label="Контактная форма" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="286">
<input type="hidden" name="_wpcf7_version" value="5.8.1">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f286-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><span class="wpcf7-form-control-wrap" data-name="nameorder"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="nameorder"></span><br>
<span class="wpcf7-form-control-wrap" data-name="nameperson"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Ваше Имя*" value="" type="text" name="nameperson"></span><br>
<span class="wpcf7-form-control-wrap" data-name="phone"><input size="40" class="wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Телефон*" value="" type="tel" name="phone"></span><br>
<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="ОТПРАВИТЬ"><span class="wpcf7-spinner"></span>
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>

Теперь, то что мы вставляли шорт кодом, вставим вместо него то что скопировали и внесем изменения для дальнейшей работы. Поработаем над ней, добавим нужные для скриптов еще скрытые поля, изменим существующие т.п. Добавим над телом формы строку - <p style="margin:10px; font-weight:600;">Наименование выбранного товара</p> для вывода в модальном окне наименование товара.

Код формы измененный

<!--МОДАЛЬНОЕ ОКНО КУПИТЬ В ОДИН КЛИК-->
	<div class="modal fade" id="modalForm_BuyOneClick" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modalLabel">КУПИТЬ В ОДИН КЛИК</h5>
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<p style="margin:10px; font-weight:600;">Наименование выбранного товара</p>
				<div class="modal-body">
					<div class="wpcf7 js" id="wpcf7-f286-o1" lang="ru-RU" dir="ltr">
					<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
						<form action="/catalog/uhod-za-belem/stiralnye-mashiny-miele/#wpcf7-f286-o1" method="post" class="wpcf7-form init" aria-label="Контактная форма" novalidate="novalidate" data-status="init">
						<div style="display: none;">
						<input type="hidden" name="_wpcf7" value="286">
						<input type="hidden" name="_wpcf7_version" value="5.8.1">
						<input type="hidden" name="_wpcf7_locale" value="ru_RU">
						<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f286-o1">
						<input type="hidden" name="_wpcf7_container_post" value="0">
						<input type="hidden" name="_wpcf7_posted_data_hash" value="">
						</div>
						<p>
							<span class="wpcf7-form-control-wrap nameorder" data-name="nameorder"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="Наименование выбранного товара" type="text" name="nameorder"></span>
							<span class="wpcf7-form-control-wrap nameperson" data-name="nameperson"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Ваше Имя*" value="" type="text" name="nameperson"></span>
							<span class="wpcf7-form-control-wrap phone" data-name="phone"><input size="40" class="wpcf7-form-control wpcf7-tel wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Телефон*" value="" type="tel" name="phone"></span>
							<input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="ОТПРАВИТЬ"><span class="wpcf7-spinner"></span>
						</p>
							<div class="wpcf7-response-output" aria-hidden="true"></div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

Внимание: Обязательно после копирование формы поменять ей экшен на ваше значение - <form action="/#wpcf7-f286-o1".

Стилизуем нашу форму не забывая в стили подставить правильный ID формы.

CSS

/*СТИЛИ ФОРМЫ КУПИТЬ В ОДИН КЛИК*/
/* #wpcf7-f291-o1 span.nameorder {
	display: none;} */
#wpcf7-f291-o1 span.nameperson input {
	margin: 0 0 10px 0;
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
#wpcf7-f291-o1 span.phone input {
	margin: 0 0 10px 0;
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
#wpcf7-f291-o1 input.wpcf7-submit {
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 40px;
    font-family: Verdana;
    font-size: 14px;
    line-height: 1.3;
    border: 2px solid #a2000d;
    background-color: #a2000d;
    color: #ffffff;
    transition: 0.5s;}
#wpcf7-f291-o1 input.wpcf7-submit:hover {
	box-shadow: 0 0 15px 6px #0000001f;
    transition: 0.5s;}
.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;}
#wpcf7-f291-o1 span.wpcf7-spinner {
	display: none!important;}
#wpcf7-f291-o1 p {
	margin: 0;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;}
#wpcf7-f291-o1 span.wpcf7-form-control-wrap {
    position: relative;
    width: 100%;}
#wpcf7-f291-o1 .wpcf7-not-valid-tip {
    position: absolute;
    top: -1px;
    left: 13px;
    color: #dc3232;
    font-size: 10px;
    font-weight: normal;
    display: block;}
#wpcf7-f291-o1 .wpcf7-response-output {
    margin: 10px 0 0;
    border-color: #a2000d;
    padding: 5px;
    line-height: 1;
    text-align: center;}
.modal-header button.close {
	background: none;
    border: none;
	float: right;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;}

Теперь напишем скрипт, который в этой модальной форме будет заполнять наименование товара, у которого была нажат кнопка в карточке.

JQuery

<script>
    $( ".container-cat-002-right-items-itm" ).hover(function() {
       let type_prod = $(this).find('p.container-cat-002-right-items-itm-options-title').text();
	   let name_prod = $(this).find('a.container-cat-002-right-items-itm-options-link').text();
       //console.log (type_prod + ' ' + name_prod);
       $('#info_product').text(type_prod + ' ' + name_prod);
       $('#name_product').val(type_prod + ' ' + name_prod);
    });
	
	$( ".container-card-001-content" ).hover(function() {
       let type_prod = $(this).find('p.container-card-001__info-title').text();
	   let name_prod = $(this).find('p.container-card-001__info-model').text();
       //console.log (type_prod + ' ' + name_prod);
       $('#info_product').text(type_prod + ' ' + name_prod);
       $('#name_product').val(type_prod + ' ' + name_prod);
    });
</script>