将模式添加到woocommerce添加到购物车按钮 [英] add modal to woocommerce add to cart button

查看:96
本文介绍了将模式添加到woocommerce添加到购物车按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用woocommerce建立一个wordpress网站.

I am building a wordpress site with woocommerce.

我想添加一个可选的保险产品,当客户单击特定产品的添加到购物车"时,该产品会弹出.他们的想法是,他们必须先接受或拒绝该产品,然后才能继续进行结帐.

I want to add an optional insurance product that pops up when a customer clicks on 'add to cart' for a particular product. The idea is that they have to accept or decline this product before they continue to the checkout.

我尝试使用引导程序模式,但无法使用添加到购物车"按钮来触发它. Modal可以作为页面中内置的特定模式按钮正常工作,因此我知道这不是jquery或bootstrap的问题,但我不知道如何将其链接到添加到购物车"按钮.

I have tried using bootstrap modal but I can't get it to trigger using the add to cart button. Modal is working fine as a specific modal button built into the page, so I know it's not a problem with jquery or bootstrap, but I can't figure out how link it to the add to cart button.

似乎已经应该内置到woocommerce中,但是如果我错过了它.

Seems like something that should be built-in to woocommerce already but if it is I've missed it.

任何帮助都很感激...

Any help much appreciated...

推荐答案

我最终将模式设置为在打开购物车页面时触发,因为购物车页面是Wordpress,因此很简单.这不是一个完美的解决方案,因为当客户去购买任何产品时,模态现在打开,但是总比没有好. 这是带有默认内容的代码

I ended up setting the modal to trigger when the cart page opened, as the cart page is Wordpress it was straight-forward. Not the perfect solution as the modal now opens when a customer goes to buy any product, but it's better than nothing. here's the code with the default content

<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页面中.

I inserted all this directly in the 'your cart' wordpress page.

工作正常,但我很想听听更好的解决方案

Works fine, but I'd love to hear a better solution

这篇关于将模式添加到woocommerce添加到购物车按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