0
407
2018-12-10

WordPress - Contact Form 7 и универсальная форма с скрытым полем ввода

Пример реализации универсальной формы созданной в Contact Form 7 при помощи плагина Contact Form 7 Modules и jQuery скрипта
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Согласитесь в случае создания лендинг пейдж страницы у которой имеется огромное количество кнопок и блоков (содержание которых предполагает к действию) не совсем удобно создавать для каждого из данных элементов отдельную форму в плагине Contact Form 7.

Помнится был один проект в макете которого было более 30 кнопок и все они были по сути одинаковы по содержанию, но их отличие заключалось только в заголовке блока.

Что ж, Давайте создадим универсальную форму которая будет захватывать заголовок блока, данным заголовком менять заголовок в попап окне, и сразу вставлять текст данного заголовка в скрытое поле ввода которое визуально недоступно посетителю сайта.

Внимание мой пример предполагает что на вашем сайте уже установлен плагин Contact Form 7

Contact Form 7 Modules - для скрытого поля ввода (hideinput)

Contact Form 7 Modules - для скрытого поля ввода (hideinput)

Загрузить плагин:

https://ru.wordpress.org/plugins/contact-form-7-modules/

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

Шаблон формы

Для того чтобы добавить скрытое поле ввода Установите плагин и активируйте его на сайте, далее перейдите в форму Contact form 7 и добавьте шорткод с крытого поля ввода.

[hidden hidden-120 id:HIDDENINPUT]

В моём примере шаблон формы будет таким:

<style>
input#PhoneJA,
textarea#TextareaJA { 
padding-left: 14px;
}
input.wpcf7-form-control {
    min-width: 100%;
    min-height: 45px;
    margin-bottom: 15px;
}
#recapcha-popups{
 display:none;
}
</style>
[text* text-59 placeholder "Ваше имя*"]
[tel* tel-116 id:PhoneJA class:PhoneJA placeholder "Телефон*"]
[email Email id:Email class:Email placeholder "Email"]
<!--textarea* textarea-102 id:TextareaJA class:TextareaJA placeholder "Сообщение*"--><div id="recapcha-popups">[recaptcha]</div>
<span style="text-align:center;align-items: center;justify-content: center;display: block;">[submit id:BUTTOPOPUPS "Отправить"][hidden hidden-120 id:HIDDENINPUT]</span>

Шаблон письма в форме

Обязательно укажите на вкладке формы “Письмо” наше скрытое поле ввода [hidden-120]. В моем примере шаблон отправки письма будет Выглядеть таким образом:

Обратите внимание я использую нестандартные данные в полях, “Кому” и “От кого”, потому как практически во всех проектах я использую отправку почты через Google Gmail API. Как его настроить Вы можете глянуть здесь:
https://techblog.sdstudio.top/blog/wordpress-gmail-smtp-nastraivaem-otpravku-pochty-s-saita-cherez-pochtu-google
.

Кому

ThisTestMailApi@gmail.com

От кого

info@ThisDomainSite.com

Тема

📧 ThisDomainSite.com - ВЫБОР - "[hidden-120]"

Тело письма

<!doctype html>
<html>
  <head>
  <!--   Поделючаем Google Fonts -->
  <link rel="stylesheet" 
      href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
  * {
    font-family:Open Sans;
  }
.Tovar, .Zagolovok{
font-weight:400;
}
</style>
  </head>
  <body>

<img style="max-width: 150px !important;" src="https://ThisDomainSite.com/wp-content/uploads/2018/10/SDStudio_Logo500x500-150x150.png">

<b><h2 class="Tovar">Пользователь выбрал товар:</h2></b>
<h2>[hidden-120]</h2>
<hr>
<h3 class="Zagolovok">Пользователь заполнил следующие данные:</h3>

<p><b>Имя:</b></p>
[text-59]
<p><b>Телефон:</b></p>
<b><a href="tel:[tel-116]">[tel-116]</a></b>
<p><b>Email:</b></p>
[Email]
-
Это сообщение отправлено с сайта <b>[_site_title]
<br>[_site_url]</b>

  </body>
