Не работают вариации woocommerce в Quick View
Помогите, пожалуйста, решить проблему с вариациями с popup окне, они не работают. Просто ничего не происходит при выборе вариаций. Я так понимаю, что ajax скрипт woocommerce не работает с вариациями в popup окне - product quick view, в которое подгружается контент через js fetch. Если я правильно понимаю, что скрипт (woocommerce/assets/js/frontend/add-to-cart-variation.js) загружается только один раз и не ловит динамические события, т.е. подгрузку товара в popup окне. Помогите исправить это.
<input type="hidden" name="variation_id" class="variation_id" value="0">
value всегда = 0
Скрипт, который подгружает товар в popup:
// Main-ajax.js
document.addEventListener('DOMContentLoaded', function () {
let qvBtn = document.querySelectorAll('a.quickview'); // кнопки 'В корзину'
qvBtn.forEach(function (entry) {
let prodIdToSend = entry.getAttribute('data-product_id'); // получаем ID товара
const url = pmqv_ajax_data.url;
let data = new FormData();
data.append('prodIdToSend', prodIdToSend);
data.append('action', 'pmqv_prod_in_popup');
data.append('nonce', pmqv_ajax_data.nonce);
const qv_popup = document.querySelector('.w-popup-box-content');
// START FETCH ============================
function product() {
fetch(url, {
method: "POST",
credentials: 'same-origin',
body: data,
})
.then(
function (response) {
response.text().then(function (data) {
qv_popup.innerHTML = '<div class="product-template-default postid-' + prodIdToSend + ' single single-product xt_atc_override_spinner xt_atc_hide_view_cart woocommerce woocommerce-page woocommerce-js us-woo-cart_compact"><main id="page-content" class="l-main pmqv-content">' + data + '</main></div>';
});
})
.catch(function (err) {
console.log('Fetch Error :-S', err);
});
}
// Отправляем данные на сервер, чтобы получить товар
function OUR_submitListener(e) {
e.preventDefault();
qv_popup.innerHTML = '<p style="text-align:center;"> Загрузка... </p>';
product(data);
}
//Ждём клик
entry.addEventListener('click', OUR_submitListener, entry);
// END FETCH ============================
})
}, false);
Код обработчика запроса:
// Аctivate the ajax handler
add_action('wp_ajax_pmqv_prod_in_popup', 'pmqv_prod_in_popup');
add_action('wp_ajax_nopriv_pmqv_prod_in_popup', 'pmqv_prod_in_popup');
$pmqv_plugin_dir = plugin_dir_path(__FILE__);
function pmqv_prod_in_popup()
{
if (!wp_verify_nonce($_POST['nonce'], 'pmqv-nonce')) {
wp_die('');
}
global $product, $wpdb, $post, $woocommerce;
if (!class_exists('woocommerce')) {
return FALSE;
}
$product_id = !empty($_POST['prodIdToSend']) ? absint(esc_attr($_POST['prodIdToSend'])) : false;
if ($product_id > 0) :
wp('p=' . $product_id . '&post_type=product');
ob_start();
if (!$product || is_array($product) || $product->get_id() !== $product_id) {
$product = wc_get_product($product_id);
include($pmqv_plugin_dir . 'templates/quickview_template.php');
}
echo ob_get_clean();
endif;
wp_die();
}
Шаблон вывода товара:
<?php
global $product, $post;
while (have_posts()) : the_post(); ?>
<div id="product-<?php the_ID(); ?>" <?php post_class('pmqv-product product'); ?>>
<div class="product-thumb img-thumbnail">
<?php echo get_the_post_thumbnail($product_id, 'shop_catalog'); ?>
</div>
<div class="product-content entry-summary">
<div class="woocommerce-details">
<div class="pmqv-title">
<h2><?php the_title(); ?></h2>
</div>
<div class="pmqv-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="pmqv-price">
<?php echo $product->get_price(); ?>
</div>
</div>
<div class="woocommerce-actions">
<?php do_action( 'woocommerce_' . $product->get_type() . '_add_to_cart' ); ?>
</div>
</div>
</div>
<?php
endwhile;
Ответы (1 шт):
после того как вы отрисовали вариантивный товар в попапе вам нужно инициировать функционал вариаций. Это можно сделать вот так:
jQuery( qv_popup ).find('form.variations_form').wc_variation_form();
