/ Scripts & jquery / Заявка на товар

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

HIT

14.12.2017

2336

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

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

Заводим форму 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 );

});
var productIDforForm = $(«li.product»).attr(‘class’).split(‘ ‘)[0]; — интересный метод выявления первого (из нескольких) класса у элемента
Данный вариант формы в виде раскрытия еще в процессе — не могу правильно настроить скрипт

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

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

Создаем 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 );

}

});
Есть небольшой конфликт: если таким образом заказать рекомендованный товар из карточки, то форма основного товара исчезает

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

  • Похожие записи
  • Комментарии
  • Вложения
Хуки для woocommerce

Хуки для woocommerce

Здесь собраны наиболее востребованные хуки woocommerce, которые могут пригодится при настройке любого интернет-магазина. С другими полезными хуками можно ознакомиться здесь Необходимые части кода вставляем в файл functions (лучше использовать отдельный Читать далее »

/
Watermark для изображений товаров (обзор плагинов)

Watermark для изображений товаров (обзор плагинов)

Рассмотрим различные плагины по добавлению водяного знака (watermark) на изображения товаров. WooCommerce Products Image Watermark (BeRocket) Плагин не понравился. Логотип добавляется только одним способом, с указанием положения. Можно перезагрузить загруженные Читать далее »

Акция 20% на каждый второй и 30% на каждый 3 товар

Акция 20% на каждый второй и 30% на каждый 3 товар

Немного измененный и доработанный вариант акции (20% на 3 товар, 30% на 4 товар). В данном случае немного изменен принцип применения акции. Если в предыдущем примере акция применялась буквально к Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Заявка на товар
Взаимодействие форм и scripts
Рекомендации для васВзаимодействие форм и scriptsOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.