首页 > 解决方案 > 快速加载ajax响应

问题描述

这是我为显示弹出窗口而创建的代码,它正在显示结果,但 ajax 加载需要 2.50 秒,您能帮我更快地加载响应吗?使用此代码将产品详细信息显示为弹出窗口,如 woocommerce 中的快速查看按钮我需要帮助的网站是https ://www.sagaraqua.in/saudibasket/我是 ajax 新手,所以请指导我

function pop_up() {?>
<div id="myModal" class="modal quick-view-modal">
<!-- Modal content -->
<div class="modal-content">
    <span class="close">&times;</span>
    <div class="content">
    </div>
</div>
</div>
<style>
.modal {
    display: none;
  
    position: fixed;

    z-index: 1;
 
    left: 0;
    top: 0;
    width: 100%;
  
    height: 100%;
    
    overflow: auto;
  
    background-color: rgb(0, 0, 0);
 
    background-color: rgba(0, 0, 0, 0.4);
 
    z-index: 999;
   }

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>
<script>
jQuery(document).ready(function ($) {
    var modal = document.getElementById('myModal');
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
    }
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    // Let's do the magic
    // make sure to change #myBtn to read more button selector
    $(document).on("click", "#myBtn", function (e) {
    e.stopImmediatePropagation();
        e.preventDefault();
        // get url
        var url = $(this).attr('href');
        var container = $('#myModal').find('.content');
        var data = {
            action: 'show_product',
            url: url,

        };
             var baseurl="<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php";
            var ajaxurl = baseurl + ''; 
      
              $.post(ajaxurl, data, function(response) {
            // display the response
           // console.log(response);
            $(container).empty();
            $(container).html(response);
            modal.style.display = "block";
        });
     });
     });
  </script>
 <?php
  }
  add_action( 'wp_footer', 'pop_up' );
  add_action('wp_ajax_show_product', 'show_product_callback_wp');
  add_action( 'wp_ajax_nopriv_show_product', 'show_product_callback_wp' );
  function show_product_callback_wp() {
 $url = $_POST['url'];
 $product_id = url_to_postid( $url );
 // product content
 $content_post = get_post($product_id);
 $content = $content_post->post_content;

 $output .= get_the_post_thumbnail( $product_id);
?>
<div class="row">
<div class="woocommerce-product-gallery  col-sm-6">
    <?php echo $output;?>
</div>
<div class="summary col-sm-6">
    <?php
global $product;
        $title .= get_the_title( $product_id);
        $content = $content_post->post_content;
        $_product = wc_get_product( $product_id );
        $addtocart_url = '?add-to-cart='.$product_id;
        
        $_product->get_regular_price();
     
        $_product->get_sale_price();

        $price = $_product->get_price();
        $product = wc_get_product( $product_id );
        $rating  = $product->get_average_rating();
        $count   = $product->get_rating_count();

        $sku = $_product->get_sku();
        $stock = $_product->get_manage_stock();
        $stqty = $_product->get_stock_quantity();
        $ststatus = $_product->get_stock_status();
      
       
        $term_list = wp_get_post_terms( $product_id , 'product_cat' );
        ?>
      <h3><?php echo $title;?></h3>
     <div class="container-rating"> <?php echo wc_get_rating_html( $rating, $count );?></div>
  
    <span class="price">₹&lt;?php echo $price;?></span>
    <p><?php echo $content;?></p>
    <?php
   foreach ( $term_list as $term ) :
   echo '<p><strong>Categories:</strong> ' . $term->name . '</p>'; 
   endforeach;
  if($sku != ""){
    ?>
    <p class="sku"> <strong>Sku</strong> <?php echo $sku;?> </p>
    <?php } ?>
    <form action="<?php echo $addtocart_url; ?>" class="cart" method="post" 
       enctype='multipart/form-data'>
        <?php woocommerce_quantity_input(); ?>
        <button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
            class="button  ajax_add_to_cart add_to_cart_button product_type_simple">Add to 
        Cart</button>
        <a class="productbtn" href="<?php echo $url; ?>">View Product</a>
    </form>
    </div>
    </div>
 <?php

 exit(); 
 }

标签: ajaxwordpress

解决方案


推荐阅读