WooCommerce Composite Products加载完成JS钩子咨询

问题背景 #

我在用WooCommerce的Composite Products和Product Bundles插件，自定义JS代码必须加超时才能生效，想找Composite Products完全加载时触发的JS钩子（比如onLoad/onReady这类）——超时方案对不同网速的用户体验太差。需求包括修改导航样式、选中产品时修改购物项背景色等。

原超时版代码示例 #

选中产品修改背景色（需2秒超时）

jQuery(document).ready(function() {
   setTimeout(function(){            
   jQuery(".bundled_product_checkbox").change(function() {
      if (jQuery(this).prop("checked")) {                
        jQuery(this).closest(".bundled_product").css({
         "background-color": "#dff1e8",                              
         "border": "1px solid #80AE98",
        });
      } else {
        jQuery(this).closest(".bundled_product").css({
          "background-color": "",
          "border": "1px solid #E8E8E8",
        });
      }
    });
  }, 2000);
});

导航添加data属性（无超时无法找到元素）

jQuery(document).ready(function () {
  var osnova1 = jQuery(".pagination_element a:contains('Osnova 1')");
  var osnova2 = jQuery(".pagination_element a:contains('Osnova 2')");
  var orasastiPlodovi = jQuery(".pagination_element a:contains('Orašasti plodovi')");
  var ostalo = jQuery(".pagination_element a:contains('Ostalo')");
  var proteini = jQuery(".pagination_element a:contains('Proteini')");
  var dressings = jQuery(".pagination_element a:contains('Dressings')");
  var exclusiveDodaci = jQuery(".pagination_element a:contains('Exclusive dodaci')");
  var pregledajIporuci = jQuery(".pagination_element a:contains('Pregledaj i poruči')");
  osnova1.closest("li.pagination_element").attr("data-item", "osnova-1");
  osnova2.closest("li.pagination_element").attr("data-item", "osnova-2");               
  orasastiPlodovi.closest("li.pagination_element").attr("data-item", "orasasti-plodovi");
  ostalo.closest("li.pagination_element").attr("data-item", "ostalo");                    
  proteini.closest("li.pagination_element").attr("data-item", "protein");                       
  dressings.closest("li.pagination_element").attr("data-item", "dressings");               
  exclusiveDodaci.closest("li.pagination_element").attr("data-item", "exclusive-dodaci");                            
  pregledajIporuci.closest("li.pagination_element").attr("data-item", "pregledaj-i-poruči");
});

移动端导航选择器（需1秒轮询）

<select id="itemSelector">
      <option class="item active" value="osnova-1">Osnova 1</option>
      <option class="item" value="osnova-2" disabled>Osnova 2</option>
      <option class="item" value="orasasti-plodovi" disabled>Orašasti plodovi</option>
      <option class="item" value="ostalo" disabled>Ostalo</option>
      <option class="item" value="proteini" disabled>Proteini</option>
      <option class="item" value="dressings" disabled>Dressings</option>
      <option class="item" value="exclusive-dodaci" disabled>Exclusive dodaci</option>
      <option class="item" value="pregledaj-i-poruči" disabled>Pregledaj i poruči</option>
    </select>

jQuery(document).ready(function ($) {
      function updateSelectedOption() {
        const currentLi = $("li.pagination_element_current");
        if (currentLi.length) {
          const currentItem = currentLi.data("item");
          $('#itemSelector option').prop('disabled', true);
          $(`#itemSelector option[value="${currentItem}"]`).prop('disabled', false);
        }
      }
      updateSelectedOption();
      setInterval(updateSelectedOption, 1000);
    });

解决方案：使用官方JS钩子 #

这两个插件都提供了专属的JS事件钩子，完全替代超时/轮询方案：

• Composite Products 加载完成：wc-composite-products-init（复合产品DOM和逻辑初始化完成后触发）
• Product Bundles 加载完成：wc-product-bundles-init（捆绑产品组件加载完成后触发）
• 复合产品导航切换：wc-composite-navigation-updated（导航切换后触发，替代轮询）

修改后的代码示例 #

1. 选中产品修改背景色（无超时）

jQuery(document).on('wc-composite-products-init wc-product-bundles-init', function() {
    // 先解绑避免重复绑定
    jQuery(".bundled_product_checkbox").off('change').on('change', function() {
        const $productItem = jQuery(this).closest(".bundled_product");
        if (jQuery(this).prop("checked")) {                
            $productItem.css({
                "background-color": "#dff1e8",                              
                "border": "1px solid #80AE98",
            });
        } else {
            $productItem.css({
                "background-color": "",
                "border": "1px solid #E8E8E8",
            });
        }
    });
});

2. 导航添加data属性（无超时）

jQuery(document).on('wc-composite-products-init', function() {
    // 用数组简化代码，更易维护
    const navConfig = [
        { text: 'Osnova 1', dataAttr: 'osnova-1' },
        { text: 'Osnova 2', dataAttr: 'osnova-2' },
        { text: 'Orašasti plodovi', dataAttr: 'orasasti-plodovi' },
        { text: 'Ostalo', dataAttr: 'ostalo' },
        { text: 'Proteini', dataAttr: 'protein' },
        { text: 'Dressings', dataAttr: 'dressings' },
        { text: 'Exclusive dodaci', dataAttr: 'exclusive-dodaci' },
        { text: 'Pregledaj i poruči', dataAttr: 'pregledaj-i-poruči' }
    ];

    navConfig.forEach(item => {
        jQuery(`.pagination_element a:contains('${item.text}')`)
            .closest("li.pagination_element")
            .attr("data-item", item.dataAttr);
    });
});

3. 移动端导航选择器（无轮询）

<select id="itemSelector">
    <option class="item active" value="osnova-1">Osnova 1</option>
    <option class="item" value="osnova-2" disabled>Osnova 2</option>
    <option class="item" value="orasasti-plodovi" disabled>Orašasti plodovi</option>
    <option class="item" value="ostalo" disabled>Ostalo</option>
    <option class="item" value="proteini" disabled>Proteini</option>
    <option class="item" value="dressings" disabled>Dressings</option>
    <option class="item" value="exclusive-dodaci" disabled>Exclusive dodaci</option>
    <option class="item" value="pregledaj-i-poruči" disabled>Pregledaj i poruči</option>
</select>

jQuery(document).ready(function ($) {
    function updateSelectedOption() {
        const currentLi = $("li.pagination_element_current");
        if (currentLi.length) {
            const currentItem = currentLi.data("item");
            $('#itemSelector option').prop('disabled', true);
            $(`#itemSelector option[value="${currentItem}"]`).prop('disabled', false);
        }
    }

    // 初始化执行+监听导航切换事件
    updateSelectedOption();
    $(document).on('wc-composite-navigation-updated', updateSelectedOption);
});

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