在 WordPress 的购物页面上添加弹出表单

Question

我想在 WordPress 购物页面上制作一个弹出 onclick 处理程序。我在我的 functions.php 文件中使用此代码：

``function insert_anchor_tag_after_product() { echo 'Get Offer'; } add_action( 'woocommerce_after_shop_loop_item', 'insert_anchor_tag_after_product', 15 ); ?>

` document.addEventListener("DOMContentLoaded", function() {`
 const modalLinks = document.querySelectorAll('.open-modal-link');

    modalLinks.forEach(link =\> {

        link.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent the default link behavior (opening in a new tab)
            const postID = this.getAttribute('data-post-id'); // Get the post ID from the data attribute

            const popupURL = 'https://creatorapp.zohopublic.com.au/clevaco/customer-data-form/form-perma/Reason_For_Seeking_Advice/P8By9m6A5RKksRPpmWFz\`your text\`JMXHh3ha1eQOdC6yqMW1z8DswU2mrCPOmPeWDJafAhtXXbX3MjkS0peAW2M4q2qSGUFVB50qs43qNn3N?Your_purpose_for_seeking_advice=' + postID;

            const popupWindow = window.open(popupURL, '\_blank', 'height=400,width=300,top=100,left=100,resizable=yes,scrollbars=yes');
            if (popupWindow) {
                popupWindow.focus();
            }
        });
    });
});

Answer 1

看起来您正在尝试在用户单击 WordPress 商店页面中的链接时创建弹出窗口。您的代码似乎是 PHP 和 JavaScript 的混合体。但是，为了使其正常工作，可以提出一些问题和改进：

functions.php 中的 PHP 函数： 您的 PHP 函数直接回显“获取报价”。相反，您应该创建一个具有适当的类和数据属性的锚标记，这些属性可以由您的 JavaScript 代码定位。以下是修改 PHP 函数的方法：

php
function insert_anchor_tag_after_product() {
    global $product;
    $post_id = $product->get_id();
    echo '<a href="#" class="open-modal-link" data-post-id="' . $post_id . '">Get Offer</a>';
}
add_action('woocommerce_after_shop_loop_item', 'insert_anchor_tag_after_product', 15);

JavaScript代码： 您的 JavaScript 代码大部分是正确的，但存在一个小语法问题。应该是 link =>，而不是 link =>。这是更正后的版本：

javascript 复制代码 document.addEventListener("DOMContentLoaded", function() { const modalLinks = document.querySelectorAll('.open-modal-link');

modalLinks.forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent the default link behavior (opening in a new tab)
        const postID = this.getAttribute('data-post-id'); // Get the post ID from the data attribute
        
        const popupURL = 'https://creatorapp.zohopublic.com.au/clevaco/customer-data-form/form-perma/Reason_For_Seeking_Advice/P8By9m6A5RKksRPpmWFzJMXHh3ha1eQOdC6yqMW1z8DswU2mrCPOmPeWDJafAhtXXbX3MjkS0peAW2M4q2qSGUFVB50qs43qNn3N?Your_purpose_for_seeking_advice=' + postID;
        
        const popupWindow = window.open(popupURL, '_blank', 'height=400,width=300,top=100,left=100,resizable=yes,scrollbars=yes');
        if (popupWindow) {
            popupWindow.focus();
        }
    });
});

}）； 通过进行这些更改，您的 PHP 函数将创建具有所需属性的锚标记，并且您的 JavaScript 代码将正确侦听这些链接上的点击，并使用正确的 URL 打开弹出窗口。确保您已将 JavaScript 代码包含在页面或模板的标记内。