Shopify列表其他产品页面中的变体

问题描述：

我在Shopify上有一个在线商店。我想要做的是在产品页面上，有一个“还需要”的类型列表。我已经创建了所有我的列表和其他项目，但我似乎无法弄清楚的是如何在另一个产品页面上列出一个产品的变体。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数据-id是产品，我想列出但生成的下拉菜单的变体是空的。

答

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

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

或者，你可以去JS路线。您需要通过ajax获取产品对象，并将返回的数据追加到页面中。为了抓住这个数据，你需要做一个AJAX获取使用AJAX API：

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购物车的东西，所以你可以把东西放在购物车中。你的主题可能已经有一些雅客车的东西在里面。

感谢Rob的快速回复。我试过把它实现到页面中，但我仍然显示一个空白列表。我已经在页面中有ajax cart的东西，所以我可以添加其他项目到购物车。当我查看页面的源代码时，我只是在

您是否将变体数据插入到dom中？你能否将你添加的代码粘贴到你的问题中？谢谢 – Rob

对不起，我会进一步了解它。以下是我试图完成的页面：http://www.mod-ified.com/products/copy-of-stacked-stone因此，如果你去量计算器，你会看到客户可以输入什么他们需要。我仍在移动，但接近最终布局。一旦他们把高度/宽度和所有这些，他们然后显示他们需要多少产品。在主要输入项下，有一个列表，我想要产品的下拉变体。石头完成是第一个与变体列表。 – dylancorp

答

您无法通过Liquid的ID访问产品。但是，您可以访问它将处理。因此，如果处理被称为你可以这样做：

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

你也贴出你的循环代码得到了一个错误 - 它应该是的变种，不的变种。我猜这只是一个错字。

Shopify列表其他产品页面中的变体

相关推荐