如何用HTML/JS跨页面提取并在Elementor展示Tera Wallet余额

方案一：前端JavaScript抓取（快速实现） #

适合同一域名下的页面，通过前端请求余额页面并解析HTML提取余额：

实现代码 #

在Elementor页面的自定义JavaScript区域（或通过自定义HTML模块添加）插入以下代码：

// 替换为你的钱包余额页面实际URL
const balancePageUrl = 'https://你的网站域名.com/钱包页面路径';

document.addEventListener('DOMContentLoaded', async () => {
    const displayEl = document.getElementById('balance-display');
    try {
        const res = await fetch(balancePageUrl);
        if (!res.ok) throw new Error('页面请求失败');
        
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const balanceEl = doc.querySelector('.woo-wallet-price .woocommerce-Price-amount');
        
        if (balanceEl) {
            displayEl.textContent = balanceEl.textContent.trim();
        } else {
            displayEl.textContent = '无法获取余额';
        }
    } catch (err) {
        console.error('余额获取错误:', err);
        displayEl.textContent = '获取余额失败';
    }
});

注意事项 #

• 必须确保两个页面在同一域名下，否则会触发浏览器跨域限制
• 依赖余额页面的HTML结构，若Tera Wallet插件更新后结构变化，需同步调整选择器
• 若页面有缓存，可能无法实时显示最新余额

方案二：WordPress后端调用（更可靠） #

直接调用Tera Wallet插件的官方函数获取余额，避免前端解析的不稳定问题：

步骤1：添加自定义短代码 #

在当前主题的functions.php文件末尾插入以下PHP代码：

function tera_wallet_balance_shortcode() {
    // 检查插件是否激活
    if (function_exists('woo_wallet')) {
        // 获取当前登录用户的钱包余额
        $user_balance = woo_wallet()->wallet->get_balance(get_current_user_id());
        // 用WooCommerce自带的价格格式化函数输出带货币符号的余额
        return wc_price($user_balance);
    }
    return '无法获取余额';
}
add_shortcode('tera_wallet_balance', 'tera_wallet_balance_shortcode');

步骤2：在Elementor页面使用短代码 #

修改Elementor页面的目标元素，直接插入短代码：

<div class="elementor-text-class">Current Wallet Balance: <span id="balance-display">[tera_wallet_balance]</span></div>

优势 #

• 调用插件官方API，结构变更也不易失效
• 自动处理用户登录状态，仅显示当前用户的余额
• 无需额外前端请求，性能更优且无跨域问题

内容的提问来源于stack exchange，提问作者GESAN