如何在Shopify页面上显示变体时修复JQuery错误

Question

您好我正在尝试解决当我尝试显示超过2种产品的产品价格时如何解决我得到的jquery错误。目前我有2个产品（代码显示1个产品代码），但每当我为第三个产品复制以下代码时，我得到一个无响应的脚本错误，我不确定这是否与Shopify中的内存限制有关2个产品。

page.prices.liquid中的1个产品的代码

<div class="grid">
  <div class="grid_full">
    {% comment %}
      div class="grid__item large--two-thirds push--large--one-sixth" -- old one
    {% endcomment %}
  <div class="grid__item">

    {% for product in collections.leaflets.products %}
   {% for variant in product.variants %}


{% if forloop.index <=1 %}
<div id="temp_first" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>  

{% elsif forloop.index <13 %} 

<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <=13 %}     
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>
{% elsif forloop.index ==14 %} 
<div id="temp_second" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <26 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==26 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div>

{% elsif forloop.index ==27 %}
<div id="temp_third" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <39 %}  
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==39 %}  
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>
</div> 

{% elsif forloop.index ==40 %} 
<div id="temp_fourth" style="display:none;">
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index <52 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>

{% elsif forloop.index ==52 %} 
<div class="price"><a href="/products/leaflets?variant={{ variant.id }}">{{ variant.price | money | remove: '.00'}}</a></div>       
    </div>  

{% endif %}

   {% endfor %}
{% endfor %}

以下是我页面中的代码：

<script>// <![CDATA[
$i(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
// ]]></script>

<div class="grid__item large prices-two">
<div class="prices-title blue">Product Name</div>
</div>
<div id="price_first_row" class="grid__item large prices-three"></div>
<div id="price_second_row" class="grid__item large prices-four"></div>
<div id="price_third_row" class="grid__item large prices-five"></div>
<div id="price_fourth_row" class="grid__item large prices-six"></div>
</div>

我更改为添加另一个产品的唯一两行是：

{% for product in collections.leaflets.products %}

编辑

以将传单更改为第3个产品名称，然后将div ID更改为price_fifth_row等。

我得到的jquery错误如下：

有时会说jquery.min.js：2，有时候jquery.min.js：3。

我会为该网站分享一个链接，但目前已使用密码锁定。

如果有人可以讨好，我会很感激。

由于

以下显示脚本作为另一个脚本的一部分，因此$ i与jquery发生冲突。

<script>// <![CDATA[
$(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
    var carousel = $i("#owlCarousel-Prices");
  carousel.owlCarousel({
    items: 3,
    margin:10,
    navigation:true,
    autoHeight : true,
    autoPlay : 3000,
    navigationText: [
      "<i class='icon-chevron-left icon-white'><</i>",
      "<i class='icon-chevron-right icon-white'>></i>"
      ],
  });
});
// ]]></script>

Answer 1

以下是您修复的JavaScript代码：

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("#price_first_row").html($("#temp_first").html());
        $("#price_second_row").html($("#temp_second").html());
        $("#price_third_row").html($("#temp_third").html());
        $("#price_fourth_row").html($("#temp_fourth").html());
    });
//]]>
</script>

在 document.ready 之前有一个 i ，并且您没有关闭该功能。它会帮助您反应迟钝吗？