javascript - AJAX 调用后将 'table' 类应用到 WooCommerce 表

Question

WooCommerce-tables 附带了如下开箱即用的类:shop_table shop_table_responsive cart woocommerce-cart-form__contents。所以没有表类，这意味着没有漂亮的引导表。

哈!

既然只有在绝对必要时才应该覆盖 WooCommerce 模板，那么让我们用 JavaScript 来解决它!

我的整个网站由 Vue-div 封装，如下所示:

<div id="app">
  ...
  <table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents">
    ...
    ...
  </table>
  ... 
</div>

所以最初我编写了这段代码，将 table 类添加到所有表:

let tableSelectors = [
  '.some-class table',
  '.woocommerce-product-attributes',
  '.woocommerce-cart-form > table'
];
for( let t = 0; t < tableSelectors.length; t++ ){
  let tables = document.querySelectorAll( tableSelectors[t] );
  if( tables ){
    for( let i = 0; i < tables.length; i++ ){
      tables[i].classList.add( 'table' );
    }
  }
}

...将其放入 mounted(){ ... } 部分。

成功了!到目前为止，一切都很好。

但是 WooCommerce 大量使用 jQuery。在购物车页面上，如果我更改数量(并按“更新”)，则会使用 AJAX 更新表格内容。如果您好奇它是如何工作的，那么您可以查看 here .

当运行时，我假设 WooCommerce 获取初始购物车模板并重新加载整个表；没有新添加的table类。呸骗子!

那么我该如何解决这个问题呢？

1. 我可以覆盖 WooCommerce ./cart/cart.php-模板并添加类到模板。添加一个类似乎有点矫枉过正。

2. 我可以每秒(大约)扫描 DOM 中的表，并应用表类(如果不存在)。不太酷...无论是使用 jQuery 还是 Vue 完成。

由于整个表在 DOM 中被替换，因此无法监视当前表(在 Vue 中使用 watch(){...} )并在类发生更改时应用该类，因为它永远不会改变(被替换)。

我找不到可以使用的 Hook。

我还尝试使用ajaxComplete，但我可以在网络选项卡中看到 XHR 请求正在触发，但这里的代码从未执行任何操作(在控制台中):

jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
    console.log( 'Test' );
});

还有其他建议吗？

Answer 1

您可以使用Mutation Observer API监听包装元素内容的更改并重新应用表类。

这个例子几乎是逐字摘自 sample code on MDN 。单击该按钮会替换 div 的内容，您可以从控制台输出中看到它会触发观察者回调。

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = {
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

function doUpdate() {
  targetNode.innerText = Math.random();
}

document.querySelector('button').addEventListener('click', doUpdate);

<div id="some-id">(container)</div>
<button>change</button>