只從一個產品獲得JSON數據shopify

Question

什麼即時試圖做的：

當我點擊收藏頁面網格產品，我試圖讓產品的稱號等用ajax。

繼承人我的代碼：

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

但是當我點擊任何產品，即時得到警報所有當前頁面上的產品。 我該如何調整我的代碼才能得到我點擊的產品的標題？

Answer 1

你可以做到這一點，而無需使用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> 

如果由於某種原因，你更喜歡使用AJAX，這應能正常工作：很多

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