从 shopify 中的一个产品中获取 json 数据

Question

我想做什么：

当我单击 collections 页面网格中的产品时，我试图使用 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>

从 shopify 中的一个产品中获取 json 数据

get json data from just one product in shopify

json

liquid

shopify