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

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

14.12.2017

583

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

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

Заводим форму 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 '
Спасибо! Ваша заявка принята. Мы свяжемся с Вами в ближайшее время.
'; } remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_application', 30 );

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

$(document).ready(function() { 

if($("div").is(".entry-summary")) {

var productNameforForm = $(".product_title").text();
$(".product-name").val(productNameforForm);

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

$(".wpcf7-form").css("display", "none");
$(".form-product-success").css("display", "block");

}, false );

}

});

Стили формы для карточки 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 '';
echo '
Спасибо! Ваша заявка принята. Мы свяжемся с Вами в ближайшее время.
'; } add_action( 'popup-windows', 'woocommerce_application_archive' ); function woocommerce_application_archive_button() { echo '
Заказать
'; } 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 выводит категории и товары в один список (если включить настройку выводить категории и товары). Но нам, например, необходимо категории оформить по другому. Для этого нужно отделить категории Читать далее »

Переключение вида вывода товаров

Переключение вида вывода товаров

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

/

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

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

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