</html>

Далее в поле обязательно отмечаем чекбокс “Использовать HTML-формат письма”.

Теперь перейдем к созданию попап окна

Popups — WordPress Popup - Реализация попап окон

Popups — WordPress Popup - Реализация попап окон

Загрузить плагин Popups:

https://ru.wordpress.org/plugins/popups/

При помощи данного плагина мы будем реализовывать всплывающие окна на сайте.

Установите активируйте плагин, далее создайте попап окно. В режиме редактора “Текст”. Введите верстку и шорткод контактной формы с скрытым полем для ввода. В моём примере код будет выглядеть так:

<div class="Popups_Title_Block h3">Заголовок</div>
<div class="Popups_SubTitle_Block">Суб заголовок</div>
[contact-form-7 id="4199" title="Контактная форма - RU | УНИВЕРСАЛЬНАЯ ФОРМА"]

Обязательно укажите в блоке настроек попап окна ”Triger” в выпадающем меню (в котором текст по умолчанию “секунд после загрузки страницы”) “Manual Triggering”.

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

Для того что бы узнать идентификатор попапа, достаточно находясь в режиме редактирования попапа обратить внимание на текущую ссылку в url браузера.

В моем примере идентификатором является 4197.

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

ID попап

Контент попап окна с ошибкой

<img class=" wp-image-1067 aligncenter" src="/wp-content/uploads/2019/02/flag.svg" alt="" width="177" height="161" />

Error filling form. The form was not filled correctly, or it was not filled at all. Please note the messages under the input fields.

Стили для попап окна с ошибкой

/*
 * Add custom CSS for this popup
 * Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
 */

/*#spu-bg-1065 {
    opacity: 0.6;
    background-color: #F44336;
    z-index: 999999;
}*/
div#spu-bg-1065 {
    opacity: 0.6;
    background-color: #F44336;
    z-index: 9999999;
}
div#spu-1065 {
    z-index: 99999999;
}
/*Overley*/
div#spu-1065:after {
    background-color: rgba(255, 255, 255, 0.91) !important;
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
    opacity: 1;
    display: block;
}

#spu-1065 .spu-close {
    font-size: 30px;
    color: rgb(158, 158, 158) !IMPORTANT;
    text-shadow: 0 1px 0 #E91E63;
}

Контент попап окна для успешной отправки

<img class=" wp-image-1067 aligncenter" src="/wp-content/uploads/2019/02/like.svg" alt="" width="177" height="161" />
<p style="text-align: center;padding-top: 15px;">Thank! Your message has been successfully sent, we will contact you shortly.</p>

Стили для попап окна для успешной отправки

/*
 * Add custom CSS for this popup
 * Be sure to start your rules with #spu-1063 { } and use !important when needed to override plugin rules
 */
/*#spu-bg-1068 {
    opacity: 0.6;
    background-color: rgb(92, 162, 10);
    z-index: 999999;
}*/

div#spu-bg-1068 {
    opacity: 0.6;
    background-color: green;
    z-index: 9999999;
}
div#spu-1068 {
    z-index: 99999999;
}

/*Overley*/
div#spu-1068:after {
    background-color: rgba(255, 255, 255, 0.91) !important;
    display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
    opacity: 1;
    display: block;
}

#spu-1068 .spu-close {
    font-size: 30px;
    color: rgb(158, 158, 158) !IMPORTANT;
    text-shadow: 0 1px 0 rgba(50, 233, 30);
}

Изображения для попап окон

Успешная отправка

Ошибка отправки

И еще две штуки (старенькие, но красивые)

Успешная отправка

Ошибка отправки

Экспорт PopUps

По ссылке ниже Вы можете загрузить мной созданные, и уже много раз испытанные попап окна дял плагина Popups.

