WooCommerce product quick view (AJAX)
<?php
/* enqueue scripts */
function cp_enqueue_scripts() {
wp_enqueue_script( 'cp_modal_js', get_stylesheet_directory_uri() . '/js/modal.js', array( 'jquery' ));
wp_enqueue_script( 'cp_loc_file', get_stylesheet_directory_uri() . '/js/var.js');
wp_localize_script('cp_loc_file', 'cp_loc_ajaxpath', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'cp_enqueue_scripts');
/* quick view modal */
add_action("wp_ajax_nopriv_cp_get_product_details", "cp_get_product_details");
add_action("wp_ajax_cp_get_product_details", "cp_get_product_details");
function cp_get_product_details() {
$product_id = isset( $_POST['cp_productId']) ? $_POST['cp_productId'] : false;
if ( isset( $_POST['cp_productId']) ) {
// get product details
$product = wc_get_product( $product_id );
$html = '<div class="cp_modal_image"><img src="' . wp_get_attachment_image_src( $product->image_id, 'large' )[0] . '"></div>';
$html .= '<div class="cp_modal_details">';
$html .= '<div class="cp_modal_content_scroller">';
$html .= '<div class="cp_modal_heading"><h2>' . $product->name . '</h2></div>';
$html .= '<div class="cp_modal_excerpt">' . $product->post->post_excerpt . '</div>';
$html .= '<div class="cp_modal_description">' . wpautop( $product->post->post_content ) . '</div>';
$html .= '</div>'; // end scroller
$html .= '<div class="cp_modal_contact_button"><span class="cp-notification-bottom">Some notification.</span><a href="' . get_permalink( $product_id ) . '" class="cp-default-button">Read more</a></div>';
$html .= '</div>';
echo json_encode( $html );
}
wp_die();
}
/* load modal */
function cp_inject_modal() {
?>
<div class="cp_modal_loader">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div class="cp_modal_wrapper">
<div class="cp_modal_content">
<!-- inject content -->
</div>
</div>
<?php
}
add_action('wp_footer', 'cp_inject_modal', -1);
jQuery(document).ready(function($){
$('.custom-product-grid').on('click', '#cpl-quick-view', function(e){
e.preventDefault();
let self = $(this);
let productId = $(this).data('id');
// add loader
let btnContent = $(this).html();
self.html('Loading...');
$('.cp_modal_loader').css('display', 'flex');
$('html, body').css({
overflow: 'hidden',
});
$.ajax({
type: 'POST',
url: cp_loc_ajaxpath,
dataType: "json",
data:{
action: 'cp_get_product_details',
cp_productId: productId
},
success: function(data) {
// remove loader
self.html(btnContent);
// show modal
$('.cp_modal_loader').css('display', 'none');
$('.cp_modal_wrapper').css('display', 'flex');
$('.cp_modal_content').html(data);
},
error: function(xhr, status, error) {
let errorMsg = xhr.status + ' : ' + xhr.statusText
alert('Error ', errorMsg);
}
})
});
$('.cp_modal_wrapper').on('click', function(){
$('html, body').css({
overflow: 'auto',
});
$(this).css('display', 'none');
})
});
// localized variable