将模态添加到 woocommerce 添加到购物车按钮

Question

我正在使用 woocommerce 构建一个 wordpress 网站。

我想添加一个可选的保险产品，当客户点击特定产品的“添加到购物车”时会弹出该产品。这个想法是，他们必须在继续结账之前接受或拒绝该产品。

我尝试使用引导模式，但无法使用添加到购物车按钮触发它。 模态作为页面中内置的特定模态按钮工作正常，所以我知道这不是 jquery 或引导程序的问题，但我不知道如何将它链接到添加到购物车按钮。

似乎应该已经内置到 woocommerce 中，但如果是的话，我已经错过了。

非常感谢任何帮助...

Answer 1

通过添加查询来检查当前 url 是否包含字符串“add-to-cart”，您可以在商店页面中显示模式。您还应该取消选中“成功添加后重定向到购物车页面”：WooCommerce > 设置 > 产品 > 显示。

<script>
jQuery(document).ready(function () {
    if (window.location.href.indexOf("add-to-cart") != -1){
        $('#cartModal').modal('show');
    }
});
</script>   

Answer 2

我最终将模式设置为在购物车页面打开时触发，因为购物车页面是 Wordpress，它是直截了当的。不是完美的解决方案，因为现在当客户去购买任何产品时会打开模式，但总比没有好。 这是默认内容的代码

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>     

和js

<script>
 jQuery(document).ready(function($) {
 $(document).ready(function(){
 $('#myModal').modal('show')
 });
  });
 </script>

我将所有这些都直接插入了“您的购物车”wordpress 页面。

工作正常，但我希望听到更好的解决方案

Answer 3

woocommerce add to cart popup

使用此插件生成弹出窗口。

希望这会有所帮助！