В архиве находится два экспорта созданных при помощи WordPress экспортера, на рус. и укр. языках.

jQuery скрипт для обработки и вставки заголовков блока в попап и в скрытое поле ввода

Теперь основная задача это захватить заголовок блока и вставить его в заголовок открывшегося попап окна и в скрытое поле ввода при щелчке по “кнопке действия” (в моем примере кнопка действия “ЗАКАЗАТЬ СЕЙЧАС”).

То-есть допустим у нас имеется вот такой блок, который содержит информационные блоки в количестве 5 штук:

При клике по кнопке **“Заказать сейчас”** первого блока скрипт захватит текст **“Ролеты”** и вставляет его в заголовок открывшееся попап окна

При клике по кнопке “Заказать сейчас” первого блока скрипт захватит текст “Ролеты” и вставляет его в заголовок открывшееся попап окна и в скрытое поле (как указано на скриншоте ниже). Далее благодаря скрипту произойдет вставка заголовка блока в скрытое поле ввода формы. Аналогичные действия скрипт совершит и для остальных четырех блоков (но конечно же только в случае клика по кнопке “Заказать сейчас” блока).

В начале каждому из данных блоков необходимо присвоить класс **“ForContactForm7HiddenInput”**

В начале каждому из данных блоков необходимо присвоить класс “ForContactForm7HiddenInput” благодаря этому мы укажем скрипту в каких именно блоках необходимо производить поиск заголовка.

AttrСhange.js Скрипт отслеживающий изменения в DOM дереве страницы

Скачать нужный скрипт:

На страницу создателей:

http://meetselva.github.io/

Данный скрипт нам поможет определить тот факт что в текущий момент открыто именно то попап окно которое нам нужно. А нам нужно именно попап окно для универсальной формы CF7.

Скачиваем и ложим скрипт attrchange.js в корень темы. Далее подключаем скрипт в function.php например так:

// Путь в корень аддонов и сторонних не WP плагинов
$url_SDStudio_JS_CSS_ADDONS = $theme_url';

//AttrcHange
wp_enqueue_script( 'AttrСhange', $url_SDStudio_JS_CSS_ADDONS.'/attrchange.js' , array( 'jquery' ), null, true);

Мой скрипт для Скрытой формы ввода

    jQuery(document).ready(function ($) {

    // -------------------------------------------------------
    // Захватываем заголовок блока (текст в H3) START
    // -------------------------------------------------------

    // Объявляем переменную для заголовка блока
    var TitleBlock_SDStudio = '';

    // Вешаем обработчик на кнопку в блоке для действия
    $('.elementor-element.ForContactForm7HiddenInput .elementor-jet-button.jet-elements').click(function(){
        // Присваиваем переменной заголовок
        TitleBlock_SDStudio = $(this).closest('.elementor-element.ForContactForm7HiddenInput').find('h3.elementor-heading-title').text();
        // Отладка
        // console.log(TitleBlock_SDStudio);

    });

    // -------------------------------------------------------
    // Захватываем заголовок блока (текст в H3) END
    // -------------------------------------------------------

    // --

    // -------------------------------------------------------
    // AttrChange.js START - Отслеживаем события в DOM дереве
    // -------------------------------------------------------

    $('.spu-box').attrchange({
    //   trackValues: true, 
        callback: function(event) {
            // which attribute you want to watch for changes
            if(event.attributeName == "style") {

                    // ----------------------------------------------------
                    // Обрабатываем только попап окно PopUps для уневерсальных форм

                    // Если в текущий момент открыто универсальное попап 
                    if ($(this).attr('id') === 'spu-4197'){
                        // console.log('Да это тот попап который мне нужен');
                        // Вставим в заголовок данного попап окна, заголовок блока  
                        $(this).find('.Popups_Title_Block.h3').text(TitleBlock_SDStudio);
                        // Заменяем текст в суб заголовке
                        var SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';
                        $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                        // Переводим текст блока в верхний регистр
                        var TitleBlockSDStudioUppercase = TitleBlock_SDStudio.toUpperCase();

                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                        $(this).find('input#HIDDENINPUT').attr('value', TitleBlockSDStudioUppercase);
                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                    } else {
                        // console.log('Нет! Это НЕ тот попап который нужен');
                    }
                    // ----------------------------------------------------
            }
        }
    });

    // ----------------------------------------------------
    // AttrChange.js END
    // ----------------------------------------------------
    });

