将集合分配给Shopify中自定义创建的集合页面?

时间:2019-01-14 10:27:02

标签: shopify

我在Shopify上使用了免费的Venture主题,并且试图创建自定义收藏页。

我在stackoverflow中找到了一个解决方案,但是它可以在某个地方提供帮助。 How to add collection.liquid to an existing page?

解决方案的总结是: 复制collection.liquid中的所有内容并将其粘贴到新代码段中(假设您将其称为collection-copy.liquid)。 然后,在您要添加集合页面的页面中,只需添加{%include'collection-copy'%}

此解决方案效果很好,但对我来说还有一个问题。在自定义创建的页面中,它说“对不起,此收藏中没有产品”。在同一页面的自定义中,有一个“收藏”部分。但是在“收藏”部分中没有选择收藏的选项。只有“启用标签过滤”和“启用排序”复选框。

网页:https://mottomfreedom.com/pages/less-is-more

您是否打算使用此自定义创建的代码段分配收藏集?

{% paginate collections[settings.frontpage_collection].products by 20 %}

<div class="page-width">

  <header class="grid medium-up--grid--table section-header small--text-center">
    <div class="grid__item medium-up--one-half section-header__item">
      <h1 class="section-header__title">
        {{ collection.title }}
        {% if current_tags %}
          &ndash; {% assign title_tags = current_tags | join: ', ' %}
          {{ title_tags }}
        {% endif %}
      </h1>
      {% if collection.description != blank %}
        <div class="section-header__subtext rte">
          {{ collection.description }}
        </div>
      {% endif %}
    </div>
    <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
      {% section 'collection-filters' %}
    </div>
  </header>

  <div class="grid grid--no-gutters grid--uniform">

    {% for product in collection.products %}
      <div class="grid__item small--one- medium-up--one-third">
        {% include 'product-card', product: product %}
      </div>
    {% else %}
      {% comment %}
        Add default products to help with onboarding for collections/all only.

        The onboarding styles and products are only loaded if the
        store has no products.
      {% endcomment %}
      {% if shop.products_count == 0 %}
        <div class="grid__item">
          <div class="grid grid--no-gutters grid--uniform">
            {% assign collection_index = 1 %}
            {% for i in (1..10) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_index = 1 %}
                {% when 8 %}
                  {% assign collection_index = 2 %}
                {% when 9 %}
                  {% assign collection_index = 3 %}
                {% when 10 %}
                  {% assign collection_index = 4 %}
              {% endcase %}
              <div class="grid__item small--one-half medium-up--one-fifth">
                <a href="/admin/products" class="product-card">
                  <div class="product-card__image-container">
                    <div class="product-card__image-wrapper">
                      <div class="product-card__image">
                        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>
                  <div class="product-card__info">
                    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                    <div class="product-card__price">
                      $19.99
                    </div>
                  </div>
                  <div class="product-card__overlay">
                    {% assign view_string_length = 'products.product.view' | t | size %}
                    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                  </div>
                </a>
              </div>
              {% assign collection_index = collection_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        {% comment %}
          If collection exists but is empty, display message
        {% endcomment %}
        <div class="grid__item small--text-center">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}

2 个答案:

答案 0 :(得分:1)

在接受答案之前花一些时间是正确的:))解决方案有效,但是我不得不为每个集合创建1页和4个临时文件。最后,我发现某些部分(例如“ collection.list”)没有指向我创建的页面。我认为您在答案的开头就在谈论这个:)

在那之后,我找到了一个更好的解决方案。只需创建一个新的section.liquid文件,然后使用“ if”语句将其放在“ collection.liquid”中即可。

{% if collection.handle == 'less-is-more' %}
      	{% section 'custom-featured-products-LESSisMORE' %}

{% endif %}

但是无论如何,我感谢您的关注。非常感谢戴夫。

答案 1 :(得分:0)

似乎没有任何地方定义collection变量。

我建议将代码段的开头从:

{% paginate collections[settings.frontpage_collection].products by 20 %}

收件人:

{% assign collection = collections[settings.frontpage_collection] %}
{% paginate collection.products by 20 %}

每当您在URL中包含collections的页面上时,都有一个隐式/collections/[something]变量,但是当您在/page/[something]的URL上时,您就有一个隐式变量page变量改为Liquid。

  1. 注意:如果您在settings.frontpage_collection主题值中设置的集合不是您想要的集合,则可以:

    a。使用主题旁边的“自定义”链接更改值(最容易在/ admin / themes页面上找到),如果您不打算将该设置用于其他任何用途,则很有用;

    b。对收集句柄进行硬编码,例如:collections['i-am-sure-this-will-never-change'],但硬编码的字符串很难看,通常应避免使用

    c。通过向config/settings_schema.json添加一个条目来创建自己的主题设置-如果您仍要适应自定义主题设置,请参见https://help.shopify.com/en/themes/development/theme-editor/settings-schema;或

    d。如果所有内容都在一个节中,则可以使用节设置(类似于主题设置)来创建专门与该代码块相关联的变量。

如果您需要为多个集合制作这些特殊页面,并且这些页面中的每个页面都在很大程度上重复使用相同的代码,则可以通过将通用代码移至代码段并将变量从页面模板传递至代码段来简化生活。为此:

  1. 在主题的“ snippets”文件夹中创建一个文件。 (对于这个示例,假设文件名为collection-in-page.liquid。我们将向此代码段传递集合,因此您可以删除assign语句。
  2. 在特定于页面的模板中,弄清楚集合句柄是什么

    a。这可能是硬编码的,也可能是您可以通过使用页面上的元字段或标签来查找的。例子: {% assign collection_handle = 'hardcoded-handle' %}{% assign collection_handle = page.metafields.related_items.collection %}

  3. 在页面模板中,包含您创建的代码段。我发现明确地传递要使用的任何变量会有所帮助,例如:

    {% include 'collection-in-page', collection: collections[collection_handle] %}

希望这会有所帮助!