Shopify -如何显示"按子类别浏览"在索引上形成液体


Shopify - how can I display the "Browse by subcategories" form on index.liquid?

我要做的是在目录页的子类别的索引页上创建一个快捷方式。在目录页面上,我有以下代码用于浏览集合:

<form action="" class="navigation">
    <div class="category-selector-wrapper">
        <label>Browse by collection:</label>
        <div class="category">
            <select class="navigationSelector">
                <option value="/collections/all">All</option>
                {% for col in collections %}
                    <option value="{{ col.url }}"{% if collection.handle == col.handle %}selected="selected"{% endif %}>{{ col.title }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    {% assign colItems = collection.all_tags | size %}
    {% if colItems > 0 %}
    <div class="category-selector-wrapper">
        <label>Subcategory:</label>
        <div class="category">
            <select class="navigationSelector">
                {% if collection.handle %}
                    <option value="/collections/{{ collection.handle }}">All</option>
                {% elsif collection.products.first.type == collection.title %}
                    <option value="{{ collection.title | url_for_type }}">All</option>
                {% elsif collection.products.first.vendor == collection.title %}
                    <option value="{{ collection.title | url_for_vendor }}">All</option>
                {% endif %}
                {% for tag in collection.all_tags %}
                    {% if current_tags contains tag %}
                        <option value="/collections/{{ collection.handle }}/{{ tag | handleize }}" selected="selected">{{ tag }}</option>
                    {% else %}
                        <option value="/collections/{{ collection.handle }}/{{ tag | handleize }}">{{ tag }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
    </div>
    {% endif %}
    <label class="total">{{ collection.products_count }} {{ collection.products_count | pluralize: 'item', 'items' }} total</label>
</form>

我所尝试的是在index.liquid中输入下面的代码:

  <form action="" class="navigation">
    <div class="category-selector-wrapper">
            <label>Subcategory:</label>
            <div class="category">
                <select class="navigationSelector">
                    {% if collection.handle %}
                        <option value="/collections/{{ collection.handle }}">All</option>
                    {% elsif collection.products.first.type == collection.title %}
                        <option value="{{ collection.title | url_for_type }}">All</option>
                    {% elsif collection.products.first.vendor == collection.title %}
                        <option value="{{ collection.title | url_for_vendor }}">All</option>
                    {% endif %}

                            <option value="/collections/{{ collection.handle }}/{{ tag | handleize }}" selected="selected">{{ tag }}</option>
                            <option value="/collections/{{ collection.handle }}/{{ tag | handleize }}">{{ tag }}</option>
                </select>
            </div>
        </div>
    </form>

这段代码的作用是显示快捷方式,但我只能选择"全部"。下拉列表不显示任何其他子类别。有什么建议吗?谢谢你!

索引页没有设置collection变量。你需要自己给它赋值,像这样:

{% assign collection = collections.all %}

(在你已有的代码之上)

collections.all是自动收集