Пример модификации скрипта выше, в зависимости от потребностей и обилия блоков

// =============================================================
// =============================================================
// Универсальная форма Contact Form 7 START
// =============================================================
// =============================================================

jQuery(document).ready(function ($) {

setTimeout(function(){

// -------------------------------------------------------
// Захватываем заголовок блока (текст в H3) START
// -------------------------------------------------------

// Объявляем ID нашего попап окна
var SPU_ID = 'spu-4197';
var SPU_ID_Full = '#'+SPU_ID;

// Объявляем переменную для заголовка блока
var TitleBlock_SDStudio = '';

// переменная для текста вставленного в скрытый импут
var TitleBlock_SDStudioHidden = '';

// Объявляем переменную для заголовка блока
var SubTitleText = '';

// 1 ------------------------------------------------------
// Обрабатываем бок с кнопками с право https://goo.gl/jCmC8Y
$('div#SD_MAin_Links_Right_List li.elementor-icon-list-item a').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).find('span.elementor-icon-list-text').html();
    TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/\<br\>/g, " ");
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase()

    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;
    // Отладка
    // console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

});

// 2 ------------------------------------------------------
// Обрабатываем бок с текстом под скролом https://goo.gl/N8niNA
$('div.ForContactForm7HiddenInput_Uslugi .elementor-jet-button.jet-elements').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).closest('div.ForContactForm7HiddenInput_Uslugi').find('h2.elementor-heading-title.elementor-size-default').text().toUpperCase();
//  TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
//  console.log(TitleBlock_SDStudio);

    if (TitleBlock_SDStudio == 'МЕТАЛЛОПЛАСТИКОВЫЕ ОКНА В ГОРОДЕ СУМЫ'){
            TitleBlock_SDStudio = 'Вы хотите приобрести "Металлопластиковые окна"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Металлопластиковые окна';

        } else if (TitleBlock_SDStudio == 'БАЛКОННЫЕ РАМЫ И БАЛКОНЫ ПОД КЛЮЧ - В ГОРОДЕ СУМЫ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "Балконные рамы"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Балконные рамы';

        } else if (TitleBlock_SDStudio == 'О СТЕКЛОПАКЕТЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "Стеклопакет"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'Стеклопакет';

        }

    // Отладка
    // console.log(SPU_ID_Full);

});

// 3 ------------------------------------------------------
// Обрабатываем бок c каруселью производителей https://goo.gl/hdeusv
$('a.jet-carousel__item-link').click(function(){
    return false;
//  $('div.ForContactForm7HiddenInputPartners .jet-carousel__item-text a').trigger('click');            
});
$('div.ForContactForm7HiddenInputPartners .jet-carousel__item-text a').click(function(){
    // Заменем <br> напробелы и делаем текст в верхнем регистре
    TitleBlock_SDStudio = $(this).attr("data-name");
    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

//  TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/\<br\>/g, " ");
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
    TitleBlock_SDStudio = 'Заказать у производителя "'+TitleBlock_SDStudio+'" сейчас.';
    // Отладка
    // console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

});

