快速查看重定向到单个产品页面而不是快速查看弹出窗口答案

【问题标题】：Quick View redirect to single product page not the quick view popup快速查看重定向到单个产品页面而不是快速查看弹出窗口
【发布时间】：2021-10-08 12:19:53
【问题描述】：

有人可以帮我怎么做吗？我需要重写一些我需要的快速查看代码，如果有人按下他们被重定向到单个产品页面的快速查看图标，而不是快速查看弹出窗口。

第一步

第二步改为第三步的单步

【问题讨论】：

标签： wordpress woocommerce plugins

【解决方案1】：

您的快速视图应位于带有 data-target="" 的 <a> 标记中，其中 data-target 指的是模态弹出显示。

应该是这样的，

在您的<a> 标签中。

<a  class="gift" data-toggle="modal" data-title="<?php echo get_the_title();?>" data-content="<?php $content= get_the_content(); $content1=substr($content,0,20); echo wp_strip_all_tags($content1);  echo "...";?>" data-target="#gift_pop" data-price="<?php echo '&euro;'.$product->get_regular_price();?>" data-id="<?php echo $product->get_id();?>" data-image="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" data-link="<?php the_permalink(); ?>"> <img src="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" alt="">
                                               </a>

在<a>标签本身我们应该得到应该在模态弹出窗口中显示的数据。

这是我的模态弹出 html 代码。

<div class="modal" id="gift_pop" role="dialog">
                        <div class="modal__content">
                            <div class="modal__wrapper">
                                <a  class="modal__close" data-dismiss="modal">
                                    <img src="<?php echo get_template_directory_uri(); ?>/images/login_close.png" alt="">
                                </a>
                                <div class="product_popup">
                                 <div class="acc_img">
                                          <img id="product_pop" src="">
                                </div>
                                  <div class="acc_text">
                                            <p id="product_title_pop"></p>      
                                            <div class="pro_lrt _fl">
                                            <span id="product_price_pop"></span>
                                            </div> 

                                              <p  id="product_content_pop"></p> 
                                             <a id ="product_link_pop" href="">View Details.</a>
                                       
                                     </div>
                                 </div>
                            </div>
                        </div>
                    </div>

模态弹窗的 Id 应该是 data-target 值。

最后是附加我们在<a>标签中获得的数据的脚本。

  <script type="text/javascript">
    //to append values in modal popup
    $(".gift").click(function(){

    var postId = $(this).data('id');
    var image = $(this).data('image');
    var title = $(this).data('title');
    var content= $(this).data('content');
    var price= $(this).data('price');       
    var link= $(this).data('link');
    $('#product_pop').attr("src",image);
    $('#product_title_pop').html(title);
    $('#product_content_pop').html(content);
    $('#product_price_pop').html(price);
    $('#product_link_pop').attr("href",link);
    
});
   
</script>

就是这样！享受吧。

【讨论】：