在文章上显示产品

时间:2019-02-12 11:22:33

标签: shopify shopify-app shopify-template

如何在文章页面上显示产品列表(如配方)。 您能为我提供一些指导以实现该行为的方法吗? 如何将这些产品动态链接到文章?enter image description here

2 个答案:

答案 0 :(得分:5)

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

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

1)使用all_products [handle]

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

示例:

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

这适用于少量产品,但是对于大量产品,可能会导致页面加载时间延迟。我们还限制每页只能对all_products调用20次(我认为),因此这对于其中包含大量配料的食谱不起作用。

2)使用集合

使用仅包含所需产品的集合。如果知道集合的句柄,则可以引用任意集合。进行收藏时,您还可以手动对产品进行排序,以控制它们在循环浏览时出现的顺序。集合可以包含任意数量的产品,并且我相信如果您未指定其他限制,则默认分页将为您提供前20或50个产品。如果需要,您可以使用paginate标签包裹您的collection-product循环,以将最多提供1000种产品(尽管出于性能原因绝对不建议使用上限)

示例:

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

这两种方法的不利之处在于您不能在Shopify中的文章内容中编写Liquid代码,因此该成分部分需要作为摘要或主题文件中的一部分编写,并包含在文章模板中用于这些食谱。

这使我考虑下一个问题-您可能希望在成分中加入数量的概念,到目前为止,上述两种方法都没有给我们带来帮助。所以现在,困难的部分:

首先将这些信息放入液体代码段/部分中

我可以通过几种不同的方式来帮助您解决问题。不幸的是,没有人是完美的。

使用元字段

Metafields是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的Admin API来自己创建和更新元字段-如果您想自己尝试,请参见https://help.shopify.com/en/api/reference/metafield上的文档。

答案 1 :(得分:1)

这肯定是成功的秘诀。写你的文章。它将具有一个独特的手柄。将其保存在您的头部,剪贴板等中。现在创建一个手动集合。给它相同的句柄。现在,您可以通过Liquid引用一个空集合:

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

如果您现在用食谱中的产品填充该系列怎么办?尤里卡。亲切!然后,您可以将它们列出在简单的Liquid中,以用于下一个循环:

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

或者您可以是个聪明的裤子,然后亲自手动收集产品的提手。将它们存储在分配给文章的metafield资源中。例如,使用“ a-blah,b-blahblah,c-zigo-von-goober”之类的字符串,然后使用Liquid在文章模板中查找该元字段。用逗号分隔该字符串。现在像这样使用最出色的 all_products

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

还有更多的创意选择。 Shopify Liquid已经可以像这样玩了。没有限制,除了all_products的价格为20 ...您不能超过该数量。