我有一个模式对话框,显示用户何时将产品添加到购物车。我想在我的模式对话框中单击“更新购物车”按钮时自动显示此“迷你购物车”对话框,但我不知道该怎么做它。
我正在使用 Woocommerce,当单击更新购物车按钮时,页面会刷新(但不会自动显示模式对话框),我想知道在单击更新购物车并重新加载文档后如何执行此操作。
我已阅读使用 cookie 并检查值,如果设置则显示模式,我还想到了在购物车表单中添加隐藏输入的可能性,最后尝试在页面重新加载后在 url 末尾附加一个字符串. 这些对我来说都不是成功的,我只是不知道在单击该按钮并重新加载页面后如何执行 JS..
这是触发我的模态对话框的原因...
$('#shopModal').foundation('reveal', 'open');
这是整个 javascript **我的问题是页面重新加载后的 dom 重置,所以这实际上不会触发。你会看到我的方法在这里实现..
<script type="text/javascript">
jQuery(document).ready(function($) {
if(window.location.href.indexOf("?added-to-cart=") > 0) {
$('#shopModal').foundation('reveal', 'open');
}
//after update cart has been clicked
$('#update-cart').click(function() {
//SetCookie('CartUpdated','yes',1);
//ShowReveal();
var $el = $('a[href*="/"]');
$el.attr("href", $el.attr("href")+ "?added-to-cart=");
});
var updated_cart = $.cookie('CartUpdated');
if(updated_cart == 'yes' {
$('#shopModal').foundation('reveal', 'open');
}
function ShowReveal() {
$('#shopModal').foundation('reveal', 'open');
}
function SetCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var expire = new Date();
if (nDays==null || nDays==0) nDays=1;
expire.setTime(today.getTime() + 3600000*24*nDays);
document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();
}
function ReadCookie(cookieName) {
var theCookie=" "+document.cookie;
var ind=theCookie.indexOf(" "+cookieName+"=");
if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
if (ind==-1 || cookieName=="") return "";
var ind1=theCookie.indexOf(";",ind+1);
if (ind1==-1) ind1=theCookie.length;
return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}
});
});
</script>
这是缩写形式
<form action="<?php echo esc_url( $woocommerce->cart->get_cart_url() ); ?>" method="post">
<input id="update-cart" type="submit" class="button" name="update_cart" value="<?php _e( 'Update Cart', 'woocommerce' ); ?>" />
</form>
在页面重新加载后尝试将 ? added-to-cart= 之类的字符串应用于 url 会更好,最好设置一个 cookie 并检查其值然后执行,或者我可以用隐藏的输入字段做些什么?我尝试了所有这些但无法找出为什么它不起作用?