WordPress&WooCommerce：点击颜色色板切换预览图及优化问题

问题概述 #

• 仅实现了黑色色板的预览图切换，无法扩展到其他色板
• 无法让脚本仅在特定分类的产品页面加载
• 想了解当前实现的性能，以及页面加载优化方案
• 现有可行代码存在bug：点击其他产品属性或输入框时，预览图src变为undefined导致图片损坏

之前的代码尝试 #

初始实现代码 #

add_action( 'woocommerce_before_single_product', 'bluetera_swatch_onclick' );

function bluetera_swatch_onclick() { ?>

    <script type='text/javascript'>
        var input = document.getElementById("ecorigidswatches_Black");
        input.onclick = function swapproductimg() {
        document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg";

}

    </script>
    <?php
}

无效的条件判断代码 #

var black = document.getElementById("ecorigidswatches_Black");
var berry = document.getElementById("ecorigidswatches_Berry");
if (berry.checked = true) {
  document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg";
} elseif (black.checked = true) {
  document.getElementById('selected-swatch').src="https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg";
}

部分可行但有bug的代码 #

add_action( 'woocommerce_before_single_product', 'bluetera_swatch_onclick' );

function bluetera_swatch_onclick() { ?>

    <script type='text/javascript'>
        
        
  
  const images = {
    'ecorigidswatches_Berry':"https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg",
    'ecorigidswatches_Black':"https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg", 
    'ecorigidswatches_Brown':"https://www.laserfelt.com/wp-content/uploads/2021/06/BrownHexagon.jpg"
  };
  
  //select all elements with data-color attribute
  const swatch = document.querySelectorAll('[id]'); 

  swatch.forEach(element => {
    element.addEventListener('click', () => {
      let color = element.getAttribute('id');
      document.getElementById("selected-swatch").src = images[color];
    });
  });
  

    </script>
    <?php
}

完整解决方案 #

1. 修复点击其他元素导致的图片损坏问题 #

问题出在document.querySelectorAll('[id]')会选中页面上所有带ID的元素，点击非色板元素时images[color]无对应值，返回undefined。需要精准筛选色板元素：

const images = {
  'ecorigidswatches_Berry':"https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg",
  'ecorigidswatches_Black':"https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg", 
  'ecorigidswatches_Brown':"https://www.laserfelt.com/wp-content/uploads/2021/06/BrownHexagon.jpg"
};

// 仅选择ID以ecorigidswatches_开头的色板元素
const swatches = document.querySelectorAll('[id^="ecorigidswatches_"]'); 

swatches.forEach(element => {
  element.addEventListener('click', () => {
    const colorId = element.getAttribute('id');
    // 先判断对应图片是否存在，避免undefined
    if (images[colorId]) {
      document.getElementById("selected-swatch").src = images[colorId];
    }
  });
});

2. 让脚本仅在特定分类的产品页面加载 #

在PHP函数中添加分类判断逻辑，仅目标分类产品页面加载脚本：

add_action( 'woocommerce_before_single_product', 'bluetera_swatch_onclick' );

function bluetera_swatch_onclick() {
    global $product;
    // 替换为你的目标分类slug或ID
    $target_category = 'acoustic-tiles';
    
    // 检查产品是否属于目标分类
    if ( has_term( $target_category, 'product_cat', $product->get_id() ) ) {
        ?>
        <script type='text/javascript'>
            const images = {
              'ecorigidswatches_Berry':"https://www.laserfelt.com/wp-content/uploads/2021/06/BerryHexagon.jpg",
              'ecorigidswatches_Black':"https://www.laserfelt.com/wp-content/uploads/2021/06/BlackHexagon.jpg", 
              'ecorigidswatches_Brown':"https://www.laserfelt.com/wp-content/uploads/2021/06/BrownHexagon.jpg"
            };

            const swatches = document.querySelectorAll('[id^="ecorigidswatches_"]'); 

            swatches.forEach(element => {
              element.addEventListener('click', () => {
                const colorId = element.getAttribute('id');
                if (images[colorId]) {
                  document.getElementById("selected-swatch").src = images[colorId];
                }
              });
            });
        </script>
        <?php
    }
}

3. 性能优化建议 #

• 延迟加载脚本：将钩子改为wp_footer，避免阻塞首屏渲染：

  add_action( 'wp_footer', 'bluetera_swatch_onclick' );
  

• 事件委托优化：兼容动态生成的色板，减少事件绑定数量：

  document.addEventListener('click', (e) => {
    const target = e.target;
    if (target.id && target.id.startsWith('ecorigidswatches_')) {
      const colorId = target.id;
      if (images[colorId]) {
        document.getElementById("selected-swatch").src = images[colorId];
      }
    }
  });
  

• 预加载预览图：提前加载所有图片，避免切换时的加载延迟：

  Object.values(images).forEach(src => {
    const img = new Image();
    img.src = src;
  });
  

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