やろうとして何イムshopify

Question

でただ一つの製品からJSONデータを取得する：私はコレクションのページグリッド内の製品をクリックすると、

、私は、Ajaxを使用してなど、製品のタイトルを取得しようとしています。

HERESに私のコード：

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