/ Сайтостроение / Scripts & jquery / Заявка на товар

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

HIT

14.12.2017

1499

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

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

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

}

});

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

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Кастомный метод платежа

Кастомный метод платежа

Создадим собственный метод платежа. Это может быть простой не предусмотренный изначально в WC метод: оплата курьеру картой, квитанция и прочие. Добавление подобных способов оплаты поможет на более раннем этапе понять Читать далее »

Групповой товар Woocommerce

Групповой товар Woocommerce

Групповой товар в Woocommerce это объединение в одной карточке нескольких товаров. Причем зайдя в карточку можно приобрести каждый товар по отдельности это по сути не правильно. Зачем нужен такой вид Читать далее »

Кнопки WC

Кнопки WC

Давно хотел подробно разобрать тему с кнопками WC. Кнопки меняют свой вид и функционал в зависимости от типа продукта, наличия, и других факторов. Так же в движке магазина Woocommerce множество Читать далее »

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

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

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