在文章上显示产品

Question

如何在文章页面上显示产品列表（如食谱）。 你能给我一些关于我应该用什么来实现这种行为的指导吗？ 如何将这些产品动态链接到文章？

Answer 1

这是一个一定会成功的秘诀。写你的文章。它将有一个独特的手柄。将其保存在您的头脑、剪贴板等中。现在创建一个手动集合。给它同样的把手。现在您可以通过 Liquid 引用一个空集合：

collection['some-handle-to-an-article']

如果您现在用食谱中的产品填充该集合会怎样？尤里卡。亲切！然后，您可以将它们列在一个简单的 Liquid for next 循环中，如下所示：

{% for product in collection['some-handle-to-an-article'] %}
  {{ product.title }}
{% endfor %}

或者您也可以是一个聪明的裤子，自己手动收集产品的把手。将它们存储在分配给文章的元字段资源中。例如，像 'a-blah,b-blahblah,c-zigo-von-goober' 这样的字符串，然后使用 Liquid 在文章模板中查找该元字段。用逗号分割该字符串。现在像这样使用最优秀的 all_products：

{% assign fizzbuzz = all_products['a-blah'] %}
  {{ fizzbuzz.title }}

还有更多创意选择。 Shopify Liquid 适合这样玩。没有限制，除了 all_products 在 20... 你不能超过这个。

Answer 2

一旦我们知道它们是什么就获取产品

在 Shopify 的任意页面上显示产品有两种方法：

1) 使用 all_products[handle]

使用产品句柄从all_products 全局对象中获取产品。

例子：

{% assign ingredient = all_products['lavender-oil'] %}

这适用于少量产品，但对于大量产品可能会导致页面加载时间延迟。我们也被限制为每页只能调用 20 次（我认为）all_products，因此这不适用于其中包含大量成分的食谱。

2) 使用集合

使用仅包含所需产品的集合。如果您知道集合的句柄，则可以引用任意集合。在制作集合时，您还可以手动对产品进行排序，以控制它们在循环时出现的顺序。集合可以包含任意数量的产品，如果您不指定任何其他限制，我相信默认分页将为您提供前 20 个或 50 个产品。如果需要，您可以通过使用 paginate 标签包装您的收藏产品循环来将提供的产品数量调整为高达 1000 个（尽管出于性能原因绝对不建议使用该上限）

例子：

{% assign ingredients = collections['love-potion-number-9'] %}
{% for product in ingredients.products %}
  <h2>{{ product.name }}!!</h2>
{% endfor %}

这两种方法的缺点是您无法在 Shopify 的文章内容中编写 Liquid 代码，因此该成分部分需要编写为 sn-p 或主题文件中的一个部分，并包含在您的用于这些食谱的文章模板。

这让我开始考虑下一个问题 - 您可能希望在成分中包含数量的概念，但到目前为止，上述内容都没有给我们。所以现在，最困难的部分：

首先将该信息放入 Liquid sn-p/section

我可以临时想到几种不同的方法来帮助您。不幸的是，没有人是完美的。

使用元字段

元字段是 Shopify 中的一个很好的工具，但遗憾的是 Shopify 并没有让它们易于使用 [1]。

拥有元字段编辑工具后，请为“命名空间”和“键”值提供命名结构。例如，您可以为您提供的配方创建以下元字段。 （注意：如何输入这些将取决于您使用的元字段编辑工具）

namespace: 'ingredients',  // We'll use this as the 'box' that holds all our ingredients
key: 'juniper-berry-oil', // This will be the product handle for the product in question
value: '2 drops' // The quantity used for the recipe

namespace: 'ingredients',
key: 'rosemary-ct-camphor-oil',
value: '1 drop'

namespace: 'ingredients',
key: 'cypress-oil',
value: '1 drop'

... (etc) ...

然后，在您创建成分列表的主题文件中，您将拥有如下所示的代码：

{% assign ingredients = article.metafields.ingredients %}
{% for ingredient in ingredients %}
  {% assign handle = ingredient.first %}
  {% assign amount = ingredient.last %}
  {% assign product = all_products[handle] %}

  <!-- HTML code here -->

{% endfor %}

使用标签和产品

如果您创建了一个标签命名方案，您可以遍历这些方案并使用它们来构建您的成分列表。例如，如果您以ingredient_[product-handle]_[amount] 的形式为文章添加多个标签，您可以将它们引用为：

{% for tag in article.tags %}
  {% if tag contains 'ingredient' %}
     {% assign breakdown = tag | split: '_' %}

     {% assign handle = breakdown[1] %}
     {% assign product = all_products[handle] %}

     {% assign amount = breakdown | last %}

     <!-- HTML Code -->
  {% endif %}
{% endfor %}

这种方法的缺点是，如果这样做，没有简单的方法来重新排序标签 - 使用集合可以更好地控制它。

将配方数量放入收集循环中

引用集合的最简单方法是拥有一个与文章具有相同句柄的集合 - 然后您可以将集合及其产品引用为：

{% assign ingredients = collections[article.handle] %}
{% for product in ingredients.products %}
   <!-- HTML Code here -->
{% endfor %}

这样做的好处是可以通过将集合设置为手动排序方法，让您轻松对成分进行排序，但相应的缺点是没有明显的地方放置数量信息。

获取该信息的一种方法是使用标签或元字段 - 元字段的优势在于能够直接访问产品的数量 - 如果在此答案的元字段部分中使用上述命名约定，你可以使用：

{% assign ingredients = collections[article.handle] %}
{% for product in ingredients.products %}
  {% assign amount = article.metafields.ingredients[product.handle] %}

  <!-- HTML Code here -->
{% endfor %}

如果使用标签，您需要一种可以像标签部分一样拆分的格式，并每次循环遍历所有标签以找到适合您产品的标签。如果您的标签设置为ingredient_[product-handle]_[amount]

如果使用标签，您需要一种可以像标签部分一样拆分的格式，并每次循环遍历所有标签以找到适合您产品的标签。如果您的标签设置如上例：

{% for tag in article.tags %}
  {% if tag contains 'ingredient' and tag contains product.handle %}
     {% assign amount = tag | split: '_' | last %}
  {% endif %}

    <!-- HTML Code -->
{% endfor %}

---

希望这可以帮助您继续前进！

---

[1] 使用元字段：在 Shopify 中编辑元字段有几种可能的解决方案 - 我个人偏好 Chrome 的“Shopify FD”扩展，但最近对 Shopify 管理屏幕的更新是干扰此扩展在某些页面上加载和显示其元字段面板的能力。我知道产品页面仍然有效，但有些页面（如收藏）不再有效。

您的商店还有许多可用于编辑元字段的应用程序 - 我没有使用过任何一个，所以我无法说明它们的价值，但您可以在此处查看列表：https://apps.shopify.com/search?q=metafield&st_source=

如果您有编码背景，您还可以通过将正确的数据发送到 Shopify 的管理 API 来自己创建和更新元字段 - 如果您想自己尝试，请参阅https://help.shopify.com/en/api/reference/metafield 的文档。