Задача такая, добавить кнопку “Сообщить о наличии” с вызовом формы во всплывающем окне.
Рабочая связка CMS WordPress + Woocommerce + Contact Form 7 + Easy Fancybox.
Пример будет взят с сайта, чтобы сэкономить время, поэтому особо вылизываться не будет.
В файле functions.php добавляем хук, чтобы вывести кнопку вызова попап-формы.
add_filter('woocommerce_get_availability_text', 'themeprefix_change_soldout', 10, 2 );
function themeprefix_change_soldout ( $text, $product) {
if ( !$product->is_in_stock() ) {
$text = '<div class="stock-status-wrap"><p class="stock out-of-stock">'. __('Out of stock', 'ns') .'</p><a href="#popup-notify" class="button button-alt fancybox-inline">'. __('Notify me', 'ns') .'</a></div>';
}
return $text;
}
В футере или еще где-то добавляем блок с формой:
<div class="fancybox-hidden">
<div class="popup popup-form" id="popup-notify">
<div class="popup-container">
<h2 class="title"><?php _e('Notify me', 'ns'); ?></h2>
<?php echo do_shortcode('[contact-form-7 id="1" title="Notify me"]'); ?>
</div>
</div>
</div>
и там же рядом popup-success с сообщением об успешной отправке:
<div class="fancybox-hidden">
<div class="popup popup-success" id="popup-success">
<div class="popup-container">
<div class="title"><?php _e('You will receive a message', 'ns'); ?></div>
<div class="subtitle"><?php _e('as soon as the product is available', 'ns'); ?></div>
</div>
</div>
</div>
В настройках Easy Fancybox в разделе Media для параметра Enable FancyBox for у меня указано Inline content для попапа блоков, а не изображений.
В скрипты добавляем обработчик формы, чтобы после успешной отправки окно с формой пропадало и появлялось окно с поздравлением об успешной отправке:
// show succes pop-up after sending form
document.addEventListener('wpcf7mailsent', function (event) {
var id = event.detail.contactFormId;
if (id == 210222) {
$.fancybox({ href: '#popup-success-subscribe' });
} else {
$.fancybox({ href: '#popup-success' });
}
}, false);
Примитивный пример SCSS для данного кода:
// POPUP
.popup {
position: relative;
width: 420px;
max-width: 100%;
.popup-container {
padding: 40px 40px;
}
.title {
font-size: 35px;
line-height: 1;
color: #4e637f;
font-weight: 500;
text-align: center;
margin-bottom: 26px;
}
.subtitle {
font-size: 24px;
line-height: 1.2;
text-align: center;
margin-bottom: 0;
max-width: 100%;
}
input {
display: block;
font-family: "Ubuntu", sans-serif;
background: #fff;
color: #000;
border: 1px solid #cacaca;
height: 58px;
padding: 10px 14px;
font-size: 20px;
box-sizing: border-box;
min-width: 100%;
max-width: 100%;
outline: none;
}
input[type="submit"] {
margin-bottom: 0;
border: none;
width: 100%;
background: #409bcc;
color: #fff;
&:hover {
background-color: #1f80b5;
}
}
.wpcf7-form-control-wrap {
display: block;
}
.wpcf7-not-valid-tip {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background: #fff;
border: 1px solid #ff0000;
font-size: 12px;
padding: 2px 5px;
}
.wpcf7-response-output {
display: none !important;
}
.wpcf7-spinner {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0;
}
@media (max-width: 768px) {
.popup-container {
padding: 25px 30px;
}
input {
height: 46px;
padding: 10px 10px;
}
.title {
font-size: 24px;
margin-bottom: 15px;
}
.subtitle {
font-size: 18px;
}
}
}
.popup-success {
position: relative;
width: 560px;
max-width: 100%;
}
Есть масса других вариантов и плагинов, можно сделать подвязку к MailChimp или другим сервисам рассылок. Это простой пример для удобной кастомизации с минимумом стандартных плагинов.
Удачи.