Загружать скрипт исключительно на отдельных страницах WooCommerce. - PullRequest
5 голосов
/ 06 марта 2019

Я использую модал на страницах моего отдельного продукта WooCommerce для отображения дополнительной информации для пользователей, которая отображается только на странице сведений о продукте. Это также работает, но скрипт ниже загружен везде, поэтому я получаю сообщение об ошибке:

Uncaught TypeError: Невозможно установить свойство 'onclick' для 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";
    }
}

1 Ответ

3 голосов
/ 06 марта 2019

Чтобы ограничить что-либо на отдельных страницах товара, используйте is_product() в выражении IF, например:

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

См. Условные теги Woocommerce

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...