Заявка на товар

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

Форма заявки в карточке товара

Заводим форму Contact Form 7. Например с такими полями:

[text* text-642 class:product-name placeholder "Наименование"]
[text* your-name class:textbox placeholder "Ваше имя"]
[tel* tel-968 class:textbox placeholder "Телефон"]
[email* email-330 class:textbox placeholder "E-mail"]
[submit class:button send_one "Отправить"]

Создаем функцию и прописываем хуки. Убираем кнопку купить, вместо нее вставляем форму и сообщение об отправке заявки (изначально скрытую)

// Форма заказа товара в карточке
function woocommerce_application() {
echo do_shortcode( '[contact-form-7 id="6359" title="Заявка на товар"]' );
echo '<div class="form-product-success">Спасибо! Ваша заявка принята. Мы свяжемся с Вами в ближайшее время.</div>';
}

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_application', 30 );

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

Стили формы для карточки WC

/* Форма заявки */

.form-product-success {
    background: #dffca8;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #bbe46b;
    display: none;
}

.product-name {display: none;}

.wpcf7 input {margin-bottom: 15px;}

.wpcf7-response-output, .wpcf7-not-valid-tip {display: none !important;}

.wpcf7-not-valid {border: 1px solid red;}

Форма заявки в архивах

Форма в архивах должна быть реализована либо в виде всплывающего окна, либо раскрытием дополнительной области при наведении.

Сделаем сначала в виде раскрытия формы при наведении.

Применяем к первоначальной функции новые хуки:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_application', 10 );

Делаем форму изначально невидимой, появляющуюся при наведении

li.product .wpcf7 {
    display: none;
    position: absolute;
    width: 100%;
    background: #2196F3;
    left: 0;
    z-index: 99;
    padding: 15px 30px 0 30px !important; 
}

li.product:hover .wpcf7 {display: block;}

В данном случае придется подойти хитрее к автозаполнению наименования

$('li.product').hover(function() {
var productIDforForm = $(this).attr('class').split(' ')[0];

//alert ('.'+productIDforForm);
 
var productNameforForm = $(this).find(".woocommerce-loop-product__title").text(); 
$(this).find(".product-name").val(productNameforForm);

document.addEventListener( 'wpcf7mailsent', function( event ) {

$('.'+productIDforForm).find(".wpcf7-form").css("display", "none !important");
$('.'+productIDforForm).find(".form-product-success").css("display", "block");

}, false );

});

Вариант формы заявки в виде всплывающего окна.

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

Создаем 2 функции: всплывающее окно с формой и кнопку Заказать.

function woocommerce_application_archive() {
echo '<div class="popup application"><p class="popup-title">Заявка на товар</p><div id="application">'; 
echo do_shortcode( '[contact-form-7 id="6359" title="Заявка на товар"]' ); echo '</div></div>';
echo '<div class="form-product-success-popup">Спасибо! Ваша заявка принята. Мы свяжемся с Вами в ближайшее время.</div>';
}
add_action( 'popup-windows', 'woocommerce_application_archive' );



function woocommerce_application_archive_button() {
echo '<div class="button application-btn">Заказать</div>';
}


remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_application_archive_button', 10 );

CSS окна подтверждения

.form-product-success-popup {
    position: fixed;
    z-index: 999;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    top: 45%;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #bbe46b;
    display: none; 
    background: #dffca8; 
}

Прописываем скрипт

$(document).ready(function() { 

if($("ul").is(".products")) {

$(".application-btn").click(function() {
 
var productIDforForm = $(this).parent().parent().attr('class').split(' ')[0];

//alert (productIDforForm);

var productNameforForm = $("."+productIDforForm).find(".woocommerce-loop-product__title").text(); 
$(this).find(".product-name").val(productNameforForm);

$(".product-name").val(productNameforForm);
 
$('.popup.application').show();

$('.popup').removeClass('animated fadeOutDown');  
$('.popup').addClass('animated fadeInDown');
$('#backfon').show(); 
$('#backfon').removeClass('fadeOut');  
$('#backfon').addClass('animated fadeIn'); 
 
});


document.addEventListener( 'wpcf7mailsent', function( event ) {

$('#backfon').addClass('fadeOut');
$('.popup').addClass('fadeOutDown');
setTimeout(function () { $('#backfon').hide(); $('.popup').hide(); }, 700);
  
setTimeout(function(){$('.form-product-success-popup').fadeIn('fast')},500);
setTimeout(function(){$('.form-product-success-popup').fadeOut('slow')},4000);

}, false );

}

});

Поделиться в соц. сетях: