Shopify产品页Custom Product Builder插件手风琴功能失效排查求助

算力阿峰

2026-7-18

问题排查：Shopify Custom Product Builder手风琴交互失效

问题背景

我们的Shopify主题原生支持通过H5标签将产品描述转换为手风琴组件，但为部分产品启用Custom Product Builder插件后，插件仅能读取并展示产品描述，无法实现H5标签转手风琴的交互功能。此前定制的功能在切换新主题后丢失，从theme.liquid找回代码后，标题、内容及SVG图标可正常显示，但手风琴点击展开/收起的交互完全失效。

原代码

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<script>
var handle1 = setInterval(function(){
$('.cpb-product-description h5').nextUntil("h5").addClass('invalid');
if($('.cpb-product-description h5').length){
$(document).on('click', '.cpb-product-description h5', function(){
    $(this).nextUntil("h5").toggleClass('showElem');
})

$('.cpb-product-description h5').addClass('plus_01');
$(document).on('click', '.cpb-product-description h5', function(){
    $(this).toggleClass("minus_01");
})
clearInterval(handle1);
}
},100);
</script> 
<script>
var handle = setInterval(function(){
if($('.cpb-product-description h5').length){
$('.cpb-product-description h5').append('<svg class="plus1" version="1.1" width="20" height="20" id="tab-plus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M88.3,48.2H52.8V12.8c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.2-2.8,2.8v35.5H11.8C10.2,48.2,9,49.5,9,51s1.2,2.8,2.8,2.8h35.5v35.5c0,1.5,1.2,2.8,2.8,2.8c1.6,0,2.8-1.3,2.8-2.8V53.8h35.5c1.5,0,2.8-1.2,2.8-2.8S89.8,48.2,88.3,48.2z"></path></svg><svg class="minus1" version="1.1" width="20" height="20" id="tab-minus" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M88.3,52.8H11.8C10.2,52.8,9,51.5,9,50s1.2-2.8,2.8-2.8h76.5c1.5,0,2.8,1.2,2.8,2.8S89.8,52.8,88.3,52.8z"></path></g></svg>');
clearInterval(handle);
}
},100);
</script>
<script>
 var panels1 = setInterval(function(){if (window.matchMedia("(max-width: 767px)").matches) {
 if($('.cpb-product-panel').length){
 $(document).ready(function(){
    $("#cpb-product-panel").prependTo("#cpb-product-title");
  });
 clearInterval(panels1);
}}
 },100);
  
</script>
  <script>
 var panels2 = setInterval(function(){if (window.matchMedia("(max-width: 767px)").matches) {
$(window).on("scroll", function() {
   var scrollTop = $(window).scrollTop();
   if(scrollTop >= 10) {
   $("#cpb-panels-container").css("padding-top", "0px");
   }
});
  clearInterval(panels2);
 }},100);
    
  </script>

  {% if page.product %}
<div class="cpb-product-description">
  <h5 class="cpb-product-title">Product Description</h5>
  <div class="cpb-product-panel">
    <p>This is the first panel.</p>
  </div>
  <div class="cpb-product-panel">
    <p>This is the second panel.</p>
  </div>
</div>
{% endif %}

<style>
.cpb-product-description {
  border: 0px solid black;
  padding: 0px;
}

.cpb-product-title {
  margin-bottom: 10px;

}

.cpb-product-panel {
  display: none;
}

.plus1, .minus1 {
  width: 12px;
  height: 12px;
  cursor: pointer;
}
</style>

问题排查及修复方案

1. 核心交互缺失CSS规则

原代码仅设置了.cpb-product-panel {display: none;}，但未定义showElem类的显示样式，导致点击后添加类名却看不到内容展开。
修复：在CSS中添加：

.cpb-product-panel.showElem {
  display: block;
}

2. 重复绑定点击事件+轮询逻辑不可靠

原代码用setInterval轮询绑定两次click事件，容易导致逻辑冲突，且轮询时机不可控。改为监听DOM加载完成后直接绑定，合并点击逻辑。
修复：替换原handle1对应的JS代码为：

