onclick 单个产品页面中的模态框

Posted 2023-05-08

【中文标题】onclick 单个产品页面中的模态框

【英文标题】：onclick Modal box in single product page

【发布时间】：2021-12-20 15:14:30

【问题描述】：

我想在单个产品页面中创建一个 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' );

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>';
    

modal-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 文件作为外部文件加载到单个产品页面中？如果这不是正确的做法，如何在单个产品页面中添加模态框？

谢谢

【参考方案1】：

使用woocommerce自己的is_product()代替is_singular( '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;"，然后让它在弹出的触发器的点击时可见。

【讨论】：

谢谢！请问为什么它只在页脚有效？我已经尝试过标题和正文，但它们都不起作用。

我认为说在页眉或页脚中添加同样的东西不起作用是不正确的，因为在这个意义上它实际上是完全相同的——在所有情况下，你只是在注入页面上有一点html。所有位置都有效，页脚通常用于模式，以防止延迟加载页面上较早的元素，至少在完成加载之前不会看到。

@PlainH2O 您也可以使用相同的功能，只需将 wp_footer 操作挂钩替换为 wp_head 以在标题中注入模态 developer.wordpress.org/reference/hooks/wp_head 您可以使用特定于您正在使用的主题或插件的挂钩将其注入体内。希望这是有道理的？

谢谢！然后很可能是我正在使用的主题。我想知道为什么我在尝试使用正文和页眉时出现此错误Uncaught SyntaxError: expected expression, got '<'，但它在页脚中有效。非常感谢您的帮助！

@PlainH2O WordPress 和 PHP 是我的专长，如果您再次需要帮助，请随时联系我们 :) 此外，当有疑问时，官方 WP 文档通常是一个很好的资源。跨度>