Cacher is the code snippet organizer for pro developers

<?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