$(document).ready(function() {
  // 初始化给所有h5添加plus状态
  $('.cpb-product-description h5').addClass('plus_01');
  
  // 绑定点击事件，合并展开/收起+图标切换逻辑
  $(document).on('click', '.cpb-product-description h5', function(){
    // 切换内容显示/隐藏
    $(this).next('.cpb-product-panel').toggleClass('showElem');
    // 切换图标状态
    $(this).toggleClass("minus_01 plus_01");
  });
});

3. 选择器错误

原代码中$("#cpb-product-panel")是ID选择器，但实际元素用的是class.cpb-product-panel，导致DOM移动逻辑失效；
#cpb-panels-container元素在代码中未定义，scroll事件逻辑无效。
修复：
移除无效的panels1和panels2代码块（若不需要移动端DOM调整和scroll逻辑）；
若需保留移动端调整，将ID选择器改为class选择器：$(".cpb-product-panel").prependTo(".cpb-product-title");

4. 初始结构不符合逻辑

原示例中一个h5后面跟着两个panel，不符合nextUntil("h5")的匹配逻辑（应该是每个h5对应一个内容块）。调整结构为每个手风琴项对应一组h5+panel：

{% if page.product %}
<div class="cpb-product-description">
  <!-- 手风琴项1 -->
  <h5 class="cpb-product-title">Product Description</h5>
  <div class="cpb-product-panel">
    <p>This is the first panel.</p>
  </div>
  <!-- 手风琴项2 -->
  <h5 class="cpb-product-title">Shipping Info</h5>
  <div class="cpb-product-panel">
    <p>This is the second panel.</p>
  </div>
</div>
{% endif %}

5. jQuery版本冲突

原代码引入了jQuery 2.2.3，若新主题已自带更高版本jQuery，会导致冲突。
修复：移除<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>，直接使用主题自带的jQuery。

修复后的完整代码

{% if page.product %}
<div class="cpb-product-description">
  <h5 class="cpb-product-title">Product Description</h5>
  <div class="cpb-product-panel">
    <p>This is the first panel.</p>
  </div>
  <h5 class="cpb-product-title">Shipping Info</h5>
  <div class="cpb-product-panel">
    <p>This is the second panel.</p>
  </div>
</div>
{% endif %}

<style>
.cpb-product-description {
  border: 0;
  padding: 0;
}

.cpb-product-title {
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  padding-right: 20px;
}

.cpb-product-panel {
  display: none;
  margin-bottom: 15px;
}

.cpb-product-panel.showElem {
  display: block;
}

.plus1, .minus1 {
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 初始隐藏minus图标 */
.minus1 {
  display: none;
}

/* 切换到minus状态时显示minus，隐藏plus */
.cpb-product-title.minus_01 .minus1 {
  display: block;
}
.cpb-product-title.minus_01 .plus1 {
  display: none;
}
</style>

<script>
$(document).ready(function() {
  // 给所有h5添加图标和初始状态
  $('.cpb-product-description h5').append('<svg class="plus1" version="1.1" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M88.3,48.2H52.8V12.8c0-1.6-1.3-2.8-2.8-2.8s-2.8,1.2-2.8,2.8v35.5H11.8C10.2,48.2,9,49.5,9,51s1.2,2.8,2.8,2.8h35.5v35.5c0,1.5,1.2,2.8,2.8,2.8c1.6,0,2.8-1.3,2.8-2.8V53.8h35.5c1.5,0,2.8-1.2,2.8-2.8S89.8,48.2,88.3,48.2z"></path></svg><svg class="minus1" version="1.1" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M88.3,52.8H11.8C10.2,52.8,9,51.5,9,50s1.2-2.8,2.8-2.8h76.5c1.5,0,2.8,1.2,2.8,2.8S89.8,52.8,88.3,52.8z"></path></svg>');
  
  $('.cpb-product-description h5').addClass('plus_01');
  
  // 绑定点击事件
  $(document).on('click', '.cpb-product-description h5', function(){
    $(this).next('.cpb-product-panel').toggleClass('showElem');
    $(this).toggleClass("minus_01 plus_01");
  });
});
</script>

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

Shopify产品页Custom Product Builder插件手风琴功能失效排查求助

问题背景 #

原代码 #

问题排查及修复方案 #

1. 核心交互缺失CSS规则 #

2. 重复绑定点击事件+轮询逻辑不可靠 #

3. 选择器错误 #

4. 初始结构不符合逻辑 #

5. jQuery版本冲突 #

修复后的完整代码 #