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

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

HIT

14.12.2017

3507

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

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

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

}

});
Есть небольшой конфликт: если таким образом заказать рекомендованный товар из карточки, то форма основного товара исчезает
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Статусы заказов

Статусы заказов

Как и любой интернет-магазин Woocommerce присваивает заказам определенные статусы в зависимости от отплаты и формирования заказа. Существует 7 различных статусов заказа: Связь формы оплаты и статуса заказа Если выбрать форму Читать далее »

Связывание товаров

Связывание товаров

Если товары продаются несколькими частями, но части нужно связать чтобы одну без другой нельзя было приобрести, можно связать такие товары. Как вариант такие товары можно заводить как один товар (в Читать далее »

Ajax форма без плагина

Ajax форма без плагина

Создаем формы без использования плагинов (например Contact Form 7). Делаем форму Ajax. Создание простой формы Добавляем скрипт обработчик (с валидацией полей) Прописываем функцию формы Данное решение взято с сайта inprocess.by Читать далее »

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

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

Заявка на товар
Внедрение модулей транспортных компаний в WC
Рекомендации для васВнедрение модулей транспортных компаний в WCOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.