快速查看重定向到单个产品页面而不是快速查看弹出窗口
Quick View redirect to single product page not the quick view popup
有人可以帮我怎么做吗?我需要重写一些快速查看代码,如果有人按下快速查看图标,他们会被重定向到单个产品页面,而不是快速查看弹出窗口。
第一步
第二步变第三步单步
您的快速视图应位于带有 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 '€'.$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>
就是这样!享受。
有人可以帮我怎么做吗?我需要重写一些快速查看代码,如果有人按下快速查看图标,他们会被重定向到单个产品页面,而不是快速查看弹出窗口。
第一步
第二步变第三步单步
您的快速视图应位于带有 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 '€'.$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>
就是这样!享受。