AJAX请求后更新HTML内容：迷你购物车金额格式化问题

我们推出了商品捆绑购买折扣活动，但迷你购物车的金额显示存在以下问题：

• 使用Liquid变量 ${item.final_price} 和 ${item.line_level_total_discount} 时，无法添加 | money 过滤器——一旦添加，AJAX就无法实时更新金额，只有页面刷新时才会生效，导致金额缺少逗号分隔符。
• 我们尝试用JavaScript手动处理格式化，但现有方案依赖500ms延迟执行，无法和购物车其他更新内容同步，可靠性不足：

$(document).on('click', function() {
  setTimeout(function() {
    $('.cart_price span#finalprice').each(function() {
      $(this).text($(this).text().replace(/€/g, ''));
      if ($(this).text().indexOf(',') == -1) {
        $(this).text($(this).text().replace(/(\d{2})$/, ',$1'));
      }
      $(this).text($(this).text() + ' €');
    });
    $('.upsell_tag span').each(function() {
      $(this).text($(this).text().replace(/€/g, ''));
      if ($(this).text().indexOf(',') == -1) {
        $(this).text($(this).text().replace(/(\d{2})$/, ',$1'));
      }
      $(this).text($(this).text() + ' €');
    });
  }, 500);
});

我们需要的解决方案：

• 实现金额变化时实时添加逗号分隔符，与购物车其他更新同步
• 理想方案是通过AJAX将这两个Liquid变量转换为带 | money 格式的数值，且支持实时更新

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