Shopify产品更换零件(Shopify Product Replacement Parts)

使用Shopify寻找一些有趣情况的建议。 我正在为一个客户建立一个网站，该网站的产品可以免费更换零件。 每个替换零件都有不同的颜色选项。

到目前为止，我已经让公司的用户在商店中添加所有替换零件作为产品。 我已经过滤了搜索结果和目录结果，因此未显示替换部分。

他们希望替换零件显示的唯一地方是当用户访问PRODUCT时，他们可以单击按钮说明订单更换部件。 然后将显示该产品的所有更换部件的屏幕。

单个替换部件可以属于多个产品并且可以具有不同的颜色变体。

所以我到目前为止所做的是让客户端标记至少有两个标签的所有部分。 称为“部件”的标签，用于将产品标识为零件。 还有一个或多个标签，例如“链接：SKU123”，用于将零件链接到一个或多个产品。 然后在我的产品页面上，我使用液体循环所有部件并显示与产品SKU相匹配的部件。 然后我发现for循环有50项限制......

所以我查看了产品API，这可以，但它无法按标签过滤。 标签看起来很方便，但我没有看到很多方法来使用它们......所以最终我正在寻找一种方法来显示特定产品的所有替换零件。 它不必涉及标签，虽然客户已经标记了所有部件，我不想告诉他们这是浪费时间。 但是真的对如何实现这一点的任何想法都将非常感激。

我能想到的唯一方法是返回所有替换部件，然后在页面上过滤掉它们。 我看到API仅限于250种产品，但我想我可以进行多次调用，直到我得到它们。 我不确定有多少替换部分，但我怀疑可能有超过1000个。似乎浪费了网络资源，必须将它们全部拉下来然后过滤它们......

PS - 更换零件是免费的，它们可以以零美元金额结账吗？

Looking for some advice on an interesting situation using Shopify. I'm building a site for a client that has Products that have free replacement parts available. Each replacement part has variant color options.

So far I have had the users at the company add all the replacement parts as products in the store. I have filtered the search results and the catalog results so the replacment parts are not show.

The only place they want the replacement parts to show is when a user visits a PRODUCT, they can click a button that says order replacement parts. Then a screen will show with all the replacement parts for that product.

A single replacement part may belong to several products and may have different color variants.

So what I have done thus far was had the client tag all parts with at least two tags. A tag called "part" that identifies the product as a part. And one or more tags like "link:SKU123" that links the part to one or more products. Then on my Product page I was using liquid to loop all parts and display the ones that matched the products SKU. Then I found out that the for loop has a 50 item limit...

So I looked at the product API, which would be ok, except that it has no way to filter by tags. Tags seem so handy and yet I don't see many ways to use them... So ultimately I'm looking for a way to display all replacement parts for a particular product. It doesn't have to involve tags, although the client has already tagged all the parts and I would hate to tell them it was a waste of time. But really any thoughts on how to accomplish this would be greatly appreciated.

The only way I can think to do it, is to return all of the replacement parts and then filter through them on the page. I see the API is limited to 250 products, but I suppose I could make multiple calls until I get them all. I'm not sure how many replacment parts there are total, but I suspect there could be upwards of 1000. Seems like a waste of network resources to have to pull them all down and then filter through them...

P.S. - the replacement parts are free, can they be run through the checkout with a zero dollar amount?

最满意答案

我会将这些零件创建为独立产品。 然后每个部分都有变体（颜色）。 然后，您为此部件（产品）创建元数据，这些部件的字段包含所有产品ID的列表，这些产品ID是此部件的“母亲”。 这样你就不需要有奇怪的标签，你可以让概念更加分离，一切都更清晰。 根据零金额，是的，您可以以零金额结账（如果您的送货设置允许您这样做）。

Ok so I have a couple different answers to this question. Not sure which one I will use yet.

Method 1: Filter Collection by Tag using URL

