json Daten von nur ein Produkt in Shopify

Question

bekommen, was im versucht zu tun:

, wenn ich ein Produkt in der Sammlungen Seite Raster, Ich versuche, das Produkt Titel zu bekommen, etc Ajax.

her mein Code:

{% for product in collection.products %} 

<div class="product"> 
{% capture producturl %}{{ product.url }}{% endcapture %} 
<a class="ajax ajax{% increment ajaxno %}"> 
PRODUCT IMAGE 
</a> 
</div> 


<script> 
jQuery(function ($) { 

    $("a.ajax0").click(function(){ 
    jQuery.getJSON('{{ producturl }}.js', function(product) { 
     console.log('The title of this product is ' + product.title); 
    }); 
    }); 

}); 
</script> 

{% endfor%} 

aber wenn ich auf die jedes Produkt, im immer Benachrichtigungen über alle Produkte auf der aktuellen Seite. Wie optimiere ich meinen Code, um nur den Titel des Produkts zu erhalten, für den ich klicke?

Answer 1

Sie können dies tun, ohne AJAX:

{% for product in collection.products %} 
    <div class="product"> 
    <a class="product-image" data-title="{{product.title}}"> 
    PRODUCT IMAGE 
    </a> 
    </div> 
{% endfor%} 

<script> 
    jQuery(function($) { 
    $("a.product-image").click(function() { 
     console.log($(this).data('title')); 
    }); 
    }); 
</script> 

Wenn aus irgendeinem Grund bevorzugen Sie AJAX zu verwenden, diese richtig funktionieren sollte:

alot

{% for product in collection.products %} 
    <div class="product"> 
    <a class="product-image" data-url="{{product.url}}"> 
    PRODUCT IMAGE 
    </a> 
    </div> 
{% endfor%} 

<script> 
jQuery(function($) { 
    $("a.product-image").click(function(){ 
    var productUrl = $(this).data('url'); 
    jQuery.getJSON(productUrl + '.js', function(product) { 
     console.log('The title of this product is ' + product.title); 
    }); 
    }); 
}); 
</script>