Shopify ajax 产品集合

Question

我正在尝试在我的 Shopify 网站上构建 Vue 模块，因此我为集合创建了一个 JSON 端点:

{% layout none %}
{% paginate collection.products by settings.pagination_limit %}
   {
     "results": {{ collection.products | json }}
   }
{% endpaginate  %}

当我访问/collections/collection-slug?view=json 处的端点时，我得到了所有产品的完整转储，但是当我使用 ajax 时，我得到的只是没有嵌套产品的集合对象。

我的ajax:

$.getJSON('/collections/mens-slip-on?view=json', function(response) {
    console.log(response);
    that.products = response;
  });

我的结果:

Object {collection: Object}

collection:Object
description:(...)
handle:(...)
id:(...)
image:(...)
products_count:(...)
published_at:(...)
title:(...)
updated_at:(...)

我的完整 Vue 组件:

new Vue({
 el: '#filterable',
 data: {
 collection: null,
 products: null
},

mounted() {
  this.initCollection();
  this.fetchProducts();
},

methods: {

initCollection: function() {
  var currPath = window.location.pathname;
  this.collection = currPath.substring(currPath.lastIndexOf('/') + 1);
},

fetchProducts: function() {
  var that = this;

  $.getJSON('/collections/mens-slip-on?view=json',        function(response) {
    console.log(response);
    that.products = response;
  }); 
 }

}

});

Vue.config.devtools = true;

看来无论我在 collection.json.liquid 模板中放入什么内容，它总是返回集合对象。

更新:我能够通过使用 XHR 而不是 jQuery 进行 ajax 调用来解决这个问题。看来这个问题在某种程度上与 jQuery getJSON 有关，但我不清楚其原因。

var httpRequest = new XMLHttpRequest();

  httpRequest.onreadystatechange = alertContents;
  httpRequest.open('GET', '/collections/' + this.collection + '?view=json', true);
  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  httpRequest.send();

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        var response = JSON.parse(httpRequest.responseText);

        parent.products = response.results;
      }
    }
  }

Answer 1

我相信您的电话不正确。

应该更像

$.getJSON('/collections/mens-slip-on.json', function(response) {
    console.log(response);
    that.products = response;
  });

这将以 json 格式返回集合对象。如果您想要您需要的所有产品

$.getJSON('/collections/mens-slip-on/products.json', function(response) {
    console.log(response);
    that.products = response;
  });