单品页面onclick模态框

Question

我想在单个产品页面中创建一个 onclick 模式。我整理了以下内容：

文件
js/modal-jquery.js 和 modal-box.html 上传到 子主题 的目录中。 css 在子主题的 css 中。

我在 functions.php

中加入了 jquery

// Enqueue MODAL Jquery JS 
function my_enqueue_stuff() {
    if(is_singular( 'product' ))
    {
        wp_enqueue_script( 'modal-jquery-js', get_stylesheet_directory_uri() . '/js/modal-jquery.js');
// wp_enqueue_script( 'modal-box', get_stylesheet_directory_uri() . 'modal-box.html');
    }
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

LINK 在 functions.php

// POPUP LINK
    add_action( 'woocommerce_before_add_to_cart_form', 'popup-modal', 3 );
    function popup-modal() { 
        // $file = file directory to modal-box.html
        echo '<a class="js-open-modal" href="#" data-modal-id="popup"> Click me </a>';
    }

模态-box.html

<div id="popup" class="modal-box">  
  <header>
    <a href="#" class="js-modal-close close">×</a>
    <h3>Modal Title</h3>
  </header>
  <div class="modal-body">
    <p>Modal Body</p>
  </div>
  <footer>
    <a href="#" class="js-modal-close">Close Button</a>
  </footer>
</div>

我不确定这是否是正确的方法。

我一直在尝试将 modal-box.html 添加到 function popup-modal() 中。我也试过入队 modal-box.html 但它给出了一条错误消息 Uncaught SyntaxError: expected expression, got '<'

如何将 html 文件作为外部文件加载到单个产品页面中？如果这不是正确的做法，如何在单品页面添加模态框？

谢谢

Answer 1

而不是 is_singular( 'product' ) 使用 woocommerce 自己的 is_product()

对于模式，将其包含在页脚中如何，也仅在产品页面上，像这样？:

function your_modal_footer(){
  if( !is_product() ){
     return;
  }
?>
<div id="popup" class="modal-box">  
  <header>
    <a href="#" class="js-modal-close close">×</a>
    <h3>Modal Title</h3>
  </header>
  <div class="modal-body">
    <p>Modal Body</p>
  </div>
  <footer>
    <a href="#" class="js-modal-close">Close Button</a>
  </footer>
</div>
<?php
}
add_action('wp_footer', 'your_modal_footer');

我会在弹出窗口 div 中添加一个 style="display:none;"，然后在单击弹出窗口触发器时使其可见。

单品页面onclick模态框

onclick Modal box in single product page

php

wordpress

jquery

woocommerce

hook-woocommerce