在WooCommerce商店页面动态添加自定义HTML与模态框：PHP实现指南

/**
 * 在WooCommerce商店页面主内容之前添加自定义模态框HTML。
 * 模态框默认隐藏，并通过内联JS进行控制。
 */
function custom_shop_page_modal_html() {
    // 使用 is_shop() 确保代码只在WooCommerce商店页面执行
    if ( is_shop() ) {
        ?>
        <div id="custom-shop-modal" class="your-modal-class" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; z-index: 9999; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
            <h2>欢迎来到我们的商店！</h2>
            <p>这里是您可能感兴趣的特别优惠信息。</p>
            <button class="close-modal-button" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const modal = document.getElementById("custom-shop-modal");
                const closeButton = modal.querySelector(".close-modal-button");

                // 示例：在页面加载后2秒显示模态框
                // 实际应用中，您可能希望通过用户行为（如滚动、点击）或cookie判断来触发
                setTimeout(() => {
                    modal.style.display = "block";
                }, 2000); 

                // 关闭按钮事件
                closeButton.addEventListener("click", () => {
                    modal.style.display = "none";
                });

                // 点击模态框外部关闭（可选）
                window.addEventListener("click", function(event) {
                    if (event.target === modal) {
                        modal.style.display = "none";
                    }
                });
            });
        </script>
        <?php
    }
}
// 将函数挂载到 woocommerce_before_main_content 钩子
// 优先级设为 10，确保它在其他默认内容之前加载
add_action( 'woocommerce_before_main_content', 'custom_shop_page_modal_html', 10 );

// 其他可选的WooCommerce钩子包括：
// add_action( 'woocommerce_after_main_content', 'custom_shop_page_modal_html', 10 );
// add_action( 'woocommerce_archive_description', 'custom_shop_page_modal_html', 10 ); // 在归档页面描述之后

/**
 * 在wp_head中将模态框HTML作为JS变量提供。
 * 仅在商店页面加载此JS变量。
 */
function add_modal_html_as_js_variable() {
    if ( is_shop() ) { // 同样使用条件判断确保只在商店页面加载
        ?>
        <script>
            // 使用反引号定义多行字符串，方便编写HTML
            var customShopModalHTML = `
                <div id="custom-shop-modal-js" class="your-modal-class-js" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #f9f9f9; padding: 25px; border-radius: 8px; box-shadow: 0 6px 12px rgba(0,0,0,0.3); z-index: 10000;">
                    <h3>JS动态模态框！</h3>
                    <p>此内容通过JavaScript从头部加载并动态插入到页面中。</p>
                    <button class="close-modal-button-js" style="position: absolute; top: 12px; right: 12px; background: none; border: none; font-size: 22px; cursor: pointer; color: #555;">&times;</button>
                </div>
            `;

            // 示例：定义一个函数来显示模态框
            function showDynamicShopModal() {
                let modalElement = document.getElementById('custom-shop-modal-js');
                if (!modalElement) {
                    // 如果模态框不存在，则创建并插入
                    document.body.insertAdjacentHTML('beforeend', customShopModalHTML);
                    modalElement = document.getElementById('custom-shop-modal-js');

                    // 绑定关闭事件
                    modalElement.querySelector(".close-modal-button-js").addEventListener("click", () => {
                        modalElement.style.display = "none";
                    });
                }
                modalElement.style.display = 'block';
            }

            // 示例：在页面加载后3秒触发显示
            document.addEventListener('DOMContentLoaded', () => {
                setTimeout(showDynamicShopModal, 3000);
            });

            // 您也可以通过其他事件（如点击按钮）来调用 showDynamicShopModal()