Question

我在Shopify上有一个在线商店。我想要做的是在产品页面上，有一个“也需要”类型列表。我已经创建了所有列表和其他项目，但我似乎无法弄清楚如何在另一个产品页面上列出一个产品的变体。

我的选项菜单包括：

    <select id="product-select" name="id" data-id="{{ 304164943 }}">
{% for variants in product.variants %}   
      <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
</select>

输出：

    <select id="product-select" name="id" data-id="304164943">

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

  <option value=""> - </option>

304164943的data-id是我要列出变体的产品，但是生成的下拉菜单是空的。

Answer 1

您无法通过其ID使用Liquid访问产品。但是你可以通过句柄访问它。因此，如果手柄已知，您可以这样做：

{% assign relatedProduct = all_products['some-handle'] %}
{% for relatedVariant in relatedProduct.variants %}   
  <option value="{{ relatedVariant.id }}">{{ relatedVariant.title }} - {{ relatedVariant.price | money }}</option>
{% endfor %}

你发布的循环代码中也出现了错误 - 对于变种应该是，对于变种应该是。我猜这只是一个错字。

Answer 2

产品页面仅返回属于该页面的产品的对象。它不会返回另一个产品的对象。所以要访问它你需要做一些javascript jiggery pokery或创建一个链接列表。这是一个使用链接列表的教程：

http://www.tetchi.ca/shopify-tutorial-how-to-create-a-part-picker-form/

或者，你可以去JS路线。您需要通过ajax获取产品对象，并将返回的数据附加到页面。要获取这些数据，您需要使用Ajax api进行ajax get：

https://docs.shopify.com/support/your-website/themes/can-i-use-ajax-api

所以如果使用jquery - 这样的东西会起作用:(其中<product-handl>是你想要插入的产品的句柄）

$.get( "/products/<product-handle>.js", function( data ) {
 var variants = data.variants; // all your variants
  // Then you can loop over the variants insert the options into your page...
});

因为这是在页面渲染后添加的，所以你需要做一些ajaxy cart的东西，这样你就可以将东西放入购物车。你的主题可能已经有了一些ajaxy cart的东西。

在其他产品页面中选择列表变体

2 个答案: