So beheben Sie JQuery Fehler beim Anzeigen der Variante auf Shopify Seite

Question

Hallo Ich versuche herauszufinden, wie ich einen Jquery Fehler beheben kann, die ich bekomme, wenn ich versuche, Produktpreise für mehr als 2 Produkte anzuzeigen. Derzeit arbeite ich mit 2 Produkten (Code zeigt 1 Produktcode), aber wenn ich den folgenden Code für ein drittes Produkt repliziere, bekomme ich einen nicht reagierenden Skriptfehler und ich bin mir nicht sicher, ob dies mit Speicherbeschränkungen in Shopify zu tun hat 2 Produkte.

My-Code für 1 Produkt in page.prices.liquid

<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 %} 

Hier finden Sie den Code in meiner Seite:

<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> 

Die nur zwei Zeilen, die ich geändert haben ein anderes Produkt hinzufügen ist:

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

die bearbeitet wird, um Broschüren zum 3. Produktnamen zu ändern und dann den div-IDs price_fifth_row usw.

Der jquery Fehler ich erhalte, ist die folgende:

Manchmal wird diese jquery.min.js sagen: 2 und manchmal jquery.min.js: 3 .

Ich hätte einen Link für die Website geteilt, aber das ist im Moment mit einem Passwort gesperrt.

Wenn jemand bitte, würde es zu schätzen wissen.

Dank

Im Folgenden wird das Skript als Teil eines anderen Skript damit die $ i als jquery Konflikte mit wurde.

<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

Hier ist Ihr JavaScript-Code festgelegt:

<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> 

Es gab eine i vor document.ready und Sie schließen nicht die Funktion. Hilft es Ihrer nicht reagierenden Seite?