// 4 ------------------------------------------------------
// Вешаем обработчик на кнопку в блоке для действия
$('div.ForContactForm7CelevueBloki .elementor-jet-button.jet-elements').click(function(){
    // Присваиваем переменной заголовок
    TitleBlock_SDStudio = $(this).closest('div.ForContactForm7CelevueBloki').find('h3').text().toUpperCase();

    if (TitleBlock_SDStudio == 'БАЛКОННАЯ РАМА'){
            TitleBlock_SDStudio = 'Вы хотите заказать "БАЛКОННУЮ РАМУ"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'БАЛКОННАЯ РАМА';

        } else if (TitleBlock_SDStudio == 'БАЛКОННЫЙ БЛОК') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "БАЛКОННЫЙ БЛОК"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'БАЛКОННЫЙ БЛОК';

        } else if (TitleBlock_SDStudio == 'ЗАЛЬНОЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "ЗАЛЬНОЕ ОКНО"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'ЗАЛЬНОЕ ОКНО';

        } else if (TitleBlock_SDStudio == 'КУХОННОЕ') {
            TitleBlock_SDStudio = 'Вы хотите приобрести "КУХОННОЕ ОКНО"';
            SubTitleText = 'Спасибо за Ваш заказ, вскоре мы свяжемся с Вами для уточнения деталей';

            TitleBlock_SDStudioHidden = 'КУХОННОЕ';

        }
    // Отладка
    // console.log(TitleBlock_SDStudio);
//  SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

//  TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

});

// 5 ------------------------------------------------------
// Вешаем обработчик на кнопку в блоке для действия https://goo.gl/2Lg125
$('div.ForContactForm7HiddenInput .jet-button__state.jet-button__state-hover').click(function(){
    // Присваиваем переменной заголовок
    TitleBlock_SDStudio = $(this).closest('.ForContactForm7HiddenInput').find('h3.elementor-heading-title').text();
    TitleBlock_SDStudio = TitleBlock_SDStudio.toUpperCase();
    TitleBlock_SDStudio = 'Вы хотите заказать "'+TitleBlock_SDStudio+'"';
    // Отладка
//  console.log(TitleBlock_SDStudio);
    SubTitleText = 'Спасибо за Ваш заказ, мы вскоре свяжемся с Вами';

    TitleBlock_SDStudioHidden = TitleBlock_SDStudio;

});

// -------------------------------------------------------
// Захватываем заголовок блока (текст в H3) END
// -------------------------------------------------------

// --

// -------------------------------------------------------
// AttrChange.js START - Отслеживаем события в DOM дереве
// -------------------------------------------------------

$('.spu-box').attrchange({
//   trackValues: true, 
    callback: function(event) {
        // which attribute you want to watch for changes
        if(event.attributeName == "style") {

                // ----------------------------------------------------
                // Обрабатываем только попап окно PopUps для уневерсальных форм

                // Если в текущий момент открыто универсальное попап 
                if ($(this).attr('id') === SPU_ID){
                    // console.log('Да это тот попап который мне нужен');

                    // Вставим в заголовок данного попап окна, заголовок блока  
                    $(this).find('.Popups_Title_Block.h3').text(TitleBlock_SDStudio);
                    // Заменяем текст в суб заголовке
                    // SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';

                    $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                    // Переводим текст блока в верхний регистр
                    var TitleBlockSDStudioUppercase = TitleBlock_SDStudioHidden.toUpperCase();

                    // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                    $(this).find('input#HIDDENINPUT').attr('value', TitleBlockSDStudioUppercase);
                    // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                } else {
                    // console.log('Нет! Это НЕ тот попап который нужен');
                }
                // ----------------------------------------------------
        }
    }
});

// ----------------------------------------------------
// AttrChange.js END
// ----------------------------------------------------

},1000);
});

// =============================================================
// =============================================================
// Универсальная форма Contact Form 7 END
// =============================================================
// =============================================================

Пример скрипта для применения на Woocommerce

//===============================================================================================
// ------------------------------------------------------------
// CF7 + PopUps универсальные формы START
// ------------------------------------------------------------
//===============================================================================================

