Question

我正在建立一个带有woocommerce的wordpress网站。

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

我尝试过使用bootstrap模式，但我无法使用add to cart按钮触发它。 Modal作为页面内置的特定模式按钮工作正常，所以我知道它不是jquery或bootstrap的问题，但我无法弄清楚如何将它链接到add to cart按钮。

看起来像是应该内置于woocommerce的东西，但如果它是我错过了它。

任何帮助都非常感谢...

Answer 1

我最终设置模式在购物车页面打开时触发，因为购物车页面是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 2

woocommerce add to cart popup

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

希望这有帮助！

Answer 3

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

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

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

3 个答案: