Prestashop商品描述图片悬停文本优化问题求助

一、优化JS脚本（解决ALT文本格式&undefined问题） #

替换原有自动添加ALT的脚本，这段代码会处理文件名格式、避免undefined，并同时设置alt和title属性（确保悬停文本一致）：

document.addEventListener('DOMContentLoaded', function() {
  // 精准定位商品描述区域内的图片
  const productImages = document.querySelectorAll('.product-description img');
  
  productImages.forEach(img => {
    // 跳过已手动设置ALT的图片
    if (img.alt.trim()) return;
    
    const imgSrc = img.getAttribute('src');
    // 跳过无有效路径的图片，避免undefined
    if (!imgSrc) return;
    
    // 从URL中提取文件名
    const fileName = imgSrc.split('/').pop();
    if (!fileName) return;
    
    // 清理文件名：移除后缀、替换横线为空格、格式化首字母大写
    const cleanText = fileName
      .replace(/\.(jpg|jpeg|png|gif)$/i, '') // 移除常见图片后缀
      .replace(/-/g, ' ') // 把横线替换成空格
      .replace(/\b\w/g, char => char.toUpperCase()); // 每个单词首字母大写
    
    // 同时设置ALT（SEO友好）和TITLE（悬停文本）
    img.setAttribute('alt', cleanText);
    img.setAttribute('title', cleanText);
  });
});

关键优化点： #

• 跳过已有ALT的图片，避免覆盖手动设置的内容
• 增加空值判断，彻底解决测试环境的undefined问题
• 文件名格式化逻辑：自动移除图片后缀、替换横线为空格，让悬停文本更友好
• 同时设置alt和title，兼顾SEO和前端交互体验

二、HTML模板调整（确保选择器精准） #

打开Prestashop的商品描述模板文件（通常是themes/[你的主题]/templates/catalog/product/product-description.tpl），确保描述容器有明确的类名，方便JS精准定位：

<div class="product-description">
  {$product.description nofilter}
</div>

如果已有这个结构可以跳过，这一步是为了避免脚本影响网站其他区域的图片。

三、CSS自定义悬停样式（可选） #

默认浏览器的title悬停样式不够美观，可以用CSS自定义提示框：

.product-description img {
  cursor: help; /* 悬停显示帮助光标，提示用户有额外信息 */
}

.product-description img[title]:hover {
  position: relative;
}

.product-description img[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 9999;
  margin-bottom: 5px;
}

/* 加个小三角，让提示框更美观 */
.product-description img[title]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2c3e50;
}

四、测试环境undefined问题额外排查 #

如果测试环境仍出现undefined，检查以下两点：

• 测试环境的商品描述图片是否正常上传，src属性是否有有效路径
• 确认JS脚本是在DOM加载完成后执行（代码里用了DOMContentLoaded，已经处理这个问题）

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