gpt4 book ai didi

javascript - 在 WooCommerce 单个产品页面上专门加载脚本

转载 作者:太空狗 更新时间:2023-10-29 16:03:40 26 4
gpt4 key购买 nike

我在我的 WooCommerce 单个产品页面上使用模式来为用户显示附加信息,这些信息仅在产品详细信息页面上可见。它也可以工作,但是下面的脚本随处加载,所以我收到错误消息:

Uncaught TypeError: Cannot set property 'onclick' of null

当有人点击产品详细信息页面之外的某处时。是否可以仅在产品详细信息页面加载脚本?

我的 HTML:

 <button id="myBtn" class="help-link">Brauchen Sie Hilfe?</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close"><i class="nm-font nm-font-close2"></i></span>
<h4>Brauchen Sie Hilfe?</h4>
<p>Sollten Sie Fragen zu Produkten haben, oder Hilfe bei der Konfiguration benötigen, steht unser Kundenservice Ihnen gerne zur Verfügung.</p>
<p>Erreichbar von Montag bis Freitag<br>10:00 - 18:00 <br>Tel.:040/655 646 91</p>
</div>
</div>

脚本:

// Modal 

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

最佳答案

要限制单个产品页面中的某些内容,请仅在 IF 语句中使用 is_product(),例如:

<?php if ( is_product() ) { ?>
// your script goes here
<?php } ?>

参见 Woocommerce conditional tags

关于javascript - 在 WooCommerce 单个产品页面上专门加载脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55018696/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com