// ------------------------------------------------------------
// 1) Универсальная форма для карусели товаров START
// ------------------------------------------------------------
jQuery(document).ready(function ($) {
    setTimeout(function(){  
        $('.rpc-post-para.rpc-content a.buy_now').click(  function(){

// Запрещаем переход по ссылке
event.preventDefault();

        // ========================================================
        //  И погнали....
        // ========================================================

        // Объявляем переменную для заголовка блока
        var TitleBlock_SDStudio = '';

// Функция поиска и замены всего ненужного в тексте
TitleBlock_SDStudio = $(this).closest('.slick-slide').find('h3.rpc-post-title').text();
TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/<[^>]*>/g, '');

// ----------------------------------------------------
// AttrChange.js START
// ----------------------------------------------------
$('.spu-box').attrchange({
    //   trackValues: true,
        callback: function(event) {
            // which attribute you want to watch for changes
            if(event.attributeName == "style") {

                    // ----------------------------------------------------
                    // Обрабатываем только попап окно PopUps для уневерсальных форм

                    // Если в текущий момент открыто универсальное попап
                    if ($(this).attr('id') === 'spu-678'){
                        // console.log('Да это тот попап который мне нужен');

                        // Отладка
                        // Вставим в заголовок данного попап окна, заголовок блока
                        $(this).find('.Popups_SubTitle_Block').text(TitleBlock_SDStudio);

                        // Заменяем текст в суб заголовке
//                         var SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';
//                         $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                        // Переводим текст блока в верхний регистр
//                         var TitleBlockSDStudioUppercase = TitleBlock_SDStudio.toUpperCase();

                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                        $(this).find('input#HIDDENINPUT').attr('value', TitleBlock_SDStudio);
                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                    } else {
                        // console.log('Нет! Это НЕ тот попап который нужен');
                    }
                    // ----------------------------------------------------
            }
        }
    });

    // ----------------------------------------------------
    // AttrChange.js END
    // ----------------------------------------------------
        // ========================================================
        //  А теперь ушли курить....
        // ========================================================

// Отображаем окно PopUps
SPU.show('678');

        });
 // ------------------------------------------------------------
// 1) Универсальная форма для карусели товаров END
// ------------------------------------------------------------  
   // ==== ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

// ------------------------------------------------------------
// 2) Универсальная форма для страницы товара START
// ------------------------------------------------------------
        $('.woocommerce div.product form.cart .button').click(  function(){

// Запрещаем переход по ссылке
event.preventDefault();

        // ========================================================
console.log($(this).prev('.quantity').find('input').attr('value'));
        //  И погнали....
        // ========================================================

        // Объявляем переменную для заголовка блока
        var TitleBlock_SDStudio = '';
        // Объявляем переменную для количества товаров
        var NumberItems_SDStudio = '';      

    // Функция поиска и замены всего ненужного в тексте
NumberItems_SDStudio = $(this).prev('.quantity').find('input').attr('value');
// console.log(NumberItems_SDStudio);

TitleBlock_SDStudio = $(this).closest('[data-elementor-type="page"] .elementor-inner').find('h1').text();
// console.log(TitleBlock_SDStudio);

TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/<[^>]*>/g, '');
// console.log(TitleBlock_SDStudio);

TitleBlock_SDStudio = TitleBlock_SDStudio+' (In quantity: '+NumberItems_SDStudio+')';
// ----------------------------------------------------
// AttrChange.js START
// ----------------------------------------------------
$('.spu-box').attrchange({
    //   trackValues: true,
        callback: function(event) {
            // which attribute you want to watch for changes
            if(event.attributeName == "style") {

                    // ----------------------------------------------------
                    // Обрабатываем только попап окно PopUps для уневерсальных форм

                    // Если в текущий момент открыто универсальное попап
                    if ($(this).attr('id') === 'spu-678'){
                        // console.log('Да это тот попап который мне нужен');

                        // Отладка
                        // Вставим в заголовок данного попап окна, заголовок блока
                        $(this).find('.Popups_SubTitle_Block').text(TitleBlock_SDStudio);

                        // Заменяем текст в суб заголовке
//                         var SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';
//                         $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                        // Переводим текст блока в верхний регистр
//                         var TitleBlockSDStudioUppercase = TitleBlock_SDStudio.toUpperCase();

                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                        $(this).find('input#HIDDENINPUT').attr('value', TitleBlock_SDStudio);
                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                    } else {
                        // console.log('Нет! Это НЕ тот попап который нужен');
                    }
                    // ----------------------------------------------------
            }
        }
    });

    // ----------------------------------------------------
    // AttrChange.js END
    // ----------------------------------------------------
        // ========================================================
        //  А теперь ушли курить....
        // ========================================================

// Отображаем окно PopUps
SPU.show('678');

       });
// ------------------------------------------------------------
// 2) Универсальная форма для страницы товара END
// ------------------------------------------------------------

// ------------------------------------------------------------
// 3) Универсальная форма для страницы товарОВ START
// ------------------------------------------------------------
//     setTimeout(function(){   
        $('.woocommerce ul.products li.product .button').click(  function(){

// Запрещаем переход по ссылке
event.preventDefault();

        // ========================================================
console.log($(this).closest('#content .content-area li').find('h2.woocommerce-loop-product__title').text());
        //  И погнали....
        // ========================================================

        // Объявляем переменную для заголовка блока
        var TitleBlock_SDStudio = '';
        // Объявляем переменную для количества товаров
        var NumberItems_SDStudio = '';      

    // Функция поиска и замены всего ненужного в тексте
// NumberItems_SDStudio = $(this).prev('.quantity').find('input').attr('value');
// console.log(NumberItems_SDStudio);

TitleBlock_SDStudio = $(this).closest('#content .content-area li').find('h2.woocommerce-loop-product__title').text();
// console.log(TitleBlock_SDStudio);

TitleBlock_SDStudio = TitleBlock_SDStudio.replace(/<[^>]*>/g, '');
// console.log(TitleBlock_SDStudio);

// TitleBlock_SDStudio = TitleBlock_SDStudio+' (In quantity: '+NumberItems_SDStudio+')';
// ----------------------------------------------------
// AttrChange.js START
// ----------------------------------------------------
$('.spu-box').attrchange({
    //   trackValues: true,
        callback: function(event) {
            // which attribute you want to watch for changes
            if(event.attributeName == "style") {

                    // ----------------------------------------------------
                    // Обрабатываем только попап окно PopUps для уневерсальных форм

                    // Если в текущий момент открыто универсальное попап
                    if ($(this).attr('id') === 'spu-678'){
                        // console.log('Да это тот попап который мне нужен');

                        // Отладка
                        // Вставим в заголовок данного попап окна, заголовок блока
                        $(this).find('.Popups_SubTitle_Block').text(TitleBlock_SDStudio);

                        // Заменяем текст в суб заголовке
//                         var SubTitleText = 'Спасибо за Ваше сообщение, мы вскоре свяжемся с Вами';
//                         $(this).find('.Popups_SubTitle_Block').text(SubTitleText);

                        // Переводим текст блока в верхний регистр
//                         var TitleBlockSDStudioUppercase = TitleBlock_SDStudio.toUpperCase();

                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 START
                        $(this).find('input#HIDDENINPUT').attr('value', TitleBlock_SDStudio);
                        // Вот здесь происходит вставка заголовка в HiddenInput CF7 END

                    } else {
                        // console.log('Нет! Это НЕ тот попап который нужен');
                    }
                    // ----------------------------------------------------
            }
        }
    });

    // ----------------------------------------------------
    // AttrChange.js END
    // ----------------------------------------------------
        // ========================================================
        //  А теперь ушли курить....
        // ========================================================

// Отображаем окно PopUps
SPU.show('678');

        });
// ------------------------------------------------------------
// 3) Универсальная форма для страницы товарОВ END
// ------------------------------------------------------------

   }, 500);  
    });

//===============================================================================================
// ------------------------------------------------------------
// CF7 + PopUps универсальные формы END
// ------------------------------------------------------------
//===============================================================================================