
И так буду придельно краток хотя не факт что получится. В общем стоит следующая задача, на лендинге (который создан при помощи King Composer) имеется 13 блоков с услугами. Каждый блок имеет кнопку «ЗАКАЗАТЬ» и тригер класс попап окна плагина Popups. При появлении окна необходимо передать в скрытый vol тайтл блока из которого было вызван данный попап (ибо создавать 13 форм и 13 попап окон, буду предельно честен просто в лом). Делаем мы это для того что бы в будущем использовать содержимое vol’a при отправке заполненных данных, тем самым избежав создания кучи попапов и форм.
А именно, мы вставим данные в тему и в тело письма, при отправке заполненных данных администратору сайта.
Не много закрутил, но пусть так и будет. Теперь по порядку о плагинах (качаем):
Внешний вид блоков:
Верстка одного блока:
<div class="kc_wrapper kc-col-inner-container">
<div class="kc-elm kc-css-9848008 kc_text_block">
<p>Полное бухгалтерское и налоговое сопровождение бизнеса</p>
</div>
<div class="kc-elm kc-css-3880926 kc_shortcode kc_single_image">
<img alt="" class="hoverZoomLink" data-lazy-loaded="true" src="https://mediadoma.com/wp-content/uploads/2017/09/StockSnap_L3VZ0CGUA1-min-300x200.jpg" style="display: inline;"><noscript><img src="https://mediadoma.com/wp-content/uploads/2017/09/StockSnap_L3VZ0CGUA1-min-300x200.jpg" class="" alt="" /></noscript>
</div>
<div class="kc-elm kc-css-9524973" style="height: 20px; clear: both; width:100%;"></div>
<div class="kc-elm kc-css-9316073 kc-pro-button kc-button-3 spu-open-66 spu-clickable" style="cursor: pointer;">
<a href="#"><span class="creative_title">ЗАКАЗАТЬ</span></a>
</div>
<div class="kc-elm kc-css-3408017" style="height: 20px; clear: both; width:100%;"></div>
</div>
Содержимое формы Contact Form 7:
<label> Ваше имя (обязательно)
[text your-name] </label>
<label> Ваш e-mail
[email your-email] </label>
<label> Телефон (обязательно)
[tel tel-450] </label>
<span style="text-align:center;align-items: center;justify-content: center;display: block;">[submit id:BUTTOPOPUPS "Отправить"][hidden hidden-120 id:HIDDENINPUT]</span>
Содержимое E-mail ответа формы Contact Form 7:
<h2>У Вас новый клиент!!!</h2>
<p><b>Клиенты выбрал следующую услугу:</b></p> [hidden-120]
<p><b>Имя клиента:</b></p> [your-name]
<p><b>E-mail:</b></p> <a href="mailto:[your-email]">[your-email]</a>
<p><b>Телефонный номер:</b></p> <a href="tel:[tel-450]">[tel-450]</a>
--
Это сообщение отправлено с сайта АРИФМЕТИКА ПРИБЫЛИ (http://test3.mediadoma.com)
JQuery код:
/*Сценарий для захвата тайтла и передачи его в vol hide инпута*/
jQuery(document).ready(function($){
/*Дожидаемся полной загрузки страницы*/
$(window).load(function() {
/*Объявляем глобальную переменную в которой будем хранить тайтл нашего блока кпри клике по "ЗАКАЗАТЬ"*/
var TITLE_PARENT_GLOBAL ='';
/*Вешаем обработчик клика на кнопку "ЗАКАЗАТЬ", и добавляем функцию*/
$('.kc-elm.kc-pro-button.kc-button-3.spu-open-66.spu-clickable').click (function (e) {
/*Функция которая присваивает тайтл нашего блока переменной TITLE_PARENT_GLOBAL - она ищет первый родительский предок с классами ".kc-elm.kc_column_inner" далее в них ищет ребенка с классом ".kc_text_block" и захватывает его текстовое содержимое */
var TITLE_PARENT = $(this).parents(".kc-elm.kc_column_inner").find('.kc_text_block').html();
/*Удаляем из полученного текстового содержимого, все HTML теги*/
TITLE_PARENT = TITLE_PARENT.replace(/<.*?>/g, "");
/*Переписываем содержание глобальной переменной, захваченным текстом из функции выше*/
TITLE_PARENT_GLOBAL = TITLE_PARENT;
});
/*Вешаем обработчик на кнопку формы попап окна Popups*/
$('input#BUTTOPOPUPS').click (function (e) {
/*Присваиваем пустому (скрытому) val значение полученное в переменной "TITLE_PARENT_GLOBAL" */
$('input#HIDDENINPUT').val(TITLE_PARENT_GLOBAL);
});
});
});
Обновление от января 2021 года
С тех пор как я написал эту статья прошло много времени. Вот более обновленный и пожалуй правильный вариант реализации:
/** * Вставляем значения в скрытые поля формы */ /* Сценарий для захвата тайтла и передачи его в vol hide инпута для Contact Form 7 */ jQuery(document).ready(function($){ /*Дожидаемся полной загрузки страницы*/ console.log('RUN ➕'); // 👉🏼📌🔴🔴🔴🔴🔴 Здесь указываем только селектор кнопки - input#BUTTOPOPUPS $('body').on('touchstart click','input#BUTTOPOPUPS', function(e){ console.log('RUN CLICK ➕'); var TITLE = $('#dz-licar-wrapper h1.elementor-heading-title').text(); var DESC = $('#dz-licar-wrapper p.elementor-icon-box-description').text(); console.log(TITLE); console.log(DESC); /*Присваиваем пустому (скрытому) val полученное значение */ $('input#HIDDENINPUT_TITLE').val(TITLE); console.log('➕',$('input#HIDDENINPUT_TITLE').val()); $('input#HIDDENINPUT_DESC').val(DESC); console.log('➕',$('input#HIDDENINPUT_DESC').val()); }) });
Источник записи: https://mediadoma.com