仅在 WooCommerce 单一产品页面上加载脚本

Posted 2023-03-05

【中文标题】仅在 WooCommerce 单一产品页面上加载脚本

【英文标题】：Load a script exclusively on WooCommerce single product pages

【发布时间】：2019-07-27 20:35:57

【问题描述】：

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

未捕获的 TypeError：无法设置属性 '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.:[phone]</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() ) ... 抱歉，我的javascript不太好

【参考方案1】：

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

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

见Woocommerce conditional tags