/ Сайтостроение / Адаптивность / Форма: Узнать оптовую цену

Форма: Узнать оптовую цену

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Создадим в магазине Woocommerce кнопку Узнать оптовую цену вызывающую форму обратной связи. Речь идет о розничном магазине, но если посетителю нужно существенное количество какой-либо позиции, предоставить ему более привлекательную цену.

Создаем и выводим кнопку

Данный код выводит кнопку Узнать оптовую цену в карточке товара справа от цены:

add_action( 'woocommerce_single_product_summary', 'form_opt_price', 12 );
function form_opt_price() {
	echo '<div class="call-item hidden">Узнать оптовую цену</div>';
 }

Стили:

.call-item {
    position: absolute;
    width: 120px;
    background: #ff8233;
    color: #fff;
    padding: 5px 10px;
    right: 30px;
    top: 30px;
    border-radius: 5px;
    text-align: center;
	cursor: pointer;
}

.call-item:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 15px;
    border: 10px solid transparent;
    border-right-color: #fe8133;
    border-left: 0;
}

@media screen and (max-device-width: 1280px) { .call-item {width: 90px; padding: 5px; right: 15px;} }

@media screen and (max-device-width: 480px) { 
	.call-item {position: relative; width: 80%; right: 0; top: 0; margin: 15px auto 0 auto;} 
	.call-item:before {display: none;}
}

@media screen and (max-device-width: 330px) { .call-item {width: 100%;} }

Стиль hidden у кнопки нужен только для эффекта плавного появления:

setTimeout(function(){ jQuery(".call-item").addClass('animated fadeInDown visible'); }, 500);

Настраиваем форму CF7

Обычно я делаю это всплывающим окном с формой обратной связи Contact Form . Заводим поля: имя, телефон (или e-mail), наименование (к этому полю нужно добавить класс product-form-name) и количество. Количество я сделал текстовым полем а не числовым, т.к. в разных ситуациях могут быть либо шт, либо кв.м, лучше пусть будет возможность это прописать.

Чтобы прописать в поле CF7 два и более классов, их нужно писать последовательно: class:textbox class:product-form-name

Не буду описывать вызов сплывающего окна, это описано здесь. Но нам нужно дополнить скрипт автоматическим заполнением поля Наименование.

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

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

  • Комментарии
  • Вложения

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

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

Форма: Узнать оптовую цену Форма: Узнать оптовую цену
Динамическая цена
Рекомендации для васДинамическая ценаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.