The first one was provided by Shawn Rudolph on the Shopify forums. It involves filtering a collection by tag using the URL. Shawn's post here explains it well: https://ecommerce.shopify.com/c/shopify-discussion/t/product-replacement-parts-270174

Method 2: Use paginate to get all products from collection using the AJAX API

This method is pretty cool. Yes it is more work than method one, but this maybe useful in a lot of scenarios. Out of the box Shopify does not allow you to retrieve all products from a given collection using the AJAX API. It can be done with the admin API but not the AJAX one to my knowledge. However, you can access all products from a collection with a for loop, but the for loop only allows up to 50 items to be looped at a time. That's where the paginate trick comes in. Basically I adapted the technique outlined by davecap here: http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections

So first you need your HTML/Liquid layout:

{% paginate collections.mycollectionname.products by 50 %} {% for product in collections.mycollectionname.products %} <div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}"> {{ product.title }} </div> {% endfor %} {% if paginate.next %} <div class="clone-node next" title="{{ paginate.next.url }}"></div> {% endif %} <div id="insertion-point"></div> {% endpaginate %}

So let's break it down a bit. First we are paginating are products by 50. This is the max amount a for loop will allow, so that's what we are going to use:

{% paginate collections.mycollectionname.products by 50 %}

Next we begin to loop our products. Every product is given a wrapper div with a class of "clone-node" this is very important. I also assign the div a unique ID, which isn't necessary for this to work, but may come in handy when trying to identify the product for later operations.

{% for product in collections.mycollectionname.products %} <div class="clone-node" id="product-{{ forloop.index | plus:paginate.current_offset }}"> {{ product.title }} </div> {% endfor %}

We have to make sure to include the paginate.next URL. We also give this a "clone-node" class and we add a "next" class. I assign the paginate.next.url to the title attribute, but you could assign it to any number of attributes. You just need to be able to fetch it with jQuery.

{% if paginate.next %} <div class="clone-node next" title="{{ paginate.next.url }}"></div> {% endif %}

Then lastly we assign an insertion point. This is where we want our next set of 50 products to be inserted once we fetch them:

<div id="insertion-point"></div>

OK so now let's look at the JS code:

<script> var prevUrl = ""; //this helps us know when we are done receiving products function getParts() { //get the last instance of the .next node. This will give us the next URL to query var nextNode= $(".next").last(), url = nextNode.attr("title"); //nab the URL //send a get request to our next URL $.ajax({ type: 'GET', url: url, dataType:'text', success: function (data) { //use a dummy div to convert the text to HTML, then find all of our clone-nodes, including our new "next" div which contains our next URL var cloneNodes = $("<div>").html(data).find(".clone-node"); //insert our new clone-nodes on the page cloneNodes.insertBefore("#insertion-point"); //if the URL's don't match let's grab the next 50! if (prevUrl != url) { prevUrl = url; getParts(); } } }); } //Call getParts for the first time to get the party started. getParts(); </script>

What this will basically do, is get the URL for the next page of products from the title attribute of the div that's holding the paginate.next.url. Then using the jQuery ajax function we call that URL and it returns a page of HTML to use formatted just like our existing page, with the same "clone-node" classes we assigned, only it has the next 50 products embedded in it.

In davecap's example he used a dataType of HTML on his Ajax call, but that gave me some troubles. So instead, I used dataType text and used a dummy div created by jQuery to convert the text into HTML. Then jQuery grabs all of the divs with the "clone-node" class on them and inserts them on the page before our insertion-point. Remember the clone-nodes now hold the next 50 products so we just added the next 50 products to our page.

Lastly, we check if the previous URL is not equal to the current one. If it's not equal, that means it's a new URL and thus there must be more products to fetch, so we recursively call our getParts() function, which starts the process over and grabs the next 50. This continues until finally the URLs match, which means no more products to fetch, and the process stops.

There you have it! Of course if you have to fetch thousands and thousands of products this may be less then ideal because you are calling them 50 at a time. But for smaller numbers (maybe hundreds and hundreds...) it should work just fine.