Давно хотел адаптировать под себя ajax-фильтр товаров. Если для этого дела нужна целая консультация, я готов обговорить условия, очень хочу и фильтр, и сохранить именно свою модалку quick view, без плагинов. Кто в таких штуках хорошо шарит, и копали еще глубже меня, помогите и мне, инфы мало.
Подскажите, в чем тут конфликт, почему в отфильтрованном виде модалка не открывается, если остальное все подхватывается - стили, вишлист, тоже "самописный"(то есть модифицированный под себя). Я пока не пойму. Может в запрос фильтра надо продублировать и данные модалки, чтоб они были в одном ajax запросе? Других идей нет почему они конфликтуют.
Вот такой вариант фильтрации.
Пока не разобрал его до конца, в процессе.
https://drive.google.com/file/d/1CjXhlD54YODD76vFq...
Виджет лежит в inc/widgets.
Js-часть в assets/js/filter.js
И еще часть кода в functions.php после всех require.
Урок в ютубе, последние 2 часа.
https://www.youtube.com/watch?v=YkTvLVif3yI
Моя модалка быстрого просмотра
add_action( 'woocommerce_before_shop_loop_item_title', 'themename_loop_product_div_image_close', 30);
function themename_loop_product_div_image_close(){
global $product;
?>
<div class="loop-product_bottom loop-product_bottom_sub1">
<ul class="loop-product_bottom-ul">
<li>
<a href="#" data-toggle="modal" data-target="#modal-product" data-product-id="<?php echo $product->get_id();?>" class="modal-product-link">
<span class="fa-eye-wrap"><span class="fa-eye"></span></span>
</a>
</li>
<?php }
add_action( 'wp_ajax_ajax_quick_view', 'themename_quick_view_product_callback' );
add_action( 'wp_ajax_nopriv_ajax_quick_view', 'themename_quick_view_product_callback' );
function themename_quick_view_product_callback(){
if ( ! wp_verify_nonce( $_POST['nonce'], 'quick-nonce' ) ) {
wp_die( 'Данные отправлены с левого адреса' );
}
global $post, $woocommerce, $product;
$product = wc_get_product(esc_attr($_POST['id']));
ob_start();
?>
<div class="modal-body row">
<div class="modal-body-left col-md-5">
<?php
$attachment_id = get_post_thumbnail_id( $product->get_id() );
$product_thub = wp_get_attachment_image_url($attachment_id, 'shop_single'); ?>
<img src="<?php echo $product_thub;?>" >
<div class="modal-gal d-flex">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id ) {
echo wp_get_attachment_image( $attachment_id, 'woocommerce_gallery_thumbnail' );
}
?>
</div>
</div>
<div class="modal-body-right col-md-7">
<h2><?php echo $product->get_name();?></h2>
<p><?php $rating = $product->get_average_rating();
$count = $product->get_rating_count();
echo wc_get_rating_html( $rating, $count ); ?></p>
<div class="modal-price mb-20">
<?php echo $product->get_price_html();?></div>
<p class="mb-20"><?php echo $product->get_short_description(); ?></p>
<p class="mb-20 cat-popup"><?php echo $product->get_categories(); ?></p>
<div class="modal-buttons">
<?php
if ( $product->is_type( 'variation' ) ) {
?>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php woocommerce_single_variation_add_to_cart_button(); ?>
</form>
<?php
} else {
woocommerce_template_single_add_to_cart();
}?>
</div>
</div>
</div>
<?php
$data['product'] = ob_get_clean();
wp_send_json( $data);
wp_die();
}
JS часть модалки
jQuery(document).ready(function ($) {
$('a.modal-product-link').on('click', function () {
var productId = $(this).attr('data-product-id');
console.log(productId);
var data = {
id:productId,
action:'ajax_quick_view',
nonce: ajax_quick.nonce
};
$.ajax({
url:ajax_quick.url,
data:data,
type: 'POST',
dataType: 'json',
beforeSend:function(xhr){
$('#modal-product .modal-body').text('Загрузка');
},
success:function(data){
console.log(data);
$('#modal-product .modal-content section').html(data.product);
}
});
})
});
Простой